Chartjs在标签中以不同的单位显示多个信息

Chartjs display multiple info with different units in label

本文关键字：显示 单位 信息 标签 Chartjs      更新时间：2023-09-26

我已经知道如何显示多个信息。与标签中相同的单位
multiTooltipTemplate:"& lt; % = datasetLabel %>: & lt; %> % % =值"
结果如下:
[] InfoA: 50%
[] InfoB: 50%

但是我现在试着用不同的单位来显示信息，比如:
[] InfoA: 50%
[] InfoB: 50 $

我该怎么做呢?

按标签更改工具提示模板

你可以使用valuesObject的label属性来计算索引，并使用它来选择你的符号，像这样

Chart.mySymbols = ['!', '@', '#', '$', '%', '^', '&'];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line(window.data, {
    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.labels.indexOf(label)] %>"
});

注意，data和mySymbols集合都是全局可引用对象的属性(在本例中是window和Chart，但它可以是任何全局对象)。这是因为只有valuesObject被注入到template函数中。除非您想更改库代码，否则使用全局对象将是一种方法(然而，请注意这不是一个好的设计)。

提琴- http://jsfiddle.net/z1nfqhfn/

按数据集更改工具提示模板

如果你想对数据集做类似的事情，它将是

Chart.mySymbols = ['°C', '%'];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line(window.data, {
    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.datasets.map(function(e) { return e.label }).indexOf(datasetLabel)] %>"
});

提琴- http://jsfiddle.net/fnu0dyd2/

相关文章：