Javascript Highcharts在可拖动线图上重新绘制和排序数据

我在Highcharts中有一个折线图，当将一个点拖过另一个点时，我想重新绘制该折线图

我想在拖动的同时重新绘制和排序图表，这样线条就会更新，不会相互交叉。我们可以使用chart.series[0].setData（）或chart.series[0].update（）更新图表；但在更新图表时，我不断收到排序错误或可拖动点为null（拖动点或悬停点）的错误

下面是一个示例，我通过更改Dragable模块中的getNewPos（e）函数来检测何时将一个点拖过另一个点

*/
函数getNewPos（e）{
toClose=false；
var originalEvent=e.originalEvent | | e，
pageX=originalEvent.changedTouches？originalEvent.changedTouches[0]。pageX:e.pageX，
pageY=originalEvent.changedTouches？originalEvent.changedTouches[0]。pageY:e.pageY，
series=dragPoint.series，
draggableX=series.options.draggableX&&dragPoint.draggableX！==false，
draggableY=series.options.draggableY&&dragPoint.draggableY！==false，
dragSensitivity=拾取（series.options.dragSensitiviy，1），
dragMaxToPoint=pick（series.options.dragMaxToPoint，0.3），
deltaX=DragTablex？dragX-pageX:0，
deltaY=Dragabley？dragY-pageY:0，
newPlotX=dragPlotX-deltaX，
newPlotY=dragPlotY-deltaY，
newX=dragX==未定义？dragPoint.x:series.xAxis.toValue（newPlotX，true），
newY=dragY===未定义？dragPoint.y:series.yAxis.toValue（newPlotY，true），
ret；
newX=过滤（newX，系列，'X'）；
newY=过滤（newY，系列，“Y”）；
如果（dragPoint.index>0&（newX-dragPoint.series.data[dragPoint.index-1].x）-dragMaxToPoint）{
toClose=true；//检测被拖过另一个点的点
}
if（Math.sqrt（Math.pow（deltaX，2）+Math.pow（deltaY，2））>dragSensitivity）{
返回{
x:draggableX？newX:dragPoint.x，
y:Dragabley？newY:dragPoint.y
};
}否则{
返回null；
}
}

---

有什么想法吗？

如何在drop事件之后对数据进行排序，然后使用

series.setData

更新图表：

  plotOptions: {
    series: {
      point: {
        events: {
          drop: function() {
            var series = this.series,
                xData = series.xData.slice(),
                yData = series.yData.slice(),
                newData = [];

            xData.forEach(function(data, i) {
                newData.push([
                data,
                yData[i]
              ]);
            });

            newData.sort(function(a, b) {
                return a[0] - b[0];
            });

            series.setData(newData, false, false);     
            series.chart.redraw();
          }
        }
      },
      stickyTracking: false
    },
  }

演示：

  plotOptions: {
    series: {
      point: {
        events: {
          drop: function() {
            var series = this.series,
                xData = series.xData.slice(),
                yData = series.yData.slice(),
                newData = [];

            xData.forEach(function(data, i) {
                newData.push([
                data,
                yData[i]
              ]);
            });

            newData.sort(function(a, b) {
                return a[0] - b[0];
            });

            series.setData(newData, false, false);     
            series.chart.redraw();
          }
        }
      },
      stickyTracking: false
    },
  }