在 ChartJS 的工具提示中计算值

Question

我正在使用 chartJS 来显示包含 2 个或有时 3 个数据集的数据。

我能否让它不仅显示 tooltipItem.yLabel，而且还显示 yLabel (dataset1/(dataset1+dataset2)) 总量的百分比？我想把这个值放在 afterLabel.

ChartJS 选项代码：

tooltips : {

    callbacks : {

        label : function(tooltipItem, data) {
            return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
        },
        afterLabel : function(tooltipItem, data) {
            return dataset1/(dataset1+dataset2);
        },
    }
}

我的 'Y' 数据集是数字数组。 X 数据集是日期数组。我似乎无法弄清楚 chart.min.js 如何获取这些值。

Answer 1

是的，你可以。您需要做的就是遍历所有数据集并对对应于您的索引号的值求和。然后你可以将你的数字除以这个总和。以下代码对我有用：

afterLabel: function(tooltipItem, data){
  var total = 0;
  for (i = 0; i < data.datasets.length; i++) {
    total += data.datasets[i].data[tooltipItem.datasetIndex];
  }
  var percentage = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / total * 100;
  var percentage = percentage.toFixed(2); // Trim decimal part
  return "Percentage: %" + percentage;
}

此外，以下部分似乎是多余的，因为这是工具提示标签的默认模式。

label : function(tooltipItem, data) {
        return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
    },

如果您喜欢 trim/floor/ceil 我示例中的百分比，您可能需要考虑以下事实：图表中的百分比总和可能不等于 100。

Answer 2

我设法做了我想做的事，谢谢@Kubilay Karpat 让我想到了如何找到所需的值。我会 +rep 你，但我没有足够的时间这样做。

afterLabel : function(tooltipItem, data) {
    var total = 0;
    total = parseInt(data.datasets[0].data[tooltipItem.index]) + parseInt(data.datasets[1].data[tooltipItem.index]);                    
    var percentage = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / total * 100;
    var percentage = percentage.toFixed(2);
    return percentage + " %";
},

在 ChartJS 的工具提示中计算值

Calculate value in tooltip in ChartJS

javascript

tooltip

chart.js