Javascript React Highcharts不会重新绘制图表

我的代码使用

ultimatejs:tracker react

和

react highcharts

使用从Mongodb集合中提取的实时数据绘制图表。为简单起见，启用了

autopublish

package

问题：设置Highcharts的初始数据系列后，

chart.series[0]。setData（[5,4,3,2,1]）

更新系列，但新数据不会绘制在图表上。图表仍然显示Highcharts初始化时使用的初始3点

如何在highcharts图表上绘制新的

系列

值

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

import React，{Component，PropTypes}来自'React'；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“react highcharts”导入react highcharts；
从“../api/Pressure.js”导入{Pressure}；
导出类PressureChart扩展TrackerResact（组件）{
//返回Highcharts系列格式的数据
seriesData（）{
const result=Pressure.find（）.fetch（）；
压力=拔出（结果为“压力”）；
压力=压力图（p=>数字（p））
时间=uu.pull（结果为'timestamp'）；
系列=uzip（时间、压力）；
回油压力
}
updateChart（）{
让chart=this.refs.chart.getChart（）
console.log（chart.series[0].data）//返回一个包含3个元素的数组
chart.series[0].setData（[5,4,3,2,1]）//使用此数组而不是从集合中提取的数组进行测试
console.log（chart.series[0].data）//返回一个包含5个元素的数组
}
render（）{
常量配置={
系列：[{
数据：[1,2,3]
}]
};
if（this.seriesData（）.length）{
this.updateChart（）
}
返回(
)
}
}

我想我找到了问题所在。此软件包用于呈现图表：

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

参考：

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

• 第一次呈现：该图表称为

  chart1

  ，通常呈现，因为if语句if false
• 第二次渲染：如果为true，则执行内部代码，

  chart1

  将更新。但它并没有停止，React继续渲染，React HighCharts使用旧配置创建一个新的图表实例（

  chart2

  ），并将其放置在此屏幕上。此

  chart2

  将替换

  chart1

  ，因此您永远看不到更新的图表

---

我想我已经解决了这个问题。此软件包用于呈现图表：

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

参考：
如您所见，每次需要绘制/更新图表时，软件包都会创建一个新图表并将其放置在屏幕上。在代码中，在渲染函数中使用“更新图表”函数，因此会发生以下情况：
• 第一次呈现：该图表称为

  chart1

  ，通常呈现，因为if语句if false
• 第二次渲染：如果为true，则执行内部代码，

  chart1

  将更新。但它并没有停止，React继续渲染，React HighCharts使用旧配置创建一个新的图表实例（

  chart2

  ），并将其放置在此屏幕上。此

  chart2

  将替换

  chart1

  ，因此您永远看不到更新的图表

---

您是否尝试显式调用

chart.redraw（）

？@Khang是的，我在

.setData（）之后立即调用了
chart.redraw（）
。这并没有重新绘制图表。奇怪……你是否尝试显式调用
chart.redraw（）
？@Khang是的，我在
.setData（）
之后调用了
chart.redraw（）
。这并没有重新绘制图表。奇怪……感谢您发现问题！这是一个bug还是一个特性？在我看来，它更像是一个bug。他们的示例显示使用
chart.series[0].addPoint（{x:10，y:12}）以添加点。如果每当在用于填充图表的Mongodb查询中发现新结果时都要更新图表，我们在React组件中的何处创建
光标。observeChanges
，我们是否在
组件中销毁此观察者WillUnmount
？我不确定您是否理解。您想知道如何在Mongodb中获取最新数据以填充图表吗？是的，没错。。。随着更多数据添加到mongodb，图表应该会继续更新。感谢您发现问题！这是一个bug还是一个特性？在我看来，它更像是一个bug。他们的示例显示使用
chart.series[0].addPoint（{x:10，y:12}）以添加点。如果每当在用于填充图表的Mongodb查询中发现新结果时都要更新图表，我们在React组件中的何处创建
光标。observeChanges
，我们是否在
组件中销毁此观察者WillUnmount
？我不确定您是否理解。您想知道如何在Mongodb中获取最新数据以填充图表吗？是的，没错。。。随着更多数据添加到mongodb，图表应该会继续更新。