Cette page a été traduite par l'API Cloud Translation.

Visualisation: Sparkline (image)

Important:La section "Graphiques d'images" de Google Outils de création de graphiques a été officiellement abandonnée depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

Overview
Exemple
Loading
Format des données
Options de configuration
Méthodes
Événements
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

N'importe quel nombre de colonnes. Toutes les colonnes doivent contenir des nombres. Chaque colonne s'affiche sous la forme d'une courbe sparkline unique.

Options de configuration

Nom	Type	Par défaut	Description
color	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.
colors	Tableau de chaînes	Couleurs par défaut	Couleurs à utiliser pour les colonnes de données. Tableau de chaînes où 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 sélection des couleurs est enveloppée.
fill	boolean	false	Si la valeur est "true", la zone située sous la ligne est remplie en couleur.
taille	Nombre	Hauteur du conteneur	Hauteur des images, en pixels.
labelPosition	chaîne	none	La position des étiquettes. Les valeurs acceptées sont "none", "left" et "right".
max	Tableau de nombres	Valeur de données maximale de chaque graphique sparkline	Valeur la plus élevée de la plage de valeurs de données de chaque graphique sparkline. L'index du tableau doit correspondre à l'index de colonne de la table de données. Si toutes les valeurs sont nulles, il s'agira de la valeur maximale dans la série.
min	Tableau de nombres	Valeur de données minimale de chaque graphique sparkline	Valeur la plus faible de la plage de valeurs de données de chaque graphique sparkline. L'index du tableau doit correspondre à l'index de colonne de la table de données. Si toutes les valeurs sont nulles, il s'agira de la valeur minimale de la série.
showAxisLines	boolean	true	Si la valeur est "true", les lignes des axes sont affichées. Si la valeur est "false", ce n'est pas le cas, et la valeur par défaut de showValueLibellés est "false".
showValueLabels	boolean	"true", sauf lorsque "showAxisLines" est défini sur "false".	Si la valeur est "true", les libellés de l'axe des valeurs sont affichés.
titre	Tableau de chaînes	Aucun titre n'est affiché	Titres à utiliser pour chaque graphique sparkline.
largeur	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	Permet de dessiner 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 du graphique sparkline sélectionné. Peut renvoyer plusieurs colonnes sélectionnées.
`setSelection(selection)`	none	Sélectionne les graphiques sparkline spécifiés et désélectionne ceux qui ne sont pas spécifiés. La sélection est un tableau d'objets, chacun avec une propriété numérique `column`, qui correspond à l'index du graphique sparkline sélectionné. Pour en savoir plus, consultez `setSelection()`.

Événements

Nom	Description	Propriétés
select	Événement standard.	Aucun

Règles concernant les données

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