【发布时间】：2016-04-15 16:51:51
【问题描述】：
在 Chart.js V1.0 中，我将添加 tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>" 以将欧元符号添加为工具提示标签的前缀。但是，这在 V2 中不再有效。有谁知道做到这一点的新方法？好像没找到。
非常感谢！
【问题讨论】：
标签： chart.js
【发布时间】：2016-04-15 16:51:51
【问题描述】：
在 V2.0 中，tooltipTemplate 选项已弃用。相反，您可以使用回调来修改显示的工具提示。有一个使用回调here 的示例，您可以在 Chart.defaults.global.tooltips
下的 documentation 中找到可能的回调在你的情况下，我会做以下事情：
window.myLine = new Chart(chart, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' €';
}
}
},
}
});
别忘了设置 HTML 元标记：
<meta charset="UTF-8">
【讨论】：
-
如果之后显示工具提示有问题，请查看此问题以及如何解决它：github.com/nnnick/Chart.js/issues/1891
-
对于 v3，我通过
options: { plugins: { tooltip: { callbacks: { label: callbackFunction } } } }解决了这个问题
除了 iecs 的回答之外，如果您想返回 确切的默认文本 并添加更多内容（例如您的情况中的 € 符号），请使用以下语法：
var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
}
}
}
}
});
【讨论】：
-
这是我找了半天的，谢谢！！所有其他建议不断替换默认文本和标签。
-
V3 有一个例子说明如何做到这一点chartjs.org/docs/3.5.0/configuration/tooltip.html
看看有没有帮助：
var config = {
options: {
tooltips: {
callbacks: {
title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
label: function (tooltipItem, data) {
var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(2) + '% )';
},
//footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
}
},
}
};
【讨论】：
-
使用 ChartJS 2.7.1 及以上版本帮助我在搜索数小时后显示标签、值和符号。
这一套“标签+价值+€”
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
}
}
}
}
【讨论】：
-
这是唯一对我有用的东西。接受的答案对我不起作用，也许当时确实有效......
-
这个答案适用于甜甜圈、派和其他类型的图表。我猜这应该是公认的答案。
如果您有一个 堆叠条形图 图表（我假设是堆叠折线图），并且您想用货币符号格式化单个条形图中包含的所有数据点，您可以执行类似的操作这个：
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItems, data) {
return '$' + tooltipItems.yLabel;
}
}
},
注意mode的值。
如果您想更好地控制工具提示，例如在出现图表图例时包含标签，您可以执行以下操作：
tooltips: {
mode: 'single', // this is the Chart.js default, no need to set
callbacks: {
label: function (tooltipItems, data) {
var i, label = [], l = data.datasets.length;
for (i = 0; i < l; i += 1) {
label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
}
return label;
}
}
},
【讨论】：
-
这对我有用，对第一个代码块稍作修改。在这一行
return '$' + tooltipItems.yLabel中的tooltipItem中有一个额外的'。这导致看不到任何工具提示。
只是更新@Luc Lérot 的答案。 我遇到了同样的问题，他的代码帮助了我但没有修复它，我必须修改它才能为我工作。 使用 Chart.js 版本 2.6.0
var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
tooltips: {
callbacks: {
label: function (tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €';
}
}
}
}
});
【讨论】：
为了概括代码，我们将unitPrefix 和unitSuffix 用于数据集，例如：
datasets: [
{
label: 'Loss Rate',
data: [],
unitSuffix: "%",
},
{
label: 'Price',
data: [],
unitPrefix: "$",
},
那么我们可以有这样的代码：
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let blocks = [];
if (dataset.label) {
blocks.push(${dataset.label} + ':');
}
if (dataset.unitPrefix) {
blocks.push(dataset.unitPrefix);
}
blocks.push(dataset.data[tooltipItem.index])
if (dataset.unitSuffix) {
blocks.push(dataset.unitSuffix);
}
return blocks.join(' ');
},
},
},
},
【讨论】：