我试图使用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']] + '€';
}
}
}
}
一旦我移除了秤,就会显示欧元符号.
所以我现在的选择如下：
options: {
title: {
display: true,text: 'Title'
},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 + ' €';
}
}
}
仅供参考：这与体重秤无关.它可以与秤一起完美地工作
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢ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,1,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>
