如何更新react-chartjs-2中的圖表？

我調用update（）函數，但它不起作用。如何更新react-chartjs-2中的圖表？

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;

來源

2017-09-05 Distoration

您嘗試更新的行是一個對象。爲'Line'組件設置ref並嘗試更新那個ref。（這只是一個猜測，因爲我從來沒有用過react-chartjs） – bennygenel

'const line = {' - >'line.update（）'你自己創建的lin對象中沒有函數定義的更新 – DarkMukke

您需要更新圖表，線只是圖上的配置設置，此更新需要流回處理

要設置您在正確的道路上，這裏是我的意思

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;

爲例

來源

2017-09-05 11:24:17 DarkMukke

如何更新react-chartjs-2中的圖表？

回答

相關問題