我正在使用带有可拖动点的 Highcharts 。我希望能够拖动图表点,但不能超过下一个点。他们的网站展示了如何设置 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,但找不到有效的东西。
最佳答案
我对这个插件做了一些修改,让您可以设置点之间的最大距离。我添加了新参数,名为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/
关于javascript - 使用 Highcharts 的可拖动点动态设置 DragMax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37818111/