flot：使所有 Y 轴的刻度线对齐

Question

我有一个浮点图，除了第一个 Y 轴外，还使用具有不同数字刻度的辅助 Y 轴。我的问题是二级刻度标签与第一个浮动轴制作的网格线不对齐。

Flot 似乎正在运行一些内部算法来决定为轴显示多少刻度标签。它对每个轴分别执行此操作，从而产生了我遇到的问题。主 Y 轴算法的第一次运行会为整个图形创建网格标记。次轴然后只显示它自己的刻度/标签，而不是它们与第一个网格线对齐。

如何使第二轴的刻度线与第一轴的刻度线/标签/网格线对齐？

一个很好的答案测试检查是改变yaxes[0].max。在我的问题中，它设置为 15，但也将其更改为 20（或任何其他会使 flot 更改网格线编号和位置的值）。

$(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>

明确指定刻度

Flot 允许您显式指定刻度，但我看不出有办法计算所需的间隙以使其工作。即，用这个硬编码的ticks 代码替换上面的第二个 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]
}

刻度线将排列。那么问题就变成了如何计算明确的刻度线

Answer 1

使用alignTicksWithAxis 选项将轴 2 上的刻度与轴 1 上的刻度对齐：

        "yaxes" : [ {
            "position" : "left",
            "min" : 0,
            "max" : 15
        }, {
            "position" : "right",
            "min" : 0,
            "max" : 75,
            "alignTicksWithAxis" : 1
        } ],

有关详细信息，请参阅Documentation（在“自定义轴”一章的末尾）。

$(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>