使用不同大小的数据集更新 chart.js 不起作用

Question

我有一个条形图，我正在这样设置：

const BarChart = {
    chart: null,
    init(data, labels) {
        const canvas = document.getElementById("canvas").getContext("2d");
        const options =  {...defaultOptions};
        options.data.labels = labels;
        options.data.datasets[0].data = data;
        this.chart = new Chart(canvas, options);
    }
};

const defaultOptions = {
    type: "bar",
    data: {
        datasets: [
            {
                backgroundColor: "#006BE8",
                borderColor: "rgba(151,187,205,1)",
                barPercentage: 0.9,
                categoryPercentage: 0.9,
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        fontColor: '#736B8A',
                        beginAtZero: true,
                        stepSize: 100
                    },
                    gridLines: {
                        display: false
                    }
                }
            ],
            xAxes: [
                {
                    ticks: {
                        fontColor: '#736B8A'
                    },
                    gridLines: {
                        display: false
                    }
                }
            ]
        }
    }
}

我正在像这样启动条形图：

BarChart.init(getData(selectedRegionID), getLabels());

初始数据是 40 个元素的长整数数组。 这很好用，但是当我尝试像这样更新图表时：

BarChart.chart.data.labels = monthsShortString;
BarChart.chart.data.datasets[0].data = OvernightsByMonth;
BarChart.chart.update();

monthsShortString 是一个数组：

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

而OvernightsByMonth 是一个整数数组：

[552246, 608557, 1010465, 2929136, 4733930, 12609027, 25256705, 27455440, 10560193, 3215752, 939206, 826070]

我明白了：

main.da4909e4.js:2238 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at computeLabelSizes (main.da4909e4.js:25313)
    at ChartElement._getLabelSizes (main.da4909e4.js:25982)
    at ChartElement.fit (main.da4909e4.js:25827)
    at ChartElement.update (main.da4909e4.js:25622)
    at fitBoxes (main.da4909e4.js:21198)
    at Object.update (main.da4909e4.js:21409)
    at Chart.updateLayout (main.da4909e4.js:23751)
    at Chart.update (main.da4909e4.js:23704)
    at tourismBarChart (main.da4909e4.js:30529)
    at renderBarChart (main.da4909e4.js:30508)

我可以看到标签和数据集的值已更新，但我仍然收到该错误。

我什至尝试在图表对象上使用destroy方法并在此之后创建一个新的图表对象：

BarChart.chart.destroy();
BarChart.init(OvernightsByMonth, monthsShortString);

但是，然后我得到：

未捕获（承诺中）RangeError：超出最大调用堆栈大小

at computeLabelSizes (main.da4909e4.js:25363)
at ChartElement._getLabelSizes (main.da4909e4.js:26032)
at ChartElement.fit (main.da4909e4.js:25877)
at ChartElement.update (main.da4909e4.js:25672)
at fitBoxes (main.da4909e4.js:21248)
at Object.update (main.da4909e4.js:21459)
at Chart.updateLayout (main.da4909e4.js:23801)
at Chart.update (main.da4909e4.js:23754)
at Chart.construct (main.da4909e4.js:23478)
at new Chart (main.da4909e4.js:23415)

我什至尝试过移除画布：

BarChart.chart.destroy();
document.getElementById('canvas').remove(); 
const canvas = document.createElement('canvas'); 
canvas.setAttribute('id','canvas'); 
document.querySelector('.chart-legend').insertAdjacentElement('afterend', canvas);
BarChart.init(OvernightsByMonth, monthsShortString);

但是，如果我使用相同类型的数据集更新图表，只是值不同，但数据长度相同，那么它可以正常工作。

BarChart.chart.data.labels = getLabels();
BarChart.chart.data.datasets[0].data = getData(selectedRegionID);
BarChart.chart.update();

我在这里做错了什么，我应该如何用新数据更新条形图？

Answer 1

问题在于新数据集中的值要大得多，因此图表无法计算当前stepSize 的大小。当我改变它时，它工作正常：

BarChart.chart.options.scales.yAxes[0].ticks.stepSize = 500000;