Chart.js 当多个点重合时显示单点的标签/工具提示答案

【问题标题】：Chart.js Show label/tooltip for single point when multiple points coincideChart.js 当多个点重合时显示单点的标签/工具提示
【发布时间】：2021-01-30 20:43:59
【问题描述】：

我有一个 Chart.js 散点图，其中来自两个不同数据集的数据点偶尔会重合/重叠。它们具有相同的 x 和 y 坐标。默认情况下，当点悬停时，工具提示会显示两个数据点的信息。我想要的行为是仅获取第一个重叠点的信息。我可以使用设置为“单一”的工具提示模式来实现这一点。

var config = {
    options: {
        tooltips: {
            mode: "single"
        }
    }
}

虽然这很好用，但我的问题/问题出现了，因为 chart.js 的文档指出模式“单”是 deprecated。它建议使用模式 '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>

这是使用已弃用的“单一”参数的所需行为：

<!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>

关于如何解决此问题的任何想法？特别是对于如果/当“单身”被删除时可能遇到此问题的人。谢谢你，干杯。

【问题讨论】：

您是否找到了显示单点@Lorne 的解决方案？我遇到了完全相同的问题...
仍然使用'single'，因为没有提出解决方案。我已经下载并上传了 chart.js 文件的工作版本的副本，因此在我的情况下它没有被“弃用”的风险。如果您需要该文件的工作副本，我可以提供，因为该网站似乎已更新。

标签： javascript chart.js

【解决方案1】：

使用afterBody 回调手动调整工具提示将显示的内容，方法是删除除您要显示的一点以外的所有内容。 https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

【讨论】：