chartjs-plugin-dragdata 不适用于散点图

Question

似乎chartjs-plugin-dragdata插件仅适用于折线图。但就我而言，我需要一张带有一个数据点的散点图，我想使其可拖动。但是拖放数据点后它就消失了，并且回调函数 onDragStart 等也不会被调用。 那么有没有简单的方法来修改插件呢？或者也许还有另一个插件正在做我想要的事情？

Answer 1

我解决了我的问题。只需添加 2 或 3 行即可。这是我修改的两个方法：

    function getElement(chartInstance, callback) {
    return function () {
        if (_d3Selection.event) {
            var e = _d3Selection.event.sourceEvent;
            element = chartInstance.getElementAtEvent(e)[0];

            if (element) {
                scale = element['_yScale'].id;
                scaleX = element['_xScale'].id;
                if (typeof callback === 'function' && element) callback(e, element);
            }
        }
    };
}

function updateData(chartInstance, callback) {
    return function () {
        if (element && _d3Selection.event) {
            var e = _d3Selection.event.sourceEvent;
            var datasetIndex = element['_datasetIndex'];
            var index = element['_index'];

            var value = chartInstance.scales[scale].getValueForPixel(e.clientY - chartInstance.canvas.getBoundingClientRect().top);
            var valueX = chartInstance.scales[scaleX].getValueForPixel(e.clientX-chartInstance.canvas.getBoundingClientRect().left );

            chartInstance.data.datasets[datasetIndex].data[index] = {x:valueX, y:value};
            chartInstance.update(0);
            if (typeof callback === 'function') callback(e, datasetIndex, index, value);
        }
    };
}

Answer 2

只想在 2024 年发布此内容，Chartjs 更新到 v4.4.1，因为

dragdata

似乎仍然无法使用分散功能。

如果您可以控制数据，只需使用

type: 'line'

和

showLine: 'false'

即可隐藏之间的线条并使其看起来像散点图。