Graphique d'images en chandeliers japonais

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

Graphique en chandeliers japonais affiché sous forme d'image à l'aide de l'API Google Charts

Un graphique en chandeliers japonais permet de superposer une valeur d'ouverture et de fermeture sur une variance totale. Les graphiques en chandeliers japonais sont souvent utilisés pour illustrer le comportement de valeurs boursières. Dans ce graphique, les éléments dont la valeur d'ouverture est inférieure à la valeur de fermeture sont indiqués en vert, tandis que les éléments dont la valeur d'ouverture est supérieure à la valeur de fermeture sont représentés en rouge. Pour en savoir plus, consultez la documentation sur les chandeliers dans l'API Google Charts.

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:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Chargement...

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

  google.charts.load('current', {packages: [imagechart]});

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

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

Format des données

Cinq colonnes, dont chaque ligne décrit un seul chandelier:

  • Col 0 : chaîne utilisée comme libellé pour ce repère sur l'axe X.
  • Col 1:nombre indiquant la valeur minimale/minimale de ce repère. Il s'agit de la base de la ligne noire.
  • Col 2 : nombre indiquant la valeur d'ouverture/initiale de ce repère. Il s'agit d'une bordure verticale du chandelier. Si elle est inférieure à la valeur de la colonne 3, le chandelier est vert, sinon il est rouge.
  • Col 3:nombre indiquant la valeur de fermeture/finale de ce repère. Il s'agit de la deuxième bordure verticale du chandelier. Si elle est inférieure à la valeur de la colonne 2, le chandelier est rouge, sinon il est vert.
  • Col 4 : nombre indiquant la valeur haute/maximale de ce repère. Il s'agit du haut de la ligne noire.

Options de configuration

En plus des options disponibles dans le Graphique d'images génériques, le graphique en chandeliers japonais accepte les options suivantes:

Nom Type Par défaut Description
backgroundColor chaîne "#FFFFFF" (blanc) Couleur d'arrière-plan du graphique. Il s'agit d'une chaîne #RRGGBB comprenant le signe #.
showAxisLines booléen true Indique s'il faut afficher les lignes des axes. S'il est défini sur "false", les libellés de l'axe ne s'affichent pas non plus.
hauteur number (nombre) Hauteur de l'élément conteneur Hauteur du graphique, en pixels. Si 30 < height ou height > 1 000,cette valeur est définie par défaut sur 200.
max number (nombre) Valeur maximale des données Valeur maximale de l'axe Y.
min number (nombre) Valeur minimale des données Valeur minimale de l'axe Y.
showCategoryLabels booléen true Si la valeur est "false", les libellés de l'axe X sont masqués.
showValueLabels booléen true Si la valeur est "false", les libellés de l'axe Y sont masqués.
showValueLabelsInternal number (nombre) auto Espacement, en pixels, entre les libellés de l'axe Y.
title chaîne '' Texte à afficher au-dessus du graphique.
largeur number (nombre) Largeur de l'élément conteneur Largeur du graphique, en pixels. Si width est inférieur à 30 ou supérieur à 1 000, alors width sera défini sur 300.

Méthodes

Méthode Type renvoyé Description
draw(data, options) none Dessine le graphique.

Événements

Vous pouvez vous inscrire pour écouter les événements décrits sur la page Graphique d'images génériques.

Règles relatives aux données

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