Диаграмма потока jQuery по двум осям y, одинаковое нулевое положение

#javascript #jquery #flot #yaxis

#javascript #jquery #поток #yaxis

Вопрос:

Я хочу, чтобы моя вторая нулевая позиция по оси y совпадала с моей первой осью y.

Есть ли встроенный способ сделать это, или я должен играть с осями min / max?

У меня есть динамические данные (много обновлений диаграммы, когда пользователь выбирает вещи) для отображения с положительными / отрицательными значениями, поэтому на осях y всегда есть нулевая отметка.

Масштабирование и значения по двум осям y различны, и это нормально, но нулевые позиции должны находиться в точно таком же положении пикселя (на одной горизонтальной линии). Как этого добиться?

Я знаю о ‘alignTicksWithAxis’, но, как вы видите, это не то, что я хочу.

Я написал небольшой js-скрипт для обрезки нулевых позиций после отображения диаграммы, и это хорошо работает (синхронизируются нули), если я устанавливаю ось min / max для перемещения оси, но таким образом некоторые точки выходят за пределы холста.

Поэтому мне нужно установить только минимальное или максимальное значение с коэффициентом, но всегда иметь разницу в 10-20 пикселей между двумя нулевыми позициями.

ПРАВКА1:

 PlotOptions po = simplePlot.getPlotOptions();
Axis axis1 = simplePlot.getAxes().getY(1), axis2 = simplePlot.getAxes().getY(2);
AbstractAxisOptions ao1 = po.getYAxesOptions().getAxisOptions(1);
AbstractAxisOptions ao2 = po.getYAxesOptions().getAxisOptions(2);
double yMin1 = axis1.getMinimumValue(), yMax1 = axis1.getMaximumValue(), yDiff1 = yMax1-yMin1;
double yMin2 = axis2.getMinimumValue(), yMax2 = axis2.getMaximumValue(), yDiff2 = yMax2-yMin2;
double diffPx = (axis2.p2c(0) - axis1.p2c(0))/2.0; // diff between the two zero points in px, divided by 2, axis1 will be compressed from the top, axis2 from bottom
if (diffPx<0) { // in this case change axis1 vars with axis2 vars
    diffPx=-diffPx;
    AbstractAxisOptions tAO=ao1; ao1=ao2; ao2=tAO;
    Axis tAX = axis1; axis1=axis2; axis2=tAX;
}
double diff1 = axis1.c2p(axis1.p2c(0)-diffPx); // axis1 zero pos must moved by this value
double diff2 = axis2.c2p(axis2.p2c(0)-diffPx); // axis2 zero pos must moved by this value

// calculate ratio values to compress the axes
double bottomRat1 = -yMin1 / yDiff1; // bottom part of axis1 (below zero) e.g. 1/3
double bottomRatNew1 = (-yMin1-diff1) / yDiff1; // same, but when compressed (with diff1)
double fullRat1 = bottomRat1 / bottomRatNew1; // ratio of original and compressed axis
double yDiffNew1 = yDiff1 / fullRat1; // the new axis1 length
double diffReal1 = yDiff1 - yDiffNew1; // the difference between the original and the new axis length (this is the value by which the axis must be compressed)

// same calculation for axis2 (but for the top part)
double topRat2 = yMax2 / yDiff2;
double topRatNew2 = (yMax2-diff2) / yDiff2;
double fullRat2 = topRat2 / topRatNew2;
double yDiffNew2 = yDiff2 / fullRat2;
double diffReal2 = yDiff2 - yDiffNew2;

boolean slide = false; // if true then axes slide (not compress) and zero positions will be in one line (this is the goal), but some points get out of the canvas
if (slide) {
    ao1.setMaximum(yMax1   diff1);ao1.setMinimum(yMin1   diff1);
    ao2.setMaximum(yMax2 - diff2);ao2.setMinimum(yMin2 - diff2);
} else {
// axes will be compressed (axis1 from the top, axis2 from the bottom), by the calculated values
// here I have some 10-30 px extra gap, why?
    ao1.setMaximum(yMax1   diffReal1);ao1.setMinimum(yMin1);
    ao2.setMaximum(yMax2);ao2.setMinimum(yMin2 - diffReal2);
}
simplePolt.redraw();
  

Комментарии:

1. Пожалуйста, покажите свою работу, какой код вы написали до сих пор?

2. Я добавил свой код, на самом деле это gwt и gflot.