chart.js中多個圖表上的工具提示顯示了錯誤的值

Question

我正在使用最新的Chart.bundle.js在同一頁面上創建多個堆疊的條形圖。 例如，我有3個圖表和2個數據集。 圖表是正確的，但是每個圖表上的工具提示始終相同，並且顯示錯誤的值。 屏幕截圖鏈接 。 所有值均為零，這顯然是錯誤的。

工具提示模式為索引，每個圖表的畫布具有不同的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對象顯示正確的數據，工具提示也只顯示在一個（隨機）圖表上。 解決方案是在循環中聲明並填充整個配置。