chart.jsの複数のチャートのツールチップが間違った値を表示

Question

最新のChart.bundle.jsを使用して、同じページに複数の積み重なった棒グラフを作成しています。たとえば、私は2つのデータセットで3つのチャートを持っています。グラフは正しいが、各グラフのツールチップは常に同じで、間違った値を示している。 screenshot link。すべての値はゼロですが、明らかに間違っています。

ツールチップモードはインデックスであり、各グラフのキャンバスには異なるIDがあり、データセット変数はすべて異なります。

Answer 1

私のコードをjsfiddleに投稿しようとすると、この非常に奇妙な問題の解決策を見つけることができました。私は

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

を持っていたので（データベースからデータを取得する前に）最初に私のチャートのいずれかにデータがありません。私はこのようなものでした持っているすべてのチャートについて：それはjavascriptのは、アレイ「bar_char_data_array」のすべての要素が同じオブジェクトであると考えることが判明し、チャートのいずれかのデータを変更

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

のすべてのデータを変更することになりました残り。私はまだ、ツールチップを見るためにぶら下げられるまで、すべてのチャートが正しい理由を知らない。それにもかかわらず、私の問題の解決策は、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

私の解決策は、@クイーン - ジュリエットの回答に多少似ていました。

私はループ内でデータキーを追加して更新する共有設定変数を持っていました。私がページ上に持っていた複数のchart.jsオブジェクトが正しいデータを表示していたにもかかわらず、ツールチップは1つの（ランダムな）チャートのみで表示されていました。解決策は宣言し、ループ全体の中に全体の設定を埋めることでした。