我查看了各种文档以及这里的类似问题，但似乎找不到特定的解决方案。如果我漏掉了任何明显的东西或者重复了这个问题，请谅解！
作为背景信息，我使用Chart.js插件实现了4个图表，并使用PHP从数据库中传入所需数据。这一切都正常工作，很好。
我的问题是，我需要在工具提示中以格式化的方式显示数据，例如以数字和%的形式。举个例子，我的一个来自数据库的数据是-0.17222。我已经将其格式化为百分数以在表格中显示，一切正常。然而，在设置chart.js柱状图的数据时，数据显然缺少这种格式，并且显示为-0.17222，这是我不想要的。
抱歉，我想发布图片，但我的声望太差了！
我从数据库中获取数据，然后将其设置到我的表格中：
var kpiRex = new Handsontable(example1, {
data: getRexData(),
然后我在图表区域这样使用这些数据：
data: kpiRex.getDataAtRow(3)
对于chart.js 2.0+版本，这已经有所改变（不再使用tooltipTemplate/multiTooltipTemplate）。对于那些只想访问当前未格式化值并开始调整的人， 默认工具提示与以下内容相同：
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel;
}
}
}
}
也就是说，您可以返回修改 tooltipItem.yLabel 的内容，它保存了 y 轴的值。在我的情况下，我想要为一个财务图表添加美元符号、四舍五入和千位分隔符，所以我使用了以下代码：
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
});
}
}
}
}
在chart.js 2.1.6中，我做了类似于这样的事情（使用TypeScript）：
let that = this;
options = {
legend: {
display: false,
responsive: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let account: Account = that.accounts[tooltipItem.index];
return account.accountNumber+":"+account.balance+"€";
}
}
}
}
您想在图表选项中指定自定义的工具提示模板，如下所示：
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value + ' %' %>",
如果需要的话，您可以在您的值后面添加“％”符号。
这是一个 jsfiddle示例。
请注意，如果您只有一个数据集，则应用 tooltipTemplate ，如果您有多个数据集，则应用 multiTooltipTemplate 。
这些选项在文档中的全局图表配置部分中提到。不妨仔细研究一下，其中还可以自定义其他选项。
请注意，您的数据集应仅包含数字值（没有“％”符号或其他内容）。
tooltipTemplate: function(v) {return someFunction(v.value);}
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}
给定的 'v' 参数除了 'value' 属性之外还包含很多信息。您可以在该函数内部放置一个 'debugger' 并自行检查这些信息。
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
// data for manipulation
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
},
},
},
yLabel具有可用值时，所选选项才是正确的，但有时它可能只是一个空字符串。 - Ignacio Lagohttps://www.chartjs.org/docs/latest/configuration/tooltip.html
OP的示例：
options: {
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItem, data) {
console.log(data);
console.log(tooltipItem);
return tooltipItem.formattedValue + '%';
}
}
}
},
...
这对我来说完美无缺。它接受标签并格式化值。
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return ' ' + label + ': ' + value + ' %';
}
}
}
}
tooltips: {
callbacks: {
label: function (tooltipItem) {
return (new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
})).format(tooltipItem.value);
}
}
}
kWh作为单位添加到图表中的值中），可以按如下方式进行:options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
console.log(data);
console.log(tooltipItem);
var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';
if (label) {
label += ' kWh';
}
return label;
}
}
}
}
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
}
}
});
现在让我写一下我使用标签回调功能的情况。
首先记录Label Callback函数的参数，你将看到类似于这里数据集的结构，它由不同的行组成，你想在图表中绘制。 在我的情况下，有4个，因此数据集数组的长度为4。
callbacks: {
label: function (tooltipItem, data) {
console.log('data', data);
console.log('tooltipItem', tooltipItem);
let updatedToolTip: number;
if (tooltipItem.datasetIndex == 0) {
updatedToolTip = tooltipItem.yLabel;
}
if (tooltipItem.datasetIndex == 1) {
updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex == 2) {
updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex == 3) {
updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
}
return updatedToolTip;
}
}
return data.datasets[tooltipItem.datasetIndex].label + " $"以保留标签。 - Alex Levine