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() { 

    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>     

     ) 
    }