Javascript 在海图中一次拖动多个点

Javascript 在海图中一次拖动多个点,javascript,highcharts,Javascript,Highcharts,我试图使用draggable points插件一次修改样条曲线上的几个点。最后小提琴的理想功能是按住Ctrl键并单击/选择2+个点,然后能够同时拖动这些点,而不是一次拖动一个点 我目前的方法是使用dragDrop的groupBy功能。最初,我的点没有groupId。我正在使用点选择/取消选择事件将groupId设置为“编辑”。我可以在控制台中看到点数据正在通过选择/取消选择事件进行更新。dragDrop的groupBy属性是否仅对初始数据起作用 series: [{ dragDrop:

我试图使用draggable points插件一次修改样条曲线上的几个点。最后小提琴的理想功能是按住Ctrl键并单击/选择2+个点,然后能够同时拖动这些点,而不是一次拖动一个点

我目前的方法是使用dragDrop的groupBy功能。最初,我的点没有groupId。我正在使用点选择/取消选择事件将groupId设置为“编辑”。我可以在控制台中看到点数据正在通过选择/取消选择事件进行更新。dragDrop的groupBy属性是否仅对初始数据起作用

 series: [{
    dragDrop:{
        draggableY: true,
        groupBy: 'groupId'
    },
    allowPointSelect: true,
    point: {
      events: {
        select: function () {
                        this.groupId = 'edit';
        },
        unselect: function () {
                        this.groupId = undefined;
        }            
      }
    },        
    name: 'Tokyo',
    marker: {
        symbol: 'square'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
        y: 26.5,
        marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
        }
    }, 23.3, 18.3, 13.9, 9.6]

}
根据显示当前方法的演示图表之一,将此小提琴拼凑在一起:

您需要通过
点更改
groupId
属性。更新

series: [{
    dragDrop: {
        draggableY: true,
        groupBy: 'groupId'
    },
    allowPointSelect: true,
    point: {
        events: {
            select: function() {
                this.update({
                    groupId: 'edit'
                });
            },
            unselect: function() {
                this.update({
                    groupId: null
                });
            }
        }
    },
    ...]

现场演示:

API参考: