如何销毁图表对象以动态更改图表数据（Chart.js）？

Question

我在 中显示一组图表，

for ($i = 0; $i < count($eval_list); $i++) {
   echo '<canvas class="evaluator_chart"></canvas>';
}

并尝试通过单击链接动态更改其内容/数据。
我无法正确销毁图表对象。要么显示所有图表但数据未更改，要么数据更改但未显示所有图表（请参阅下面的示例）。

    const myCanvas = document.querySelectorAll('.evaluator_chart');

    for (let i = 0; i < myCanvas.length; i++) {
        // split chart data by individual charts
        const data   = [];
        const labels = [];
        for (let x = i; x < by_eval_values.length; x+= myCanvas.length) {
            labels.push(by_eval_labels[x]);
            data.push(by_eval_values[x]);
        }
        const dataByEval = {
           ...
        };

        // destroy previous chart object
        if (window.byEval) window.byEval.destroy();

        // create chart object
        let ctx = myCanvas[i].getContext('2d');
        window.byEval = new Chart(
            ctx, {
            type: 'bar',
            data: dataByEval,
            options: options
        });
    }

不确定整个结构是否正确。预先感谢您的提示。

Answer 1

已解决 - 销毁部分在循环之前移动并立即销毁那里的所有对象