Question

我有两个在Flot中生成的图表。 Sample charts

我想在图表中移动距离x轴1 bar的条形图。我希望它的间隙类似于10个条形图。例如，是否有更简单的方法来指定我希望条与y轴相距10个像素？

这是生成这些图表的代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" language="javascript" src="./flot/jquery-1.8.2.js"></script>
    <script type="text/javascript" language="javascript" src="./flot/jquery.flot.js"></script>
    <script type="text/javascript" language="javascript" src="./flot/jquery.flot.categories.js"></script>
    <style type="text/css">
        .graph-container.store-container {
            height: 180px !important;
        }
        .graph-container.operator-container {
            height: 450px !important;
        }

        #top-stores-plot-numbers {
            height: 70px !important;
        }
        #top-operators-plot-numbers {
            height: 340px !important;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            var plotOptions = {
                legend: {
                    show: false
                },
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.7,
                        align: "center",
                        horizontal: true
                    }
                },
                yaxis: {
                    mode: "categories",
                    tickLength: 2,
                    axisMargin: 10,
                    autoscaleMargin: 0.05
                },
                xaxis: {
                    autoscaleMargin:0.1,
                    min: 0,
                    ticks: 2
                }
            };

            var sn_data = [
                    [ 6087, "ACME Store"],
            ];
            var sn_ticks = [
                    [ 0, "ACME Store"],
            ];
            var sn_options = plotOptions;
            sn_options["yaxis"]["ticks"] = sn_ticks;
            sn_options["yaxis"]["max"] = 1;
            $.plot("#top-stores-plot-numbers", [ sn_data ], sn_options);

            var on_data = [
                    [ 50, "CRISTINA"],
                    [ 68, "CASHIER2"],
                    [ 96, "MIESZKO"],
                    [ 115, "CASHIER1"],
                    [ 209, "TRAINING 1"],
                    [ 379, "JADE"],
                    [ 640, "HOST1"],
                    [ 711, "CAROLINA"],
                    [ 795, "SUPERVISER"],
                    [ 1376, "TRAINING"],
            ];
            var on_ticks = [
                    [ 0, "CRISTINA"],
                    [ 1, "CASHIER2"],
                    [ 2, "MIESZKO"],
                    [ 3, "CASHIER1"],
                    [ 4, "TRAINING 1"],
                    [ 5, "JADE"],
                    [ 6, "HOST1"],
                    [ 7, "CAROLINA"],
                    [ 8, "SUPERVISER"],
                    [ 9, "TRAINING"],
            ];
            var on_options = plotOptions;
            on_options["yaxis"]["ticks"] = on_ticks;
            on_options["yaxis"]["max"] = 10;
            $.plot("#top-operators-plot-numbers", [on_data], on_options);
        });
    </script>
</head>
<body>
    <div class="graph-container store-container">
        <h2>Top 10 by Number</h2>
        <div id="top-stores-plot-numbers" class="graph-placeholder"></div>
    </div>
    <div class="graph-container operator-container">
        <h2>Top 10 by Number</h2>
        <div id="top-operators-plot-numbers" class="graph-placeholder"></div>
    </div>
</body>
</html>

Answer 1

您需要更改图表之间的autoscaleMargin，而不是y轴的max。

如果您有1个小节，请将其设为0.5。如果有10个小节，请将其设置为0.05。请注意提及yaxis.max，并且应该这样做。

我在plotOptions中将yaxis对象更改为这样：

            yaxis: {
                mode: "categories",
                tickLength: 2,
                autoscaleMargin: 0.5
            }

这就是1条形图所需的全部内容。

在为第二张图表调用$.plot之前，请更改autoscaleMargin，如下所示：

            on_options["yaxis"]["autoscaleMargin"] = 0.05;

就是这样，看看它在行动中（减去类别插件）：http://jsfiddle.net/ryleyb/tVmTt/

在Flot的水平条形图中移动条的位置

1 个答案: