chartJS：如何在点击时返回最近的 x 轴标签答案

【问题标题】：chartJS: How to return the closest x-axis label on clickchartJS：如何在点击时返回最近的 x 轴标签
【发布时间】：2021-01-23 01:03:15
【问题描述】：

我有一个 chartJS 折线图，x 轴标签是每个小时标记的最后 72 小时（例如：[8:00am, 9:00am, 10:00am,...]）。有没有办法可以在点击时返回最近的 xAxis 标签？我找到了一种方法来返回图形的 x-y 坐标，但这些坐标以像素为单位，并且图形能够根据浏览器窗口的大小调整其自身的大小。如果我要考虑当前浏览器窗口的大小和显示的标签数量，我可以计算出哪个标签最接近，但我希望有一种更简单的方法来做到这一点。

我的一个想法是在单击时返回“工具提示”所在的标签。这在逻辑上是等价的，因为在我的选项中，只要鼠标在图表上，工具提示总是显示最接近的刻度。是否可以在单击时返回工具提示标签？

我的最终目标是在单击图表时访问最近的 x 轴标签（作为字符串）。这可能吗？

【问题讨论】：

标签： javascript chart.js chartjs-2.6.0

【解决方案1】：

您可以向图表添加自定义 onclick 函数，然后向 chartjs 询问该位置的元素。

请参阅此问题以获取完整答案，例如：get yLabel value onclick chart js

document.getElementById("myChart").onclick = function (evt) {
        var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
        var firstPoint = activePoints[0];
        var xLabel = myChart.data.labels[firstPoint._index];
        // Do things with your x label
    };

【讨论】：