我正在尝试使用 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'
},
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
ᴡᴏʀᴋɪɴɢ ᴇ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 - ChartJS 将工具提示添加到分组条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47914729/