时间戳

首页 > 解决方案 > Highcharts 在可拖动的折线图上重绘和排序数据

javascript - Highcharts 在可拖动的折线图上重绘和排序数据

问题描述

我在 Highcharts 中有一个折线图，并且想要在将一个点拖过另一个点时重绘或该线。

我想在拖动时重绘和排序图表，以便线条更新并且不会相互交叉。我们可以使用 chart.series[0].setData() 或 chart.series[0].update() 来更新图表；但是在更新图表时，我不断收到排序错误或可拖动点为空（dragPoint 或 hoverPoint）的错误

这是一个示例，我通过更改可拖动模块http://jsfiddle.net/u4xpmf2j/1/中的 getNewPos(e) 函数来检测一个点何时被拖过另一个点 

 */
function 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 = pick(series.options.dragSensitiviy, 1),
    dragMaxToPoint = pick(series.options.dragMaxToPoint, 0.3),
    deltaX = draggableX ? dragX - pageX : 0,
    deltaY = draggableY ? dragY - pageY : 0,
    newPlotX = dragPlotX - deltaX,
    newPlotY = dragPlotY - deltaY,
    newX = dragX === undefined ? dragPoint.x : series.xAxis.toValue(newPlotX, true),
    newY = dragY === undefined ? dragPoint.y : series.yAxis.toValue(newPlotY, true),
    ret;
  newX = filterRange(newX, series, 'X');
  newY = filterRange(newY, series, 'Y');
  if (dragPoint.index > 0 && (newX - dragPoint.series.data[dragPoint.index - 1].x) < dragMaxToPoint || dragPoint.index < dragPoint.series.data.length - 1 && (newX - dragPoint.series.data[dragPoint.index + 1].x) > -dragMaxToPoint) {
    toClose = true; // DETECT POINT BEING DRAGGED PAST ANOTHER
  }
  if (Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) > dragSensitivity) {
    return {
      x: draggableX ? newX : dragPoint.x,
      y: draggableY ? newY : dragPoint.y
    };
  } else {
    return null;
  }
}

有任何想法吗？

标签： javascripthighcharts

解决方案

如何在 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
    },
  }

演示：http: //jsfiddle.net/BlackLabel/6kyt3roL/

推荐阅读