我有一个Chart.js散点图，其中来自两个不同数据集的数据点偶尔会重合/重叠。它们具有相同的x和y坐标。默认情况下，悬停点时，工具提示将显示两个数据点的信息。我希望的行为是只获取第一个重叠点的信息。我可以使用工具提示模式设置为“单”来实现这一点。
var config = {
options: {
tooltips: {
mode: "single"
}
}
}虽然这很好，但我的问题/问题出现了，因为chart.js的文档指出“single”模式已被弃用。它建议使用模式'nearest'并将intersect设置为'true'将获得相同的结果，但是it doesn't。
以下是该问题的再现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<canvas></canvas>
</body>
<script>
var config = {
type: "scatter",
data: {
labels: ["label1", "label2"],
datasets: [{label: "label1", data:[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3},{x: 4, y:4},{x: 5, y:2}], backgroundColor: "rgb(155,0,0)"},{label: "label2", data:[{x: 1, y:1},{x: 2, y:4},{x: 3, y:3},{x: 4, y:6},{x: 5, y:8}], backgroundColor: "rgb(0,0,155)"}]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
yAxes: [{
type: "linear",
scaleLabel: {
display: true,
labelString: "labels",
fontStyle: "bold"
},
ticks: {
autoSkip: true,
maxTicksLimit: 7
}
}],
xAxes: [{
type: "linear",
beginAtZero: true
}]
},
tooltips: {
mode: "nearest",
intersect: true
}
}
}
var chart = new Chart(document.querySelector("canvas"), config);
</script>
</html>下面是使用已弃用的“single”参数的预期行为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<canvas></canvas>
</body>
<script>
var config = {
type: "scatter",
data: {
labels: ["label1", "label2"],
datasets: [{label: "label1", data:[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3},{x: 4, y:4},{x: 5, y:2}], backgroundColor: "rgb(155,0,0)"},{label: "label2", data:[{x: 1, y:1},{x: 2, y:4},{x: 3, y:3},{x: 4, y:6},{x: 5, y:8}], backgroundColor: "rgb(0,0,155)"}]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
yAxes: [{
type: "linear",
scaleLabel: {
display: true,
labelString: "labels",
fontStyle: "bold"
},
ticks: {
autoSkip: true,
maxTicksLimit: 7
}
}],
xAxes: [{
type: "linear",
beginAtZero: true
}]
},
tooltips: {
mode: "single"
}
}
}
var chart = new Chart(document.querySelector("canvas"), config);
</script>
</html>有什么办法解决这个问题吗？特别是对于那些如果/当“单身”被删除时可能会遇到这个问题的人。谢谢干杯
2条答案
按热度按时间v1uwarro1#
使用
afterBody回调函数手动调整工具提示将要显示的内容，方法是删除所有您想要显示的点，只保留一个点。https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbackssmtd7mpg2#
您可以使用有关整个数据集的知识来过滤工具提示
Screenshot