web-dev-qa-db-fra.com

Barres de couleurs différentes pour le graphique à barres des catégories Flot

Comment pouvez-vous avoir une couleur différente pour chaque barre lorsque vous utilisez le mode "catégories" dans Flot?

Ce code fait de chaque barre la première couleur du tableau colors. Je voudrais que chaque barre soit la couleur correspondante dans le tableau colors.

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

Comme souvent avec ma recommandation avec Flot, déposez le plugin et configurez-le 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 ):

enter image description here

31
Mark

Lorsque 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]]}
];
5
Luiggi

Utilisez la configuration ci-dessous 

// Colors 
var color01 = '#00cde2';
var color02 = '#ffb700';
var color03 = '#7ac70c';
var color04 = '#313541';
var color05 = '#fc3232';
var color06 = '#1cb0f6';
var color07 = '#00c07f';

var data = [
            {data: [[0, 4.1]], color: color01},
            {data: [[1, 1.8]], color: color02},
            {data: [[2, 2]], color: color03},
            {data: [[3, 4.5]], color: color04},
            {data: [[4, 3.7]], color: color05},
            {data: [[5, 5.6]], color: color06},
            {data: [[6, 2.6]], color: color07}
        ];

        $.plot($("#placeholder"), data, {
            series: {
                lines: {
                    fill: false
                },
                points: {show: false},
                bars: {
                    show: true,
                    align: 'center',
                    barWidth: 0.5,
                    fill: 1,
                    lineWidth: 1
                }
            },
            xaxis: {
                tickLength: 0,
                ticks: [
                    [0, "Data One"],
                    [1, "Data Two"],
                    [2, "Data Three"],
                    [3, "Data Four"],
                    [4, "Data Five"],
                    [5, "Data Six"],
                    [6, "Data Seven"]]
            },
            yaxis: {
                min: 0
            },
            grid: {
                hoverable: true,
                backgroundColor: {
                    colors: ["#fff", "#fff"]
                },
                borderWidth: {
                    top: 1,
                    right: 1,
                    bottom: 2,
                    left: 2
                },
                borderColor: {
                    top: "#e5e5e5", 
                    right: "#e5e5e5",
                    bottom: "#a5b2c0",
                    left: "#a5b2c0"
                }
            }
        });
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
#placeholder{
    font-family: 'Open Sans', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<div id="placeholder" style="width:100%; height: 300px"></div>

0
Prakasam