stackBar ChartJsの合計値の合計を取得する方法

Question

stackBarのすべての値の合計を取得し、この合計をツールチップに含めようとしています。

注：私のデータセットが静的ではありません、これは今totalは、データセットごとに合計であり、私はstackedBarあたりの合計を必要とする例

var barChartData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: 'Corporation 1', 
      backgroundColor: "rgba(220,220,220,0.5)", 
      data: [50, 40, 23, 45, 67, 78, 23] 
     }, { 
      label: 'Corporation 2', 
      backgroundColor: "rgba(151,187,205,0.5)", 
      data: [50, 40, 78, 23, 23, 45, 67] 
     }, { 
      label: 'Corporation 3', 
      backgroundColor: "rgba(151,187,205,0.5)", 
      data: [50, 67, 78, 23, 40, 23, 55] 
     }] 

    }; 

    window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      options: { 
       title:{ 
        display:true, 
        text:"Chart.js Bar Chart - Stacked" 
       }, 
       tooltips: { 
        mode: 'label', 
        callbacks: { 
         label: function(tooltipItem, data) { 
         var corporation = data.datasets[tooltipItem.datasetIndex].label; 
         var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
         var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+")); 
         return total+"--"+ corporation +": $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 
        } 
        } 
       }, 
       responsive: true, 
       scales: { 
        xAxes: [{ 
         stacked: true, 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
      } 
     }); 
    }; 

です。

例

ラベルA：値

ラベルB：値B

レーベルC：値C

TOTAL：値A +値B +値C

その合計値を得ることは可能ですか？

ありがとう、Idalia。

Answer 1

まずあなたが代わりにツールチップのcallbackにおける単一の文字列の配列を返す場合、それは異なるデータセット（詳細はthis answerを参照）であるかのように、それはあなたの配列内のすべての文字列を表示することを知っている必要があります。

だから私は、次のように少しあなたのコールバックを編集した：

callbacks: { 
    label: function(tooltipItem, data) { 
     var corporation = data.datasets[tooltipItem.datasetIndex].label; 
     var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 

     // Loop through all datasets to get the actual total of the index 
     var total = 0; 
     for (var i = 0; i < data.datasets.length; i++) 
      total += data.datasets[i].data[tooltipItem.index]; 

     // If it is not the last dataset, you display it as you usually do 
     if (tooltipItem.datasetIndex != data.datasets.length - 1) { 
      return corporation + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 
     } else { // .. else, you display the dataset and the total, using an array 
      return [corporation + " : $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total]; 
     } 
    } 
} 

あなたは完全なコードin this jsFiddleを見て、ここではその結果であることができます。

Answer 2

私はtektiv答えを修正アクティブセットの合計を表示し、それをツールチップのフッターに移動します。

文字列値を返し

Chart.js 2.5.0

var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 

を使用

tooltips: { 
     mode: 'label', 
     callbacks: { 
      afterTitle: function() { 
       window.total = 0; 
      }, 
      label: function(tooltipItem, data) { 
       var corporation = data.datasets[tooltipItem.datasetIndex].label; 
       var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
       window.total += valor; 
       return corporation + ": " + valor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");    
      }, 
      footer: function() { 
       return "TOTAL: " + window.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
      } 
     } 
    } 

Answer 3

。これは私の問題、重要な注意を解決するため、

tooltips: { 
      mode: 'label', 
      callbacks: { 
       afterTitle: function() { 
        window.total = 0; 
       }, 
       label: function(tooltipItem, data) { 
        var corporation = data.datasets[tooltipItem.datasetIndex].label; 
        var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 

         //THIS ONE: 
        valor=parseFloat(valor); 

     window.total += valor; 
        return corporation + ": " + valor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");    
       }, 
       footer: function() { 
        return "TOTAL: " + window.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 

       } 
      } 
     }