2

我有 2 个在 Flot 中生成的图表。示例图表

我想将图表中的条形图移离 x 轴 1 个条形图。我希望它有类似于带有 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>
4

1 回答 1

3

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

当您有 1 个小节时，将其设置为0.5. 当您有 10 个小节时，将其设置为0.05. 删除任何提及yaxis.max，应该这样做。

我将您的 yaxis 对象更改为如下所示plotOptions：

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

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

在调用$.plot第二张图之前，更改autoscaleMargin如下：

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

就是这样，看看它的实际效果（减去类别插件）：http: //jsfiddle.net/ryleyb/tVmTt/

于 2013-03-27T15:31:03.633 回答