Question

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

工具提示模式是索引，每个图表的画布都有不同的id，数据集变量都是不同的。

Answer 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
                        }
                    }
                });
}

Answer 2

我的解决方案与@ queen-juliet的答案有些相似。

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

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

2 个答案: