Image en fond de graphe

Intégration d'une image

Nos avons choisi une image pour le fond du graphe. Cette image est extraite d'une photo numérique. Les dimensions de cette image ont été ajustées approximativement à celle du graphe.

cette image doit être sauvegardée dans un endroit approprié aux images de vos graphes. Exemple, le répertoire images/rgraph/paysage.jpg

On fait appel à la propriété background.image pour indiquer l'endroit où l'image se trouve:

    .Set('background.image', '../images/rgraph/paysage.jpg')
    .Set('background.grid', false)

Au passage, on efface également le quadrillage. Résultat:

Nous constatons que notre image n'a pas été rognée, mais bien recadrée. Si les rapports des dimensions de l'image sont trop disparates, l'image sera déformée.

On peut forcer l'image à couvrir l'ensemble de canvas et pas seulement l'espace de tracé du graphe en utilisant la propriété background.image.stretch qui annule ce cadrage automatique. Exemple, script complet:

<canvas id="myCanvas" width="460" height="250px">[canvas non supporté]</canvas>
<?php 
    $labelsGraphe = "['lun','mar','mer','jeu','ven','sam','dim']";
    $datasGraphe = "[45,27,12,22,14,4,10]"; 
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $labelsGraphe; ?>)
 
            .Set('gutter.top', 25)
            .Set('ymax', 50)
            .Set('colors', ['Gradient(white:goldenrod:goldenrod:red:darkred)'])
            .Set('noaxes',true)
            .Set('background.image', '../images/rgraph/paysage.jpg')
            .Set('background.image.stretch',false)
            .Set('background.image.align','right')
            .Set('background.grid', false)
            .Set('text.color','white')
            .Draw();
        }
</script>