HTML5 / CSS 2.x/3 / PHP / MySQL ...

Modifier les couleurs des graphes RGRAPH

La couleur des barres d'un graphe sont déterminées par la propriété colors

Choix d'une couleur unie

On passe à colors un tableau contenant une ou plusieurs valeurs. Exemple de passage d'une valeur:

    .Set('colors', ['#cf76a0'])
notre graphe de base en mauve

Le script complet:

<canvas id="myCanvas" width="500" height="250px">[canvas non supporté]</canvas>
<?php 
    $datasGraphe = "[25,32,18,95,17,4,1,37,18,40,22,65]"; 
    $labelsGraphe = "['jan','fev','mar','avr','mai','jun',"
    . "'jul','aou','sep','oct','nov','dec']";
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $labelsGraphe; ?>)
            .Set('colors', ['#cf76a0'])
            .Draw();
        }
</script>

la couleur peut aussi être désignée par son nom:

    .Set('colors', ['violet'])

Sélection de plusieurs couleurs

Pour des graphes à deux colonnes, on indiquera deux couleurs:

    .Set('colors', ['violet','green'])
graphe à deux barres

Le script complet:

<canvas id="myCanvas" width="500" height="250px">[canvas non supporté]</canvas>
<?php 
    $datasGraphe = "[[45,22],[27,54],[12,30],[22,75],[14,66],[4,25],[10,41],"
    . "[17,32],[8,61],[10,55],[22,20],[55,12]]"; 
    $labelsGraphe = "['jan','fev','mar','avr','mai','jun',"
    . "'jul','aou','sep','oct','nov','dec']";
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $labelsGraphe; ?>)
            .Set('colors', ['violet','green'])
            .Draw();
        }
</script>

Si vous indiquez plus de couleurs que de barres, les couleurs supplémentaires seront ignorées. Exemple:

    .Set('colors', ['violet','green','cyan','orange'])

Les deux couleurs cyan et orange seront ignorées.

Couleurs dégradées

Les couleurs en dégradé exploitent le nouvel attribut de couleur Gradient similaire à celui de CSS3.

    .Set('colors', ['Gradient(#cfcfcf:blue)'])
graphe avec dégradé sur deux couleurs

L'attribut Gradient a comme paramètres plusieurs couleurs, ici deux couleurs:

La première couleur sera celle qui part du bas, la dernière couleur celle qui sera au sommet du graphe.

Si on rajoute des couleurs dans le dégradé, les dégradés seront dessinés dans l'ordre de déclaration des couleurs. Vous pouvez réaliser des dégradés sur trois, quatre ou plus de couleurs.

Exemple de dégradé sur trois couleurs, avec un premier dégradé suggérant le drapeau français, le second le drapeau belge:

    .Set('colors', ['Gradient(red:white:blue)','Gradient(red:yellow:black)'])
graphe avec deux dégradés

Couleur des textes, axes et quadrillage

Il est possible de modifier la couleur des texte, axes et quadrillage:

    .Set('colors', ['Gradient(red:cyan:cyan:black)'])
    .Set('axis.color','red')
    .Set('text.color','red')
    .Set('background.grid.color','red')
graphe avec texte et axes en rouge

Ici nous avons agi simultanément sur trois propriétés:

Allons plus loin en mettant une image en fond de graphe

Tous les articles sur ce thème