作者：Jessica | 来源：互联网 | 2023-01-31 17:41
我正在尝试构建chart.js散点图,当用户将鼠标悬停在散点上时,工具提示会显示特定于该点的标签.
因此,每个数据点都有它的x和y值,以及它的标签.
到目前为止我已经有了
var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
labels: ["Label 1","Label 2","Label 3"],
data: [{
x: -10,
y: 0,
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return datasetLabel + ': ' + label;
}
}
}
}
});
当我将鼠标悬停在每个点上时,我希望看到"标签1","标签2"或"标签3"出现.
非常感谢
1> ɢʀᴜɴᴛ..：
您可以使用以下工具提示标签回调函数来实现此目的...
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
}
}
}
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ
var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: ["Label 1", "Label 2", "Label 3"],
datasets: [{
label: 'Legend',
data: [{
x: -10,
y: 0,
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
}
}
}
}
});
京公网安备 11010802041100号