ChartJS将工具提示添加到分组条形图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ChartJS将工具提示添加到分组条形图相关的知识，希望对你有一定的参考价值。
我试图使用ChartJS将欧元符号添加到我的分组条形图的工具提示中。剪断：
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']] + '€';
}
}
}
此代码适用于我的折线图，但不适用于我的分组条形图。当我将鼠标悬停时，我希望我的条形图看起来如下所示：
但是我的图表中没有欧元符号，只显示其价值。我究竟做错了什么？
谢谢。
**编辑
所以我的全部选项如下所示：
options: {
title: {
display: true,
text: 'Title',
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Wert in €'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Zeitintervall'
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']] + '€';
}
}
}
}
一旦我删除了scales，就会显示欧元符号。所以我现在的选择如下：
options: {
title: {
display: true,
text: 'Title'
},
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']] + ' €';
}
}
}
}
但是现在我遇到了另一个问题，它显示了两个不同栏的相同值：
您可以清楚地看到值不一样。问题出在这里？
答案
这可以使用以下工具提示标签回调函数来实现：
tooltips: {
mode: 'label',
callbacks: {
label: function(t, d) {
var dstLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return dstLabel + ': ' + yLabel + ' €';
}
}
}
仅供参考：这与scales无关。它与scales一起工作得非常好
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ⧩
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'DST1',
backgroundColor: '#3e95cd',
data: [3, 2, 4, 5, 1]
}, {
label: 'DST2',
backgroundColor: '#8e5ea2',
data: [2, 4, 1, 2, 5]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
title: {
display: true,
text: 'Title'
},
tooltips: {
mode: 'label',
callbacks: {
label: function(t, d) {
var dstLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return dstLabel + ': ' + yLabel + ' €';
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="ctx"></canvas>另一答案
派对有点晚了，但我最近发现了javascript内置的货币格式化程序，可以节省您使用字符串并在这里有所帮助，并且可以在代码的其他地方重复使用！：
const gbp = new Intl.NumberFormat('en-GB', {
style: 'currency',
currency: 'GBP',
minimumFractionDigits: 2
});
作为英语，我当然用英镑做了，但是我发现将en-GB改为de-DE和'GBP'改为'EUR'工作得非常好。甚至正确格式化小数点和千位分隔符。
编辑：包括如何实际给格式化程序一个数字格式将是有用的不是它！
gbp.format(10000); // Returns £10,000.00
以上是关于ChartJS将工具提示添加到分组条形图的主要内容，如果未能解决你的问题，请参考以下文章