chart.js - ChartJS 多个工具提示回调不起作用

Question

我正在尝试在 ChartJS 的工具提示末尾计算数据集值的总和。

当我在“label”回调中执行此代码时，工作正常。但是，当我在“afterBody”或“footer”回调中的不同回调中执行此代码时，结果为 NaN。

new Chart(document.getElementById("line-chart"), {
                type: 'line',
                data: {
                    labels: [2018, 2019, 2020],
                    datasets: [{
                        data: [1.09, 1.48, 2.48],
                        label: "ABC",
                        borderColor: "#3e95cd",
                        fill: false
                    }, {
                        data: [0.63, 0.81, 0.95],
                        label: "DEF",
                        borderColor: "#8e5ea2",
                        fill: false
                    }, {
                        data: [0.17, 0.17, 0.18],
                        label: "GHI",
                        borderColor: "#3cba9f",
                        fill: false
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Past 2FY + Current FY Estimate, US$ millions'
                    },
                    tooltips: {
                        mode: 'index',
                        callbacks: {
                            label: function(tooltipItem, data) {
                                if (tooltipItem.index > 0) {
                                    var previousdata = tooltipItem.index - 1;
                                    var growth = ", YoY: " + ((data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / data.datasets[tooltipItem.datasetIndex].data[previousdata] * 100) - 100).toFixed(1) + "%";
                                } else {
                                    var growth = '';
                                };
                                
                                return data.datasets[tooltipItem.datasetIndex].label + ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + growth;
                                
                            },
                            afterBody: function(tooltipItem, data){
                                var total = 0;
                                for(var i=0; i < data.datasets.length; i++)
                                    total += data.datasets[i].data[tooltipItem.index];
                                return 'Sum:'+total;
                            }
                            }
                        }
                    }
                });

<canvas id="line-chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

任何帮助都会很棒!

我希望工具提示“Sum:”返回数据集值的总和(在本例中为“ABC”+“CDE”+“GHI”值)。

Answer 1

您的用例是给定的 example for tooltip callbacks在 Chart.js samples page 上使用以下代码:

// Use the footer callback to display the sum of the items showing in the tooltip
footer: function(tooltipItems, data) {
  var sum = 0;

  tooltipItems.forEach(function(tooltipItem) {
    sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
  });
  return 'Sum: ' + sum;
}

按照上面的例子编辑你的代码片段似乎会产生你想要的结果，尽管你可能希望它的格式与你的工具提示的其余部分相匹配:

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [2018, 2019, 2020],
    datasets: [{
      data: [1.09, 1.48, 2.48],
      label: "ABC",
      borderColor: "#3e95cd",
      fill: false
    }, {
      data: [0.63, 0.81, 0.95],
      label: "DEF",
      borderColor: "#8e5ea2",
      fill: false
    }, {
      data: [0.17, 0.17, 0.18],
      label: "GHI",
      borderColor: "#3cba9f",
      fill: false
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Past 2FY + Current FY Estimate, US$ millions'
    },
    tooltips: {
      mode: 'index',
      callbacks: {
        label: function(tooltipItem, data) {
          if (tooltipItem.index > 0) {
            var previousdata = tooltipItem.index - 1;
            var growth = ", YoY: " + ((data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / data.datasets[tooltipItem.datasetIndex].data[previousdata] * 100) - 100).toFixed(1) + "%";
          } else {
            var growth = '';
          };

          return data.datasets[tooltipItem.datasetIndex].label + ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + growth;

        },
        footer: function(tooltipItems, data) {
          var sum = 0;

          tooltipItems.forEach(function(tooltipItem) {
            sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          });
          return 'Sum: ' + sum;
        }
      }
    }
  }
});

<canvas id="line-chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>