Размер шага перетаскивания в Highcharts - PullRequest
Новая
       12

Размер шага перетаскивания в Highcharts

0 голосов
/ 25 сентября 2018

В следующем примере мне нужно перетащить точку на определенный размер шага, например на 10. См. 

drag: function (e) {

jsfiddle

1 Ответ

0 голосов
/ 27 сентября 2018

В качестве альтернативы, вот модифицированная версия draggable-points.js ( GitRaw GitHub ), которая позволяет использовать некоторые параметры для перетаскивания на шагах определенного размера.Для серии были добавлены следующие параметры:

  • dragStepSizeX: числовой размер шага для оси X
  • dragStepSizeY: числовой размер шага для оси Y
  • dragStepSize: функция, принимающая параметры XorY и point, которые можно реализовать для возврата желаемого размера шага в зависимости от оси и перетаскиваемой точки
  • dragStepAllowMinMax: логическое значение,вам разрешено перетаскивать до минимального / максимального предела или применять шаги?
  • dragStepRelative: логическое значение, следует ли выполнять шаги перетаскивания относительно исходного значения точек?

См. это демонстрационное приложение JSFiddle , которое используется для определения размера шага по оси Y, равного 5 для 8 первой точки и 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;
    }
}

Это модификация кода Торстейна Хонси из Highsoft,по лицензии MIT.

...