Question

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

class SquareButton: UIButton {

    let brandBlue: UIColor = UIColor(red: 0, green: 127, blue: 255)

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.cornerRadius = 10.0
        self.layer.shadowColor = brandBlue.cgColor
        self.layer.shadowRadius = 1.5
        self.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        self.layer.shadowOpacity = 0.6
        self.layer.masksToBounds = false   
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.layer.cornerRadius = 10.0
        self.layer.shadowColor = brandBlue.cgColor
        self.layer.shadowRadius = 1.5
        self.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        self.layer.shadowOpacity = 0.6
        self.layer.masksToBounds = false  
    }
}

目前，我通过类

上的render函数调用此函数

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

)

 }

如何在页面上显示所有图表？＆＃34; seriesArr＆＃34;变量具有渲染图表所需的所有数据。

Answer 1

尝试将动态创建的Chart组件推送到数组中，然后渲染数组。这应该让你朝着正确的方向前进。

 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>                   

        )
    }

使用React渲染多个图表

1 个答案: