Question

在以下示例中，我需要将点拖动一定步长，例如到10点。

drag: function (e) {

jsfiddle

Answer 1

作为替代方案，这是draggable-points.js（GitRaw GitHub）的修改版本，它允许某些参数以某些步长进行拖动。为系列添加了以下选项：

dragStepSizeX：X轴的数字步长
dragStepSizeY：Y轴的数字步长
dragStepSize：具有参数XorY和point的函数，您可以实现这些参数，以根据轴和要拖动的点返回所需的步长
dragStepAllowMinMax：布尔值，应该允许您拖动到最小/最大限制，还是执行步骤？
dragStepRelative：布尔值，是否应相对于点的原始值执行拖动步骤？

请参见this JSFiddle demo，该方法用于在Y轴上强制步长为8，第一个点为5，其余点为2。不是X轴上的步长。

已修改以下功能以适应draggable-points.js中的要求：

/**
 * Adjust value according to step size
 */
function dragStepAdjustment(value, prevValue, stepSize, relative) {
    if(stepSize === undefined) {
        return value;
    }

    const midpoint = stepSize/2;
    const modulus = relative === true ? (value-prevValue)%stepSize : value%stepSize;
    return modulus > midpoint ? value + (stepSize-modulus) : value - modulus;
}

/**
 * Filter by dragMin and dragMax
 */
function filterRange(newY, point, series, stepSize, XOrY) {
    var options = series.options,
        dragMin = pick(options.dragMin ? options.dragMin(XOrY, point) : undefined, options['dragMin' + XOrY], undefined),
        dragMax = pick(options.dragMax ? options.dragMax(XOrY, point) : undefined, options['dragMax' + XOrY], undefined),
        precision = pick(options['dragPrecision' + XOrY], undefined),
        allowMinMax = options.dragStepAllowMinMax === true;

    if (!isNaN(precision)) {
        newY = Math.round(newY / precision) * precision;
    }

    if (newY < dragMin) {
        if(stepSize !== undefined) {
            allowMinMax ? newY = dragMin : newY += stepSize;
        }
        else {
            newY = dragMin;
        }
    } else if (newY > dragMax) {
        if(stepSize !== undefined) {
            allowMinMax ? newY = dragMax : newY -= stepSize;
        }
        else {
            newY = dragMax;
        }
    }

    if(newY < dragMin || newY > dragMax) {
        newY = 'X' == XOrY ? point.x : point.y;
    }

    return newY;
}

/**
 * Get the new values based on the drag event
 */
function getNewPos(e) {
    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.dragSensitivity, 1),
        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),
        dragStepSizeX = pick(series.options.dragStepSize ? series.options.dragStepSize('X', dragPoint) : undefined, series.options.dragStepSizeX, undefined),
        dragStepSizeY = pick(series.options.dragStepSize ? series.options.dragStepSize('Y', dragPoint) : undefined, series.options.dragStepSizeY, undefined),
        ret;

    newX = dragStepAdjustment(newX, dragPoint.x, dragStepSizeX, series.options.dragStepRelative);
    newY = dragStepAdjustment(newY, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
    newX = filterRange(newX, dragPoint, series, dragStepSizeX, 'X');
    newY = filterRange(newY, dragPoint, series, dragStepSizeY, 'Y');
    if (dragPoint.low) {
        var newPlotHigh = dragPlotHigh - deltaY,
            newPlotLow = dragPlotLow - deltaY;
        newHigh = dragY === undefined ? dragPoint.high : series.yAxis.toValue(newPlotHigh, true);
        newLow = dragY === undefined ? dragPoint.low : series.yAxis.toValue(newPlotLow, true);
        newHigh = dragStepAdjustment(newHigh, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
        newLow = dragStepAdjustment(newLow, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
        newHigh = filterRange(newHigh, dragPoint, series, dragStepSizeY, 'Y');
        newLow = filterRange(newLow, dragPoint, series, dragStepSizeY, 'Y');
    }
    if (Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) > dragSensitivity) {
        return {
            x: draggableX ? newX : dragPoint.x,
            y: draggableY ? newY : dragPoint.y,
            high: (draggableY && !changeLow) ? newHigh : dragPoint.high,
            low: (draggableY && changeLow) ? newLow : dragPoint.low,
            dragStart: dragStart,
            originalEvent: e
        };
    } else {
        return null;
    }
}

这是根据MIT许可对Highsoft的Torstein Honsi代码进行的修改。

高图可拖动点拖动步长

1 个答案: