个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 06:52:24 25 4
gpt4 key购买 nike

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

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

虽然这工作正常，但我的问题/问题出现了，因为 chart.js 的文档指出模式“单一”是 deprecated .它建议使用模式“最近”并将相交设置为“真”将获得相同的结果，但是 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>

关于如何解决这个问题有什么想法吗？特别是对于那些如果/当“single”被删除时可能会遇到这个问题的人。谢谢，干杯。

最佳答案

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

关于javascript - Chart.js 当多个点重合时显示单点的标签/工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65972957/

25 4 0
文章推荐： c - 结构程序未按预期工作(错误)
文章推荐： android - 应用内更新的 JobCancellationException
文章推荐： ios - SwiftUI 文本字段 : Keyboard does not show up on tapped
文章推荐： forms - 如何通过 WhatsApp 分发调查表？