Question

当在画布上的任何位置单击时，是否可以获取最近的点？也许以某种方式收获了核心的“最近”方法？谢谢

Answer 1

我认为您会发现getElementsAtXAxis很有帮助。

基本上，getElementsAtXAxis与getElementsAtEvent的行为非常相似，尽管单击事件未与图表的点相交时，它将返回最近的ChartElement。

唯一的缺点是它将在最近的x轴索引上返回全部 ChartElement。

因此，如果您使用多个数据集，这可能不是您的最佳选择。

代码示例：

canvas.onclick = function(e) {
    const elts = chart.getElementsAtXAxis(simulatedEvent);
    if (elts && elts.length) {
        // Do something with elts[0]
    }
};

如果有人在寻找相关的代码，它在core.controller.js中：

getElementAtEvent: function(e) {
    return Interaction.modes.nearest(this, e, {intersect: true});
},

getElementsAtEvent: function(e) {
    return Interaction.modes.index(this, e, {intersect: true});
},

getElementsAtXAxis: function(e) {
    return Interaction.modes.index(this, e, {intersect: false});
},

Answer 2

我相信您正在寻找 .getElementAtEvent和.getElementsAtEvent（https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente）

您能做的-设置了一个clickHandler函数，该函数将从onClick抓取事件，并使用它返回其下的图表元素。

以下是官方文档中的示例：

function clickHandler(evt) {
    var firstPoint = myChart.getElementAtEvent(evt)[0];

    if (firstPoint) {
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    }
}

之后，只需将其添加到图表画布中即可（同样，来自官方文档）：

canvas.onclick = clickHandler;

在画布上单击时，Chart.js得到最近的点

2 个答案: