React Chartjs-更新间隔图表 [英] React Chartjs - Update Chart on interval

问题描述

我正在尝试构建一个可视化显示不同排序算法的应用程序.我正在使用react和react-chartjs-2.渲染和更新工作正常，我对数据进行混洗没有问题，然后在算法运行完成后更新图表.

I am trying to build an application that visually displays different sorting algorithms. I am using react and react-chartjs-2. The render and update work perfectly and I have no problem shuffling the data, then update the chart AFTER the algorithm is done running.

但是，我似乎无法在排序过程中对其进行更新.每当交换发生时，我都在尝试更新状态.

However, I can't seem to update it during the sorting. I am trying to update state whenever a swap occurs.

import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';

export default class BarChart extends Component {
      constructor(props) {
        super(props);
        this.state = {
            data: {
                labels: this.createLabels(),
                datasets: [
                    {
                        label: 'Bubble Sort',
                        data: this.createData(),
                        backgroundColor: this.createBg()
                    }
                ]
            }
        }
    }

    createData() {
        const data = [];
        for (let i = 0; i < 10; i++) {
            data[i] = Math.floor(Math.random() * 1000) + 1;
        }

        return data;
    }

    createLabels() {
        const labels = [];
        for (let i = 0; i < 10; i++) {
            labels[i] = `Label ${i}`;
        }

        return labels;
    }

    createBg() {
        const colors = [];
        for (let i = 0; i < 10; i++) {
            // generate colors
            const red = Math.floor(Math.random() * 255) + 1;
            const green = Math.floor(Math.random() * 255) + 1;
            const blue = Math.floor(Math.random() * 255) + 1;
            colors[i] = `rgba(${red}, ${green}, ${blue}, 0.5)`;
        }

        return colors;
    }

    update() {
        // create copy of dataset
        const datasetsCopy = this.state.data.datasets.slice(0);
        const dataCopy = datasetsCopy[0].data.slice(0);

        // update chartdata with random values
        for (let i = 0; i < dataCopy.length; i++) {
            dataCopy[i] = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
        }

        // set copied updated dataset
        datasetsCopy[0].data = dataCopy;

        // update data state of chart
        this.setState({
            data: Object.assign({}, this.state.data, {
                datasets: datasetsCopy
            })
        });
    }

    componentDidMount() {
        setTimeout(() => {
            this.bubbleSort();
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    bubbleSort() {

        // create copy of dataset
        const datasetsCopy = this.state.data.datasets.slice(0);
        const dataCopy = datasetsCopy[0].data.slice(0);

        // update chartdata with random values
        let temp1 = 0;
        let temp2 = 0;
        let timer = 100;
        for (let i = 0; i < dataCopy.length - 1; i++) {
            for (let j = 0; j < dataCopy.length - i - 1; j++) {
                if (dataCopy[j] > dataCopy[j + 1]) {
                    timer += 100;
                    this.timer = setTimeout(
                        () => {

                            temp1 = dataCopy[j];
                            temp2 = dataCopy[j + 1];

                            // swap
                            dataCopy[j] = temp2;
                            dataCopy[j + 1] = temp1;

                            // set copied updated dataset
                            datasetsCopy[0].data = dataCopy;

                            // update data state of chart
                            this.setState({
                                data: Object.assign({}, this.state.data, {
                                    datasets: datasetsCopy
                                })
                            });
                        }
                        , timer
                    )
                }
            }
        }
    }

    render() {

        return (
            <div>
                <Bar
                    data={this.state.data}
                    width={100}
                    height={500}
                    options={{
                        maintainAspectRatio: false
                    }}
                />
            </div>
        )
    }
}

推荐答案

我对React不太了解，但我知道 react-chartjs-2 是.直接使用Chart.js时，更新图表的首选方法是在图表数据或其选项更改后调用 chart.update().

I don't know much about React but I know that react-chartjs-2 is a wrapper for Chart.js. When using Chart.js directly, the preferred method to update a chart is to invoke chart.update() once the chart data or its options have changed.

因此，在您的代码中，每次您想要在其 canvas 上重新绘制图表时，都可以执行相同的操作.

Therefore, in your code, your could do the same each time you want the chart be re-drawn on its canvas.

为此，您首先需要获得对Chart.js实例的引用，如

To do so, you first need to obtain a reference to the Chart.js instance as explained here.

constructor() {
  ... 
  this.chartReference = React.createRef(); 
  ...
}

componentDidMount() {
  this.chart = this.chartReference.current.chartInstance;
  ...
}

render() {
  return (
    <Bar
      ref={this.chartReference}
      ...
    />
  );
}

您的 bubbleSort 方法随后可以拆分为以下单独的方法，并且应该可以按预期工作.

Your bubbleSort method could then be split into the following separate methods and it should work as expected.

bubbleSort() {
  let data = this.chart.data.datasets[0].data;
  let swapped;
  let timeout = 0;
  do {
    swapped = false;
    for (let i = 0; i < data.length; i++) {
      if (data[i] > data[i + 1]) {
        let tmp = data[i];
        data[i] = data[i + 1];
        data[i + 1] = tmp;
        timeout += 100;
        this.updateChartDelayed(data.slice(0), timeout);
        swapped = true;
      }
    }
  } while (swapped);
}

updateChartDelayed(data, timeout) {
  this.timer = setTimeout(() => {
    this.chart.data.datasets[0].data = data;
    this.chart.update();
  }, timeout);
}

请查看以下 StackBlitz ，并查看其工作原理.

Please take a look at this StackBlitz and see how it works.

这篇关于React Chartjs-更新间隔图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！