Question

我需要将flot ticks与网格线对齐（这里已解决https://stackoverflow.com/a/27941217/2883328），但现在我还需要将我的比例设置为特定的“步骤”，例如{1，2，5，10，20 ，50，100} - 一个“圆整数”。例如，该数字不应该是2.59或13，因为它们不是“整数”。

例如，运行并观察下面的flot示例：

请注意，左侧比例是通过一些内部flot算法友好设置的。
右轴设置为通过alignTicksWithAxis选项与左刻度匹配刻度线，但它不能如此友好地缩放。即，在下面的特定情况下比例因子是13，并且是数据相关的。我需要将比例因子作为上述数字之一{1,2,5,10,20等}，图形仍然适合网格。

如何？

API谈论tickSize和minTickSize，但它们似乎没有帮助，大概是因为一旦alignTicksWithAxis开启，那些就会被关闭。理想情况下，我认为20的tickSize最适合我的例子。

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

来自API：

如果将“alignTicksWithAxis”设置为另一个轴的编号，例如 alignTicksWithAxis：1，Flot将确保自动生成的滴答声该轴的轴与另一轴的刻度线对齐。这可能改善外观，例如如果你有一个y轴到左边，一个到右边，因为网格线将匹配两者中的刻度线结束。权衡是强迫蜱不一定是自然的地方。

好吧，假设我可以控制比例的最大值，我可以强制强迫蜱在更自然的地方，但是如何控制不知道比例＃1的自然tickSize？

Answer 1

右轴的刻度距离为12.5（不是13），但它会变圆您可以使用"tickDecimals" : 1更改显示（请参阅底部的代码段）顺便说一句，你的左轴也没有整圆号码刻度距离（2.5）。

对于一般解决方案，您必须检查两个数据系列的最大值，然后自己设置轴最大值和刻度数，或者甚至设置固定的刻度数组以完全控制刻度线的生成。

像

这样的东西

if (maxValue <= 5.0) {
    tickSize = 1;
}
else if (maxValue <= 10.0) {
    tickSize = 2;
}
else if ... {
    ...
}
tickNumber = 5;
axisMaximum = tickNumber * tickSize;

$(function() {
    flotOptions = {

        "xaxis" : {
            "min" : 20,
            "max" : 63,

        },
        "yaxes" : [ {
            "position" : "left",
            "min" : 0,
            "max" : 15
        }, {
            "position" : "right",
            "min" : 0,
            "max" : 75,
            "alignTicksWithAxis" : 1,
            "tickDecimals" : 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 - 如何将比例设置为所需的数字

1 个答案: