使用 Highcharts 的可拖动点动态设置 dragmax

Question

我正在使用带有可拖动点的高图。我希望能够拖动图表点，但不要超过下一个点。他们的网站展示了如何设置 dragMaxX 的演示，但不是动态的：http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points

这个 fiddle 展示了我如何设置 Highchart 设置，而不设置 dragMax：http://jsfiddle.net/AyUbx/3263/

我想限制用户不能将一个点拖过下一个点。像这样：

var thisX = this.series.xData.indexOf(this.x);
var nextX = this.series.xData[thisX+1];
this.series.dragMaxX = nextX;

除非这不起作用。有谁知道这是否可能或如何完成？我查看了 Highcharts 的 API，但找不到有用的东西。

Answer 1

我对这个插件做了一些改动，让您可以设置点之间的最大距离。我添加了新的参数，命名为dragMaxToPoint，你可以串联使用它。

在这里你可以看到我改变的功能：

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');
  Highcharts.each(dragPoint.series.data, function(p, i) {
    if ((dragPoint.x - p.x) !== 0 && (dragPoint.y - p.y) !== 0) {
      if (Math.abs(newX - p.x) < dragMaxToPoint && Math.abs(newY - p.y) < dragMaxToPoint) {
        toClose = true;
      }
    }
  });
  if (!toClose && 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;
  }
}

您可以在此处查看其工作原理示例： http://jsfiddle.net/AyUbx/3269/

此致。

编辑：如果你想在拖动的点获得比下一个点更高的 x 值时停止拖动，你可以稍微改变相同的功能。您可以添加类似于以下的 if 语句：

  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;
  }

您可以在此处查看其工作原理示例： http://jsfiddle.net/AyUbx/3270/

使用 Highcharts 的可拖动点动态设置 dragmax

Dynamically set dragmax using dragable points for Highcharts

javascript

draggable

highcharts