[英]Rendering multiple charts with React
I am a newbie to React, Highcharts and UI developing in general. 我是React,Highcharts和UI开发的新手。 I would like to render multiple charts from an array of data.
我想从一组数据中绘制多个图表。 Currently, the page displays only the last chart - from the last data in the array.
当前,页面仅显示最后一个图表-来自数组中最后一个数据。
function chartToRender(seriesArr){
//console.log(JSON.stringify(application));
var Chart = React.createClass({
// When the DOM is ready, create the chart.
componentDidMount: function() {
// Extend Highcharts with modules
if (this.props.modules) {
this.props.modules.forEach(function(module) {
module(Highcharts);
});
}
// Set container which the chart should render to.
this.chart = new Highcharts[this.props.type || "Chart"](
this.props.container,
this.props.options
);
},
//Destroy chart before unmount.
componentWillUnmount: function() {
this.chart.destroy();
},
//Create the div which the chart will be rendered to.
render: function() {
return React.createElement('div', {
id: this.props.container
});
}
}), element2;
return seriesArr.map(application =>
element2 = React.createElement(Chart, {
container: 'stockChart',
type: 'stockChart',
options: {
rangeSelector: {
selected: 0
},
title: {
text: application.app_name + ' application Free Memory'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4,
shared: true
},
xAxis:{
type:'datetime',
//categories : timeSeries,
dateTimeLabelFormats : {
millisecond: '%Y-%m-%dT%H:%M:%S.%L'
}
},
yAxis: {
title: {
text: 'Free Memory'
}
},
series: application.series
}
})
)
}
Currently, I am calling this function through the render function on the class 目前,我正在通过类上的render函数调用此函数
render() {
var seriesArr = getSeriesArr(this.props)
return(
<div>
<div className="row">
<ul>
{chartToRender(seriesArr)}
</ul>
</div>
</div>
)
}
How can I display all the charts on the page one below the other? 如何在页面上显示所有图表,一个又一个? the "seriesArr" variable has all the data required to render the charts.
“ seriesArr”变量具有呈现图表所需的所有数据。
Try pushing your dynamically created Chart components into an array and then render the array. 尝试将动态创建的Chart组件推入数组,然后呈现该数组。 That should get you going in the right direction.
那应该使您朝正确的方向前进。
let charts =[];
charts = seriesArr.map(application =>
element2 = React.createElement(Chart, {
container: 'stockChart',
type: 'stockChart',
options: {
rangeSelector: {
selected: 0
},
title: {
text: application.app_name + ' application Free Memory'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4,
shared: true
},
xAxis:{
type:'datetime',
//categories : timeSeries,
dateTimeLabelFormats : {
millisecond: '%Y-%m-%dT%H:%M:%S.%L'
}
},
yAxis: {
title: {
text: 'Free Memory'
}
},
series: application.series
}
})
)
render() {
return(
<div>
<div className="row">
<ul>
{charts}
</ul>
</div>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.