Visualisation: Sparkline (image)

Important:La section "Graphiques d'images" des outils Google Charts est officiellement obsolète depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

  1. Présentation
  2. Exemple
  3. Loading
  4. Format des données
  5. Options de configuration
  6. Méthodes
  7. Événements
  8. Règles concernant les données

Présentation

Un ou plusieurs graphiques sparkline affichés avec des images à l'aide de l'API Google Charts. Les images sont contenues dans un tableau HTML.

Exemple

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Chargement...

Le nom du package google.charts.load est "imagesparkline". 

  google.charts.load("current", {packages: ["imagesparkline"]});

Le nom de classe de la visualisation est google.visualization.ImageSparkLine. 

  var visualization = new google.visualization.ImageSparkLine(container);

Format des données

Un nombre illimité de colonnes. Toutes les colonnes doivent être des nombres. Chaque colonne s'affiche sous la forme d'une courbe expresse unique.

Options de configuration

Nom Type Par défaut Description
couleur chaîne Spécifie une couleur à utiliser pour tous les graphiques. Chaîne au format #rrggbb. Par exemple, "#00cc00". Utilisé uniquement si l'option colors n'est pas spécifiée.
couleurs Tableau de chaînes Couleurs par défaut Couleurs à utiliser pour les colonnes de données. Tableau de chaînes dans lequel chaque élément est une chaîne au format #rrggbb. Par exemple, "#00cc00". La couleur i est utilisée pour la colonne de données i. Si le nombre de couleurs est inférieur au nombre de colonnes, la couleur sera sélectionnée.
fill booléen false Si la valeur est définie sur "true", la couleur est appliquée à la zone située sous la ligne.
hauteur number (nombre) Hauteur du conteneur Hauteur des images, en pixels.
labelPosition chaîne none Position des libellés. Valeurs acceptées : "none", "left" et "right".
max Tableau de nombres Valeur maximale des données de chaque courbe expresse Valeur la plus élevée pour la plage de valeurs de données de chaque courbe expresse. L'index du tableau doit correspondre à l'index de colonne du tableau de données. Si toutes les valeurs sont nulles, il s'agit de la valeur maximale de la série.
min Tableau de nombres Valeur de données minimale de chaque courbe expresse Valeur la plus faible de la plage de données de chaque courbe expresse. L'index du tableau doit correspondre à l'index de colonne du tableau de données. Si toutes les valeurs sont nulles, il s'agira de la valeur minimale de la série.
showAxisLines booléen true Si la valeur est "true", les lignes de l'axe s'affichent. Si la valeur est "false", ce n'est pas le cas et la valeur par défaut de "showValueLabels" est "false".
showValueLabels booléen true, sauf si showAxisLines est faux. Si la valeur est "true", les libellés de l'axe des valeurs sont affichés.
title Tableau de chaînes Aucun titre n'est affiché Titres à utiliser pour chaque courbe expresse.
largeur number (nombre) Largeur du conteneur Largeur des graphiques, en pixels.
mise en page chaîne "v" Mise en page verticale ou horizontale : "v" pour vertical, "h" pour horizontal.

Méthodes

Méthode Type renvoyé Description
draw(data, options) none Dessine le graphique.
getSelection() Tableau d'éléments de sélection Renvoie les index des graphiques sélectionnés sous forme de tableau d'objets. Chaque objet possède une propriété de colonne contenant le numéro de colonne d'une courbe expresse sélectionnée. Peut renvoyer plusieurs colonnes sélectionnées.
setSelection(selection) none Sélectionne les courbes expresses spécifiées et désélectionne celles qui ne sont pas spécifiées. sélection est un tableau d'objets, chacun avec une propriété numérique column, qui correspond à l'index de la courbe expresse sélectionnée. Pour plus d'informations, consultez setSelection().

Événements

Nom Description Propriétés
select Événement de sélection standard. Aucune

Règles relatives aux données

Veuillez consulter les Règles de journalisation de l'API Chart.