Chart.js v4.4调用update()失败，如何切换数据集并更新图表？

你遇到的问题核心是对Chart实例的操作逻辑错误，以下是问题拆解和修正方案：

问题点分析 #

• 混淆了Canvas元素和Chart实例：ctx是你获取的canvas DOM元素，不是创建出来的Chart对象，所以调用ctx.update()会报错“update is not a function”，只有Chart实例才拥有update()方法。
• 错误操作DOM的dataset属性：ctx.dataset是canvas元素的自定义数据属性，和Chart的数据集完全无关，修改它不会影响图表数据。
• 数组引用比较无效：数组是引用类型，直接用==比较两个数组永远不会成立（除非指向同一个内存地址），应该用你定义的currentSelection变量跟踪当前数据集。

修正后的完整代码 #

HTML（保持不变）

<button onclick="myFunction()">Click Me</button>
<canvas id="myChart"></canvas>

JS

// 假设你已定义以下数据源
const DataArray = [10, 20, 30, 40];
const NewDataArray = [40, 30, 20, 10];
const NumberArr = ['A', 'B', 'C', 'D'];

let currentSelection = DataArray;
const ctx = document.getElementById('myChart');

// 保存Chart实例到变量，后续操作都基于这个实例
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: NumberArr,
        datasets: [{
            label: 'My Chart',
            data: currentSelection,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: false
            },
            x: {
                display: false
            }
        }
    }
});

function myFunction() {
    // 通过currentSelection判断当前数据集
    if (currentSelection === DataArray) {
        currentSelection = NewDataArray;
        myChart.data.datasets[0].data = NewDataArray;
        console.log('切换到NewDataArray', myChart.data.datasets[0].data);
    } else {
        currentSelection = DataArray;
        myChart.data.datasets[0].data = DataArray;
        console.log('切换到DataArray', myChart.data.datasets[0].data);
    }
    // 调用Chart实例的update方法触发图表重绘
    myChart.update();
}

关键说明 #

1. 必须将new Chart()的返回值保存为变量（比如myChart），这个变量才是Chart的实例，拥有update()等核心方法。
2. 修改图表数据时，直接操作myChart.data下的对应属性，修改完成后调用myChart.update()即可触发图表更新。
3. 用currentSelection变量跟踪当前使用的数据集，利用引用类型的特性，通过===判断变量指向的数组是否一致，逻辑有效。

内容的提问来源于stack exchange，提问作者Bean0341