Question

我调用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;

Answer 1

所以根据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并在该实例上调用update函数。

let lineChart = this.reference.chartInstance
lineChart.update();

Answer 2

您需要更新图表，行只是图表上的配置设置，此更新需要流回处理程序

为了让你走上正确的道路，这是我的意思的一个例子

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;

Answer 3

我建议不要使用setInterval，尝试将图表实例粘贴到调度程序等，并在请求完成后进行更新

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

Answer 4

您可以在state中分配行数据，也可以通过设置setInterval来更新行数据。因此，每当您更改状态时，折线图都会更新。如果您不理解，请随时发表评论。

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';

const line = {
  labels: [],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      data: []
    }
  ]
};

export default class LineChart extends Component {
  state = {
    lineData: line
  }

  componentDidMount = () => {
    setInterval(() => {
      this.setState({
        lineData: {
          ...this.state.lineData,
          labels: [...this.state.lineData.labels, Math.floor(Math.random() * 100)],
          datasets: [{
            ...this.state.lineData.datasets[0],
            data: [...this.state.lineData.datasets[0].data, Math.floor(Math.random() * 100)]
          }]
        }
      })
    }, 1000);
  }

  render() {
    return (
      <div className="chart">
        <Line
          data={this.state.lineData}
          height={5}
          width={20}
        />
      </div>
    )
  }
}

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

4 个答案: