Javascript 如何从tooltip-Chart.js访问特定数据值
我试图将对象数组作为数据传递给图形数据,包括x的值和每个工具提示中要使用的一些其他值 在我的数据数组中,每个对象都包含Javascript 如何从tooltip-Chart.js访问特定数据值,javascript,chart.js,Javascript,Chart.js,我试图将对象数组作为数据传递给图形数据,包括x的值和每个工具提示中要使用的一些其他值 在我的数据数组中,每个对象都包含x和value变量的值。我想访问工具提示中的值,最后显示鼠标悬停在每个图形数据上时出现的工具提示中的值 这是我的密码: var myChart = new Chart(ctx, { type: 'line', data: { labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017
x
和value
变量的值。我想访问工具提示
中的值
,最后显示鼠标悬停在每个图形数据上时出现的工具提示中的值
这是我的密码:
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'],
datasets: [{
label: 'Values',
data: [{
y: 12,
value: 12
},
{
y: 3,
value: 13
},
{
y: 1,
value: 15
},
{
y: -3,
value: 5
},
{
y: 67,
value: 18
},
{
y: 12,
value: 11
},
{
y: 13,
value: 19
}
],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}]
},
options: {
tooltips: {
// HERE I WANT TO ACCESS VALUE VARIABLE AND DISPLAY IT IN TOOLTIP
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Chart.js工具提示文档有一个示例,显示如何指定为给定数据点显示的文本。您需要编写带有以下参数的函数:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return '...';
}
}
}
的部分显示了通过tooltipItem
传递给回调的信息。这里重要的是datasetIndex
(该项来自的数据集的索引)和index
(数据集中该数据项的索引)。使用这些选项,您可以访问数据中的正确项
这是一个非常简单的示例,可以访问工具提示中的y
和value
(在导致错误的情况下,backgroundColor
/borderColor
已删除):
谢谢这正是我想要的。然而,工具提示仅在给定borderColor和backgroundColor的单个值时出现,但这是一个相当大的问题。我不知道这是否适用于折线图。请参见此处的问题解决方法:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return item.y + ' ' + item.value;
}
}
}