jQuery flot chart两个y轴,相同的零位

时间:2016-10-18 15:48:53

标签: javascript jquery flot yaxis

我希望我的第二个y轴零位与我的第一个y轴相同。

是否有内置方法可以执行此操作,或者我必须使用轴min / max?

我有动态数据(用户选择时会刷新大量图表)以显示正/负值,因此y轴上总是有一个零点。

两个y轴缩放和值不同,没有问题,但零位置必须位于完全相同的像素位置(在一条水平线上)。 怎么做到这一点?

我知道' alignTicksWithAxis'但是你看,这不是我想要的。

我在显示图表后编写了一个小js脚本来修剪零位置,如果我设置轴min / max来滑动轴,这样可以很好地工作(零同步),但是这样一些点离开了画布。

所以我必须用比率设置最小值或最大值,但两个零位之间总是有10-20 px差异。

EDIT1:

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();

0 个答案:

没有答案