Chart.js get the nearest point when clicked on canvas

问题

is there a way to get the nearest point when clicked anywhere on canvas? Maybe somehow harvest the core 'nearest' method? Thanks

回答1:

I think you will find getElementsAtXAxis very helpful.

Basically, getElementsAtXAxis has a very similar behaviour to getElementsAtEvent although when the click event doesn't intersect a point of the chart, it will return the nearest ChartElement.

The only downside is that it will return all the ChartElement on the nearest x-axis index.

So, if you use multiple datasets, this might not be the best choice for you.

Code example:

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

If anyone is looking for the related piece of code, it's in 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});
},

回答2:

I believe you are looking for .getElementAtEvent and .getElementsAtEvent (https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente)

What you can do - is set up a clickHandler function that will grab the event from onClick and use it to return the chart element under it.

Here is an example from the official docs:

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];
    }
}

After, just add it to your chart canvas (again, from the official docs):

canvas.onclick = clickHandler;

来源：https://stackoverflow.com/questions/56388421/chart-js-get-the-nearest-point-when-clicked-on-canvas

标签

javascript

chart.js