Unterschiedliche Farbbalken für Flot Kategorien Balkendiagramm

Wie kann man eine andere Farbe für jede bar bei Verwendung der "Kategorien" - Modus, in Flot?

Dieser code macht jede bar die erste Farbe in colors array. Ich möchte die einzelnen Balken der entsprechenden Farbe in der colors array.

Aktuelle code:

var data = [["Red",1],["Yellow",2],["Green",3]];

$.plot("#placeholder1div",[data], {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        mode: "categories",
    },
    colors: ["#FF0000","#FFFF00","#00FF00"]
});

InformationsquelleAutor sixglazed | 2014-04-24

  1. 30

    Wie so oft meine Empfehlung mit Flot, löschen Sie das plugin, und konfigurieren Sie es youself.

    //separate your 3 bars into 3 series, color is a series level option
var data = [{data: [[0,1]], color: "red"}, 
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}];

$.plot("#placeholder",data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        //drop the categories plugin and label the ticks yourself
        //you'll thank me in the long run
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

    Produziert (Fidel hier):

    Unterschiedliche Farbbalken für Flot Kategorien Balkendiagramm

    Danke für die fill: .75. Ich war mit fill: true und bekam nur 50%. Nachdem ich Ihre Antwort habe ich verstanden, die Reale Nutzung fill, wo Sie die Deckkraft.

    InformationsquelleAutor Mark

  2. 5

    Wenn du deine Daten müssen Sie setzen die Farben innen:

    var data = [
    {color: '#ff00aa', data: [[0, 1]]},
    {color: 'red', data: [[1, 1]]},
    {color: 'yellow', data: [[2, 2],[3, 2]]},
    {color: 'orange', data: [[4, 2]]},
    {color: 'blue', data: [[5, 4],[6, 7]]},
    {color: '#000000', data: [[7, 1]]}
];

    InformationsquelleAutor Luiggi

Schreibe einen Kommentar