使用React js创建一个可以读取.csv文件并在chartjs中显示的网站

Question

我尝试这样做，但不断收到此错误“错误：画布已在使用中。必须先销毁 ID 为“0”的图表，然后才能重新使用画布。”，即使我使用了 destroy 也不起作用。

我尝试使用react.js读取.csv文件并使用chart.js显示。

import React from 'react'
import { Chart } from 'react-chartjs-2'
import * as d3 from 'd3'
//import { csv } from 'd3'

const BarChart1 = () => {
  let myChart;
    let filename = 'drug-abusers-by-gender.csv';
    d3.csv(filename, function(loadedData) {
        //console.log(loadedData);

        let data = [];
        let labels = [];

        for (let i=1; i < loadedData.length; i++) {
            console.log(loadedData[i]);

            let year = loadedData[i].year;
            labels.push(year);

            let num = loadedData[i].no_of_drug_abusers;
            data.push(num);
            //console.log(num);
        }

        let options = {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    fill: false,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    borderColor: 'rgb(100,100,100)'
                }]
            }
        };

        //myChart = new Chart(document.getElementById('BarChart1'), options);
    })

    return (
        <canvas id="BarChart1" ></canvas>
      );
}

export default BarChart1

Answer 1

我也遇到过这个问题。首先，我升级到了 Chart.js 的最新版本，这并没有修复它，但它确实提供了“remove()”函数来删除画布。

我所做的就是首先删除画布：

<div id="fullReport1">
    <canvas id="myChart1"></canvas>
</div>

然后像这样创建一个新的画布，并使用 jQuery 将其附加到我有画布的 div 中：

var old_canvas = $('#myChart1');
if(old_canvas) old_canvas.remove();

var newCanvas = $('<canvas/>',{
                   'class':'chart1',
                    id: 'myChart1'                   
                });
$('#fullReport1').append(newCanvas);

之后，我创建图表并填充画布。

（我不太记得在哪里找到了这个解决方案，所以这里的其他人值得称赞，因为我认为我确实在 stackoverflow 上找到了它）