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

Question

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

我的一个想法是返回"工具提示"打开，打开，点击。这在逻辑上是等价的，因为在我的选项中，每当鼠标在图形上时，工具提示总是显示最近的刻度。是否有可能返回onclick的工具提示标签?

我的最终目标是当我点击图形时可以访问最近的x轴标签(作为字符串)。这可能吗?

Answer 1

您可以为图表添加一个自定义的onclick函数，然后向chartjs请求该位置的元素。

查看这个问题的完整答案与示例:获取yLabel值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
};