Question

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

Flot似乎正在运行一些内部算法来决定要为轴显示多少刻度标签。它为每个轴单独执行，从而产生了我遇到的问题。主Y轴算法的第一次运行为整个图形创建网格标记。辅助轴然后只显示它自己的刻度/标签，而不用它们排列第一个网格线。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

明确指定蜱虫

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>

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

1 个答案: