问题
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 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>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 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]
}
The ticks will line up. Question then becomes How to compute explicit tick marks
回答1:
Use the 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
} ],
See the Documentation for more information (at the end of the "Customizing the axes" chapter).
$(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>来源：https://stackoverflow.com/questions/27926261/flot-make-ticks-line-up-for-all-y-axis