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'])

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'])

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)'])

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

• #cfcfcf qui est un gris très clair
• blue qui est le bleu standard

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)'])

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')

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

• axis.color
• text.color
• background.grid.color

Allons plus loin en mettant une image en fond de graphe