React-Highcharts не перерисовывает диаграмму

Question

В моем коде используются ultimatejs:tracker-react и react-highcharts, чтобы нарисовать диаграмму с использованием живых данных, извлеченных из коллекции Mongodb. Для простоты включен пакет autopublish.

Задача: После установки начальной серии данных для Highcharts chart.series[0].setData([5,4,3,2,1]) обновляет серию, но новые данные не отображаются на диаграмме. Диаграмма по-прежнему показывает начальные 3 балла. Первоначальные диаграммы были инициализированы.

Как мы можем получить новые значения 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 is true, код внутри выполняется, chart1 обновлен. Но это не останавливается на достигнутом, React сохраняет рендеринг, ReactHighCharts создает новый экземпляр диаграммы (chart2) со старой конфигурацией и помещает его на этот экран. Это chart2 заменяет chart1, поэтому вы никогда не увидите обновленную диаграмму.