页面中有多个图表 js，但具有相同的工具提示（关于最后一个图表）答案

【问题标题】：multiple charts js in page but with same tooltips (about last chart)页面中有多个图表 js，但具有相同的工具提示（关于最后一个图表）
【发布时间】：2023-03-11 19:45:02
【问题描述】：

我在一页中有更多的圆环图，每个图表都有不同的数据，但我显示相同的工具提示。这是最后一张图表的工具提示。我没发现问题。

这是js代码：

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

    // ------------------
    // Doughnut loop...
    // ------------------
    var dataDoughnutChart = {

        labels: [
            'KO',
            'OK'
        ],
        datasets: [{
            data: [30,70],
            backgroundColor: [
                '#DF0101',  // red
                '#31B404'   // green
            ]
        }]
    };        
    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");
        dataDoughnutChart.labels[0] = 'Errati' + labelAdd;
        dataDoughnutChart.labels[1] = 'Esatti' + labelAdd;
        dataDoughnutChart.datasets[0].data[0] = errati;
        dataDoughnutChart.datasets[0].data[1] = esatti;

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

    }

如果我有两个圆环图，在第一个图表 datasets.data = [10,90] 和第二个图表 datasets.data = [2,98] 中，所有两个图表的工具提示都显示“Errati” ：2'和'Esatti：98'。它的值类似于第二张图表。

我也尝试为 var dataDoughnutChart 使用数组，例如：

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

但不解决。感谢您的帮助。

【问题讨论】：

您是否尝试过使用const 和let 在for 循环内声明变量以避免提升问题？这样，每个变量都会有一个单独的绑定，并且不会被重新分配
我发现了一个问题：我通过引用传递了对象，而不是所有圆环图的最后分配值都相同。我通过创建一个配置数组来解决，如下所示：
window.myDoughnut = new Chart(ctxDoughnut, configDoughnutList[i]);
所有 configDougnutList[i] 都是一个新对象。

标签： javascript tooltip chart.js

【解决方案1】：

解决如下： // .....

configDoughnutList.push(
                {
                    type: 'doughnut',
                    data: {
                        datasets: [{
                            data: [
                                    30,
                                    70
                            ],
                            backgroundColor: [
                                '#DF0101',  // rosso
                                '#31B404'   // verde
                            ],
                            label: 'daughnut_163'
                        }],
                        labels: [
                                'Errati',
                                'Corretti'
                        ]
                    },
                    options: {
                        responsive: true,
                        legend: {
                                display: false
                        },
                        animation: {
                                animateScale: true,
                                animateRotate: true
                        },
                        tooltips: {             
                            mode: 'dataset'
                        }
                    }
                }
        );
        configDoughnutList[i].data.datasets[0].data[0] = errati;
        configDoughnutList[i].data.datasets[0].data[1] = esatti;
        configDoughnutList[i].data.labels[0] = 'Errati' + labelAdd;
        configDoughnutList[i].data.labels[1] = 'Esatti' + labelAdd;

        window.myDoughnut = new Chart(ctxDoughnut, configDoughnutList[i]);

【讨论】：