使用 React 渲染多个图表

Question

我是 React、Highcharts 和 UI 开发的新手。 我想从一组数据中呈现多个图表。目前，该页面仅显示最后一个图表 - 来自数组中的最后一个数据。

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
     }
   })

)

 }

目前我是通过类上的render函数调用这个函数

render() {

    var seriesArr = getSeriesArr(this.props)


    return(

    <div>
        <div className="row">
            <ul>            
                {chartToRender(seriesArr)}
            </ul>
        </div>
    </div>                   

    )
}

如何在一个页面的下方显示所有图表？ “seriesArr”变量具有渲染图表所需的所有数据。

Answer 1

尝试将您动态创建的图表组件推入一个数组，然后渲染该数组。这应该让你朝着正确的方向前进。

 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>                   

        )
    }