2

私のコードでは、 Mongodb コレクションから取得したライブ データを使用してグラフを描画するためにultimatejs:tracker-reactとを使用しています。react-highcharts簡単にするために、autopublishパッケージを有効にします。

問題:ハイチャートの初期データ シリーズを設定した後、chart.series[0].setData([5,4,3,2,1])シリーズを更新しますが、新しいデータがチャートに描画されません。チャートには、Highcharts が初期化された最初の 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>
        )
    }
}
4

1 に答える 1

0

私は問題を理解していると思います。これは、チャートをレンダリングするために使用するこのパッケージです。

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

ご覧のとおり、チャートを描画/更新する必要があるたびに、パッケージは新しいチャートを作成して画面に配置します。コードでは、render 関数で update chart 関数を使用しているため、次のようになります。

  • 最初のレンダリング: chart1if ステートメントが false の場合、グラフは this と呼ばれ、通常どおりレンダリングされます。
  • 2 番目のレンダリング: true の場合、内部のコードが実行され、chart1更新されます。しかし、そこで止まらず、React はレンダリングを続け、ReactHighChartschart2は古い構成で新しいチャート インスタンス ( ) を作成し、この画面に配置します。これは をchart2置き換えるchart1ため、更新されたグラフは表示されません。
于 2016-12-01T10:48:48.927 に答える