Wie man den Stack-Effekt zum Balkendiagramm in jQuery flot hinzufügen

Question

Ich habe ein Problem mit jquery flot

Zunächst erhielt ich die folgende Tabelle http://design2u.me/blog/example/bar/index.html

Der Code folgt:

<script type="text/javascript">
$(function () {
    // generate a dataset
        var d1 = []; d1.push([3,100]);
        var d2 = []; d2.push([3,66]);
        var d3 = []; d3.push([3,33]);

        //announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];      
        var placeholder = $("#placeholder");

        // plot it
        var plot = $.plot(placeholder, data, {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
        });
});
</script>

Allerdings muss ich die verschiedenen Teile gestapelt werden, und ich füge bereits die Eigenschaft

stack:true,

Durch Ausprobieren und Fehlersuche habe ich herausgefunden, dass ich die Plot-Funktion wie folgt ändern kann:

var plot = $.plot(placeholder, data, {
            series: {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
            }
        });

dann erhielt ich folgendes Ergebnis: http://design2u.me/blog/example/bar/index2.html

die Stäbe haben sich erfolgreich gestapelt, aber sie werden zu breit ...

Ich hoffe, die Balken nur in der Mitte, Wie kann ich dieses Problem beheben? Vielen Dank!

Answer 1

Nun, ich denke, es ist wahrscheinlich ein Fehler in Flot. Wenn Sie mehr als einen Datenpunkt pro Serie haben, würde es besser funktionieren, denke ich. Wie es ist, der einzige Weg, den ich herausfinden konnte, wie dies zu tun ist, um eine "Dummy"-Zeile hinzufügen, um die x-Achse zu zwingen, die richtige Breite und lassen Sie die Balken auf die gleiche Breite auch sein:

Fügen Sie zunächst einen neuen Datensatz zu Ihren Daten hinzu:

{
data: [[0, 0], [10, 0]],
bars: {
    show: false
},
lines: {
    show: false
}}

En [0,0] ist Ihr x-Achsen-Minimum und der [10,0] ist der Mindestwert der y-Achse.

Dann habe ich Ihre Handlungsoptionen leicht verändert, so dass Ihre $.plot Der Anruf sah folgendermaßen aus:

var plot = $.plot(placeholder, data, {
    series: {
        stack:true,
        bars: {
            show: true,
            barWidth: 1,
            fill: 0.5,
            align: 'center'
        }
    }
});

Das Ergebnis ist dieses Arbeitsbeispiel: http://jsfiddle.net/ryleyb/92v2h/

Answer 2

Ich habe einen einfachen Weg gefunden, mein Problem zu lösen.

Durch Festlegen des folgenden Codes :

//announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];  

in

//announce a dataset
        var data = [{ stack: true, data: d1, color: "#f21d1d" },{ stack: true, data: d2, color: "#1d61f2" },{ stack: true, data: d3, color: "#5bc91a" }];

und das Problem ist gelöst. Umplanung in diesem Arbeitsbeispiel : http://jsfiddle.net/divaka/q8srK/

Danke für jede Antwort.