点击按钮更新Chart.js饼图数据失败，求修正方案（附代码）

我帮你排查出按钮功能失效的两个核心问题，现在给你修正后的代码和详细说明：

问题根源 #

1. 数据集访问路径错误：myPieChart.data.datasets是一个数组（支持多数据集图表），你需要通过索引[0]定位到具体的数据集，而不是直接写datasets.data。
2. 缺少图表更新触发：修改数据后，必须调用myPieChart.update()方法，通知Chart.js重新渲染图表，否则数据变化不会反映到视图上。

修正后的完整代码 #

HTML部分（保持不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<table id='myTable'>
 <thead>
 <tr>
 <th>Name</th>
 <th>1st data</th>
 <th>2nd data</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>Item 1</th>
 <td>337</td>
 <td>411</td>
 </tr>
 <tr>
 <th>Item 2</th>
 <td>290</td>
 <td>110</td>
 </tr>
 <tr>
 <th>Item 3</th>
 <td>197</td>
 <td>800</td>
 </tr>
 <tr>
 <th>Item 4</th>
 <td>765</td>
 <td>211</td>
 </tr>
 <tr>
 <th>Item 5</th>
 <td>331</td>
 <td>451</td>
 </tr>
 <tr>
 <th>Item 6</th>
 <td>957</td>
 <td>871</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <th>Total</th>
 <td id='curPop'>2877</td>
 <td>2854</td>
 </tr>
 </tfoot>
</table>
<canvas id='pieChart'></canvas>
<button id="btn1"> Data 1 </button>
<button id="btn2"> Data 2 </button>

JavaScript部分（已修正） #

var canvasP = document.getElementById("pieChart");
var table = document.getElementById("myTable");
var nameArr = [];
var data1Arr = [];
var data2Arr = [];
var tableLen = table.rows.length;
var i;

// 从表格提取数据，优化：把字符串转成数字，Chart.js处理数字更稳定
for (i = 1; i < tableLen; i++) {
 nameArr.push(table.rows[i].cells[0].textContent);
 data1Arr.push(Number(table.rows[i].cells[1].innerHTML));
 data2Arr.push(Number(table.rows[i].cells[2].innerHTML));
}
// 移除最后一行合计行的数据
nameArr.pop();
data1Arr.pop();
data2Arr.pop();

var ctxP = canvasP.getContext("2d");
var myPieChart = new Chart(ctxP, {
 type: "pie",
 data: {
 labels: nameArr,
 datasets: [{
 data: data1Arr,
 backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1", "#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
 label: "Data"
 }]
 },
 options: {
 legend: {
 display: true,
 position: "right"
 },
 title: {
 display: true,
 text: "Data 1"
 }
 }
});

// 修正后的按钮点击事件
document.getElementById("btn1").addEventListener("click", function() {
 // 正确访问第一个数据集
 myPieChart.data.datasets[0].data = data1Arr;
 // 更新图表标题，提升用户体验
 myPieChart.options.title.text = "Data 1";
 // 触发图表重新渲染
 myPieChart.update();
});

document.getElementById("btn2").addEventListener("click", function() {
 myPieChart.data.datasets[0].data = data2Arr;
 myPieChart.options.title.text = "Data 2";
 myPieChart.update();
});

额外优化说明 #

• 我把提取数据时的innerHTML转成了数字类型（Number()），避免字符串类型可能导致的Chart.js渲染异常。
• 同步更新了图表标题，让用户能直观看到当前展示的是哪组数据，提升交互体验。

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