Die Verschiebung der position der Balken in einer horizontalen Balkendiagramm Flot

Ich habe 2 charts, die generiert werden, in Flot. Die Verschiebung der position der Balken in einer horizontalen Balkendiagramm Flot

Ich würde gerne verschieben Sie den Balken im Diagramm mit 1 bar Weg von der x-Achse. Ich würde es gerne haben Lücken, die ähnlich zu der Kurve mit 10 bars. Zum Beispiel, gibt es eine einfachere Art und Weise angeben, dass ich will, dass die bar um 10 Pixel entfernt von der y-Achse?

Dies ist der code, der generiert diese charts:

<!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>
InformationsquelleAutor CadentOrange | 2013-03-27
Schreibe einen Kommentar