React-Highcharts 不重绘图表

Question

我的代码使用 ultimatejs:tracker-react 和 react-highcharts 使用从 Mongodb 集合中提取的实时数据绘制图表。为简单起见，启用了autopublish 包。

问题：在为 Highcharts 设置初始数据系列后，chart.series[0].setData([5,4,3,2,1]) 更新了系列，但新数据并未绘制在图表上。图表仍然显示 Highcharts 初始化的最初 3 个点。

我们如何在 highcharts 图表上绘制新的series 值？

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import ReactHighcharts from 'react-highcharts';

import { Pressure } from '../api/pressure.js';


export class PressureChart extends TrackerReact(Component) {

    // Returns data in the Highcharts series format
    seriesData() {
        const result = Pressure.find().fetch();
        pressure = _.pluck(result, 'pressure');
        pressure = pressure.map(p => Number(p))
        time = _.pluck(result, 'timestamp');
        series = _.zip(time, pressure);
        return pressure
    }

    updateChart() {
        let chart = this.refs.chart.getChart()
        console.log(chart.series[0].data)       // Echos out an array of 3 elements
        chart.series[0].setData([5,4,3,2,1])    // Tests using this array, instead of array pulled from Collection
        console.log(chart.series[0].data)       // Echos out an array of 5 elements
    }

    render() {
        const config = {
            series: [{
                data: [1,2,3]
            }]
        };

        if(this.seriesData().length){
            this.updateChart()
        }

        return (
            <ReactHighcharts config={config} ref="chart"></ReactHighcharts>
        )
    }
}

Answer 1

我想我找到了问题所在。这是用于渲染图表的这个包：

renderChart: function (config){
  if (!config) {
    throw new Error('Config must be specified for the ' + displayName + ' component');
  }
  let chartConfig = config.chart;
  this.chart = new Highcharts[chartType]({
    ...config,
    chart: {
      ...chartConfig,
      renderTo: this.refs.chart
    }
  }, this.props.callback);

  if (!this.props.neverReflow) {
    win.requestAnimationFrame && requestAnimationFrame(()=>{
      this.chart && this.chart.options && this.chart.reflow();
    });
  }
},

shouldComponentUpdate(nextProps) {
  if (nextProps.neverReflow || (nextProps.isPureConfig && this.props.config === nextProps.config)) {
    return true;
  }
  this.renderChart(nextProps.config);
  return false;
},

getChart: function (){
  if (!this.chart) {
    throw new Error('getChart() should not be called before the component is mounted');
  }
  return this.chart;
},

componentDidMount: function (){
  this.renderChart(this.props.config);
},

参考：https://github.com/kirjs/react-highcharts/blob/master/src/chartsFactory.jsx#L22-L59

如您所见，每次需要绘制/更新图表时，包都会创建一个新图表并将其放置在屏幕上。在您的代码中，您在渲染函数中使用了更新图表函数，所以会发生这种情况：

• 第一次渲染：图表，称为chart1，正常渲染，因为if语句if false
• 第二次渲染：如果为真，则执行内部代码，chart1 被更新。但它并不止于此，React 继续渲染，ReactHighCharts 使用旧配置创建一个新图表实例 (chart2) 并将其放置在此屏幕上。这个chart2 替换了chart1，因此您永远不会看到更新后的图表。