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

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

Answer 1

我设法做了我想做的事，感谢@Kubilay Karpat让我了解如何找到所需的价值观。我会+代表你，但我没有足够的能力这样做。

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 + " %";
},

Answer 2

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

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

如果你喜欢在我的例子中修剪/下限/ ceil百分比，你可能想要考虑图表中百分比的总和可能不等于100的事实。

在ChartJS中计算工具提示中的值

2 个答案: