flot：使所有Y轴的刻度线对齐 [英] flot: make ticks line up for all Y axis
问题描述
除了第一个Y轴之外，我还有一个浮点图，它使用第二个Y轴和一个不同的数字刻度。我的问题是，次级刻度标签不能与第一个FLOT轴形成的网格线对齐。
Flot似乎正在运行一些内部算法来决定如何许多刻度标签要显示为一个轴。它对每个轴都是分开的，从而产生我遇到的问题。主Y轴算法的第一次运行会为整个图形创建网格标记。第二轴然后只显示它自己的刻度/标签，而不会与第一个轴的网格线对齐。
如何使辅助轴的刻度线与第一轴的刻度线/标签/网格线？
一个好的测试检查答案是改变 yaxes [0]。最大。在我的问题中，它被设置为15，但也将其更改为20（或任何其他值将使flot更改网格行号和位置）。
< script src =http://www.flotcharts.org/flot/jquery.js>< / script>< script src =http：// www.flotcharts.org/flot/jquery.flot.js\"></script><h1>Flot示例< / h1>< div id =placeholderstyle =width：600px; height：300px; >< / div>
$ b
显式
Flot允许您明确指定刻度，但我无法计算所需的差距以使其工作。也就是说，用这个硬编码 ticks 代码替换上面的2nd_Y_axis块：
{
position：right，
min：0，
max：75，
ticks：[0,8.1,16.3,24.4 ，32.6，40.7，48.9，57.1，65.2，73.3]
}
排队。然后问题变成如何计算明确的刻度标记 使用 请参阅 Documentation 获取更多信息（在自定义坐标轴一章的最后）。 I have a flot graph that in addition to the first Y axis, uses secondary Y axis with a different number scale. My problem is that the secondary scale labels does not line up with the grid lines made by the first flot axis. Flot seems to be running some internal algorithm to decide on how many tick labels to display for an axis. It does so separately for each axis, creating the issue I am having. The first run of the algorithm for the primary Y axis creates grid marks for the entire graph. Secondary axis then just displays its own ticks/labels without them lining up with the grid lines made by the first. How do I make tick lines of secondary axis line up with the ticks/labels/grid lines of the first axis? A good test-check for an answer is to vary the
Specifying Ticks Explicitly Flot allows you to specify ticks explicitly, but I see no way to compute the needed gap for this to work. Namely, replace the 2ndary Y_axis block above with this hardcoded The ticks will line up. Question then becomes How to compute explicit tick marks Use the See the Documentation for more information (at the end of the "Customizing the axes" chapter).
这篇关于flot：使所有Y轴的刻度线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ alignTicksWithAxis 使用
yaxes： [{
position：left，
min：0，
max：15
}，{
position：right ，
min：0，
max：75，
alignTicksWithAxis：1
}]，
$（function（）{flotOptions = { xaxis：{min：20，max：63，}，yaxes：[{position：left，min：0，max：15}，{position right，min：0，max：75，alignTicksWithAxis：1}]，colors：[＃EAA433，＃32A2FA]，}; flotData = [{data：[[20.61,12.52]，[27.82,12.35]，[35.04,11.89]，[42.25,11.19]，[49.47,10.28]，[56.68,9.176]，[62.09,8.246] [61.84,8.289]]，yaxis：1}，{data：[[20.61,59.37]，[27.82,66.57]，[35.04,70.58]，[42.25,71.79]，[49.47,70.59] ，[56.68,67.36]，[62.09,63.83]，[61.84,64.00]]，yaxis：2，}，{data：[[20.61,20.61]，[28.85,28.85]，[37.10,37.10 ]，[45.34,45.34]，[53.59,53.59]，[61.83,61.83]]，}]; var plot = $ .plot（$（＃placeholder），flotData，flotOptions）;}）;
< script src =http://www.flotcharts.org/flot/jquery.js>< / script>< script src =http：// www.flotcharts.org/flot/jquery.flot.js\"></script><h1>Flot示例< / h1>< div id =placeholderstyle =width：600px; height：300px; >< / div> yaxes[0].max. In my question it is set to 15, but also change it to 20 (or any other value that will make flot change the grid line number and position). $(function() {
flotOptions = {
"xaxis" : {
"min" : 20,
"max" : 63,
},
"yaxes" : [ {
"position" : "left",
"min" : 0,
"max" : 15
}, {
"position" : "right",
"min" : 0,
"max" : 75,
} ],
"colors" : [ "#EAA433", "#32A2FA"],
};
flotData = [
{
"data" : [ [ 20.61, 12.52 ], [ 27.82, 12.35 ], [ 35.04, 11.89 ], [ 42.25, 11.19 ], [ 49.47, 10.28 ], [ 56.68, 9.176 ], [ 62.09, 8.246 ], [ 61.84, 8.289 ] ],
"yaxis" : 1
},
{
"data" : [ [ 20.61, 59.37 ], [ 27.82, 66.57 ], [ 35.04, 70.58 ], [ 42.25, 71.79 ], [ 49.47, 70.59 ], [ 56.68, 67.36 ], [ 62.09, 63.83 ], [ 61.84, 64.00 ] ],
"yaxis" : 2,
},
{
"data" : [ [ 20.61, 20.61 ], [ 28.85, 28.85 ], [ 37.10, 37.10 ], [ 45.34, 45.34 ],[ 53.59, 53.59 ], [ 61.83, 61.83 ] ],
} ];
var plot = $.plot($("#placeholder"), flotData, flotOptions);
});<script src="http://www.flotcharts.org/flot/jquery.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>ticks code:{
"position" : "right",
"min" : 0,
"max" : 75,
"ticks": [0, 8.1, 16.3, 24.4, 32.6, 40.7, 48.9, 57.1, 65.2, 73.3]
}
alignTicksWithAxis option to align the ticks on axis 2 with the ticks on axis 1: "yaxes" : [ {
"position" : "left",
"min" : 0,
"max" : 15
}, {
"position" : "right",
"min" : 0,
"max" : 75,
"alignTicksWithAxis" : 1
} ],
$(function() {
flotOptions = {
"xaxis" : {
"min" : 20,
"max" : 63,
},
"yaxes" : [ {
"position" : "left",
"min" : 0,
"max" : 15
}, {
"position" : "right",
"min" : 0,
"max" : 75,
"alignTicksWithAxis" : 1
} ],
"colors" : [ "#EAA433", "#32A2FA"],
};
flotData = [
{
"data" : [ [ 20.61, 12.52 ], [ 27.82, 12.35 ], [ 35.04, 11.89 ], [ 42.25, 11.19 ], [ 49.47, 10.28 ], [ 56.68, 9.176 ], [ 62.09, 8.246 ], [ 61.84, 8.289 ] ],
"yaxis" : 1
},
{
"data" : [ [ 20.61, 59.37 ], [ 27.82, 66.57 ], [ 35.04, 70.58 ], [ 42.25, 71.79 ], [ 49.47, 70.59 ], [ 56.68, 67.36 ], [ 62.09, 63.83 ], [ 61.84, 64.00 ] ],
"yaxis" : 2,
},
{
"data" : [ [ 20.61, 20.61 ], [ 28.85, 28.85 ], [ 37.10, 37.10 ], [ 45.34, 45.34 ],[ 53.59, 53.59 ], [ 61.83, 61.83 ] ],
} ];
var plot = $.plot($("#placeholder"), flotData, flotOptions);
});<script src="http://www.flotcharts.org/flot/jquery.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
