Les différentes Barres de Couleur pour le Flot des Catégories de Graphique à barres

Comment pouvez-vous avoir une couleur différente pour chaque barre lors de l'utilisation de la "catégories" mode à Flot?

Ce code fait tous les bars de la première couleur colors tableau. J'aimerais que chaque barre de la couleur correspondante dans la colors tableau.

Code actuel:

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"]
});

OriginalL'auteur sixglazed | 2014-04-24

  1. 30

    Comme c'est souvent ma recommandation avec Flot, déposer le plugin et de le configurer en place vous-même.

    //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"]]
    }
});

    Produit (violon ici):

    Les différentes Barres de Couleur pour le Flot des Catégories de Graphique à barres

    Merci pour le fill: .75. J'ai été en utilisant fill: true a 50%. Après avoir vu votre réponse, j'ai compris que l'utilisation réelle de fill, où vous indiquez le degré d'opacité.

    OriginalL'auteur Mark

  2. 5

    Quand vous mettez vos données, vous devez mettre les couleurs à l'intérieur:

    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]]}
];

    OriginalL'auteur Luiggi