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

Question

I have known that how to show multiple info. with same unit in the label by
multiTooltipTemplate: "<%=datasetLabel%> : <%= value %>%"
and the result as following:
[]InfoA:50%
[]InfoB:50%

But I'm now try to show infos with different units such as:
[]InfoA:50%
[]InfoB:50$

How can I do it?

Answer 1

Changing Tooltip Template By Label

You can use the label property of the valuesObject to figure out the index and use that to pick your symbol, like so

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)] %>"
});

Notice that both data and mySymbols collection are properties of globally referencible objects ( window and Chart in this case, but it could be any global object). This is because only the valuesObject is injected into the template function. Unless you want to change the library code, using global objects would be the way to do it (however, do note that its not good design).

---

Fiddle - http://jsfiddle.net/z1nfqhfn/

---

Changing Tooltip Template By DataSet

If you want to do a similar thing by dataset, it would be

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)] %>"
});

---

Fiddle - http://jsfiddle.net/fnu0dyd2/