web-dev-qa-db-ja.com

react-chartjs-2でチャートを更新する方法は？

Update（）関数を呼び出しましたが、機能しません。

TypeError：line.updateは関数ではありません。

Update（）が関数ではないのはなぜですか？

私はこの例を http://jsfiddle.net/zpnx8ppb/26/ で見ました。ここで更新関数は機能します

これが私のコードです：

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';

const line = {
    labels: [],
    datasets: [
       {
          label: 'My First dataset',
          fill: false,
          data: []
       }
    ]
};

setInterval(function(){
    line.labels.Push(Math.floor(Math.random() * 100));
    line.datasets[0].data.Push(Math.floor(Math.random() * 100));
    line.update();
}, 5000);

class LineChart extends Component {
    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state}
                    height={5}
                    width={20}
                />
            </div>          
        )
    }
}

export default LineChart;
javascriptreactjsreact-chartjs
6
user8562024

チャートを更新する必要があります。線はチャートの構成設定にすぎません。この更新はハンドラーに戻る必要があります。

あなたを正しい道に導くために、これが私が意味することの例です

var config = {};

class Chart extends Component {
    constructor() {
        super();
        this.ctx = document.getElementById(this._rootNodeID).getContext("2d");
        this.chart = new Chart(ctx, config);

    }


    changeHandler(value) {
        this.chart.update();
    }

    render() {
        return (
            <canvas id={this._rootNodeID}>
                <LineChart value={this.state.value} 
                           config={this.config} 
                           onChange={this.changeHandler}/>
            </canvas>
        );
    }
}


const line = {
    labels: [],
    datasets: [
        {
            label: 'My First dataset',
            fill: false,
            data: []
        }
    ]
};



class LineChart extends Component {

    constructor(props) {
        super(props);

        this.props.config = line;
        setInterval(function(){
            this.props.config.labels.Push(Math.floor(Math.random() * 100));
            this.props.config.datasets[0].data.Push(Math.floor(Math.random() * 100));
            this.props.changeHandler();
        }, 5000);

    }


    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state}
                    height={5}
                    width={20}
                />
            </div>
        )
    }
}

export default Chart;
export default LineChart;
0
DarkMukke

したがって、 https://www.npmjs.com/package/react-chartjs-2 によると

次のような参照を使用してチャート参照にアクセスできます。

chartReference = {};

componentDidMount() {
  console.log(this.chartReference); // returns a Chart.js instance reference
}

render() {
  return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />)
}

したがって、あなたができることは、チャートに参照を入れて、好きな場所にアクセスすることです。

<Line
     data={this.state}
     height={5}
     width={20}
     ref = {(reference) => this.reference = reference}
/>

更新を発生させたいメソッドでは、この参照とそのchartInstanceにアクセスして、このインスタンスで更新関数を呼び出すことができます。

let lineChart = this.reference.chartInstance
lineChart.update();
4
Dhruv Verma

SetIntervalを使用せず、チャートのインスタンスをディスパッチャなどにパスして、リクエストが完了したら更新することをお勧めします

   ChartJS.data = response.data;
   ChartJS.update();
0
dmitri