chart.js 中多个图表上的工具提示显示错误的值答案

【问题标题】：Tooltips on multiple charts in chart.js showing the wrong valueschart.js 中多个图表上的工具提示显示错误的值
【发布时间】：2017-05-05 17:13:01
【问题描述】：

我正在使用最新的 Chart.bundle.js 在同一页面上创建多个堆叠条形图。例如，我有 3 个图表和 2 个数据集。图表是正确的，但每个图表上的工具提示始终相同并且显示错误的值。 screenshot link。所有的值都为零，这显然是错误的。

Tooltips模式为index，每个图表的canvas有不同的id，dataset变量都不同。

【问题讨论】：

您需要分享您的代码以获得更多说明.....

标签： javascript charts chart.js

【解决方案1】：

尝试在 jsfiddle 上发布我的代码，我能够找到解决这个非常奇怪的问题的方法。我有

     var barCharData = {
                    labels: ["2", "3", "4"],
                    datasets: []
                };

，所以一开始我的任何图表中都没有数据（在从数据库获取数据之前）。对于我拥有的每张图表，我都做了这样的事情：

 for(var i=1; i <= number_of_charts; i++){
        bar_char_data_array.push(barChartData);
        var myBar = new Chart(ctx, {
                    type: 'bar',
                    data: bar_char_data_array[i-1],
                    options: {
                        tooltips: {
                            mode: 'label',
                            intersect: true
                        }
                    }
                });
}

事实证明，javascript 将数组“bar_char_data_array”的每个元素都视为同一个对象，并且更改其中一个图表的数据会导致所有其他图表的数据发生更改。在悬停查看工具提示之前，我仍然不知道为什么所有图表都是正确的。尽管如此，我的问题的解决方案是删除 barChartData 变量。

 for(var i=1; i <= number_of_charts; i++){
        bar_char_data_array.push({
            labels: ["2", "3", "4"],
            datasets: []
        });
        var myBar = new Chart(ctx, {
                    type: 'bar',
                    data: bar_char_data_array[i-1],
                    options: {
                        tooltips: {
                            mode: 'label',
                            intersect: true
                        }
                    }
                });
}

【讨论】：

【解决方案2】：

我的解决方案有点类似于@queen-juliet 的回答。

我有一个共享配置变量，其中数据键在循环中添加和更新。尽管我在页面上拥有的多个 chart.js 对象显示了正确的数据，但工具提示仅显示在一个（随机）图表上。解决方案是在我的循环中声明并填充整个配置。

【讨论】：