2

Flotで生成された2つのチャートがあります。サンプルチャート

チャートのバーを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

y軸ではautoscaleMarginなく、グラフ間を変更する必要があります 。max

バーが1つある場合は、に設定し0.5ます。バーが10個ある場合は、に設定し0.05ます。の言及を取り除いてください、yaxis.maxそしてそれはそれをするべきです。

私はあなたのyaxisオブジェクトを次のように変更しましたplotOptions：

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

1本の棒グラフに必要なのはこれだけです。

$.plot2番目のグラフを呼び出す前に、次のautoscaleMarginように変更します。

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

それだけです。実際の動作を確認してください（カテゴリプラグインを除く）：http：//jsfiddle.net/ryleyb/tVmTt/

于 2013-03-27T15:31:03.633 に答える