单页多Doughnut图表Tooltip异常：均显示最后一个图表的提示框

嘿，这问题我太熟啦！你碰到的是JavaScript引用类型的经典坑——所有的Doughnut图表都共用了同一个dataDoughnutChart对象，导致最后所有Tooltip都显示最后一次循环的数据。

问题根源 #

在你的代码里，dataDoughnutChart是在循环外面定义的，每次循环你只是修改这个对象的属性值，但并没有创建新的对象。因为对象是引用类型，所有图表实例都会指向同一个内存地址的对象。当循环结束时，这个对象里保存的是最后一次循环修改的数据，所以所有图表的Tooltip都会读取这个最终状态。

修复方案 #

把数据对象的创建逻辑移到循环内部，让每个图表都拥有自己独立的数据副本，这样就不会互相干扰了。修改后的代码如下：

var idList = [];
jQuery('.idKQI').each(function (i) {
 idList.push( jQuery(this).text() );
});
var idListLength = idList.length;

// 配置项可以复用，因为循环中没有修改它的属性
var optionsDoughnutChart = {
 maintainAspectRatio: false,
 responsive: true,
 legend: {
 display: false
 },
 tooltips: {
 mode: 'dataset'
 }
};

var idLav;
var ctxDoughnut;
var labelAdd;
var errati;
var esatti;

for (var i = 0, max = idListLength; i < max; i++) {
 idLav = '#' + idList[i] + "_chartDoughnut";
 ctxDoughnut = jQuery(idLav);
 labelAdd = jQuery(idLav).data("labeladd");
 errati = jQuery(idLav).data("errati");
 esatti = jQuery(idLav).data("esatti");

 // 关键：每次循环都创建全新的data对象，确保每个图表有独立数据
 var dataDoughnutChart = {
 labels: [ 'Errati' + labelAdd, 'Esatti' + labelAdd ],
 datasets: [{
 data: [errati, esatti],
 backgroundColor: [
 '#DF0101', // red
 '#31B404' // green
 ]
 }]
 };

 var myDoughnutChart = new Chart(ctxDoughnut, {
 type: 'doughnut',
 data: dataDoughnutChart,
 options: optionsDoughnutChart
 });
}

效果说明 #

修改后，每个图表实例都会绑定自己专属的dataDoughnutChart对象，循环结束后每个对象的状态都是对应图表的原始数据，Tooltip就能正确显示对应图表的内容啦——比如你说的两个图表，第一个会显示[10,90]，第二个显示[2,98]，不会再串数据了。

内容的提问来源于stack exchange，提问作者Giorgio A.