在高图表中一次拖动多个点



我正在尝试使用可拖动点插件一次修改样条上的多个点。最后小提琴的所需功能是按住 Ctrl 并单击/选择 2+ 个点,然后能够同时拖动这些点而不是一次拖动一个。

我目前的方法是使用dragDrop的groupBy功能。 最初,我的积分没有组 ID。 我正在将 groupId 设置为"编辑",其中包含点选择/取消选择事件。 我可以在控制台中看到点数据正在由选择/取消选择事件更新。 拖放的 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]
}

根据显示当前方法的演示图表之一将这个小提琴组合在一起: https://jsfiddle.net/mboag76L/2/

您需要通过point.update更改groupId属性:

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

现场演示:https://jsfiddle.net/BlackLabel/fpgbua5t/

API 参考:https://api.highcharts.com/class-reference/Highcharts.Point#update

最新更新