Chart.js在画布上单击时获取最近的点

abithluo  于 2023-01-30  发布在  Chart.js
关注(0)|答案(3)|浏览(181)

有没有一种方法可以在画布上的任何地方点击时得到最近的点?也许可以收获核心的“nearest”方法?谢谢

ds97pgxw

ds97pgxw1#

我想你会发现getElementsAtXAxis非常有帮助。
基本上,getElementsAtXAxisgetElementsAtEvent具有非常相似的行为,尽管当单击事件不与图表的点相交时,它将返回最近的ChartElement。
唯一的缺点是,它将返回all最近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});
},
vm0i2vca

vm0i2vca2#

我相信您正在寻找.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;
kkih6yb8

kkih6yb83#

我在一个包含两个数据集的图表中实现了这一点,如下所示:

const userPricingEl = document.getElementById("userPricingChart");
const userPricingChart = new Chart();

userPricingEl.onclick = function (evt) {
    let nearestPoints = userPricingChart.getElementsAtEventForMode(evt, "nearest", {
        intersect: false
    });
    if (nearestPoints) {
        let nearestPoint = nearestPoints[0];
        let label = userPricingChart.data.datasets[nearestPoint._datasetIndex].label;
        let value = userPricingChart.data.datasets[nearestPoint._datasetIndex].data[nearestPoint._index];
        console.log(label, value);
    }
}

其中"userPricingChart"是一个完全充实的new Chart()对象,为了简洁起见,我省略了它。
这里的关键特性是getElementsAtEventForMode()函数,文档为here(尽管是arguably badly)。
希望这个有用。

相关问题