使用可拖動點爲Highcharts動態設置dragmax

我正在使用可拖動點數的highcharts爲highchart。我希望能夠拖動圖表點，但不能超過下一個點。他們的網站上顯示的dragMaxX如何可以設置演示，但不能動態：http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points 使用可拖動點爲Highcharts動態設置dragmax

這撥弄瞭如何我已經設置了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，但找不到有效的東西。

來源

2016-06-14 Koiski

我已經改變了這個插件一點點，給你設置點之間的最大距離的可能性。我添加了一個名爲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/

來源

2016-06-15 12:28:17

這將停止阻力，如果它是關閉到另一點。如果拖動的點獲得比下一個點更高的x值，我希望它停止拖動。您拖動的點不應超過x軸上的下一個點 – Koiski

因此，您希望得到類似於該圖表的東西？ http://jsfiddle.net/AyUbx/3270/ –

多數民衆贊成完美:)謝謝！更新你的答案，我會將其標記爲解決方案 – Koiski

使用可拖動點爲Highcharts動態設置dragmax

回答

相關問題