Chart.js：更稀疏的可点击数据点

Question

I've got a chart.js line chart, with 128 datapoints.

Currently, it uses the solution here for drag and drop verticals.

But it's a hassle. I'd like to limit the clickable / editable points to 30 or so.

(Then ideally it would do some smart interpolation of the surrounding values.)

Any ideas how to achieve this?

    function move_handler(event)
{
    // locate grabbed point in chart data
    if (activePoint != null) {
        var data = activePoint._chart.data;
        var datasetIndex = activePoint._datasetIndex;

        // read mouse position
        const helpers = Chart.helpers;
        var position = helpers.getRelativePosition(event, myChart);

        // convert mouse position to chart y axis value
        var chartArea = window.myChart.chartArea;
        var yAxis = window.myChart.scales["y-axis-0"];
        var yValue = map(position.y, chartArea.bottom, chartArea.top, yAxis.min, yAxis.max);

        // update y value of active data point
        data.datasets[datasetIndex].data[activePoint._index] = yValue;


//        try {
//            for (let i = -5;i < 5;i++){
//                data.datasets[datasetIndex].data[activePoint._index + i] = yValue;
//            }
//        }
//        catch (err) {}

        window.myChart.update();
    };
};

Answer 1

I found Smooth.js which did the trick