Graphique d'images en chandeliers japonais

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.

  1. Overview
  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 est utilisé pour montrer une valeur d'ouverture et de clôture en superposition sur une variance totale. Les graphiques en chandeliers japonais sont souvent utilisés pour montrer le comportement de la valeur des actions. Dans ce graphique, les éléments dont la valeur d'ouverture est inférieure à la valeur de clôture sont représentés en vert, et les éléments dont la valeur d'ouverture est supérieure à la valeur de clôture 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, où 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 spécifiant la valeur minimale/minimale du repère. Il s'agit de la base de la ligne noire.
  • Col 2:numéro spécifiant la valeur d'ouverture/initiale du repère. Il s'agit d'un bord vertical de la bougie. Si la valeur est inférieure à celle de la colonne 3, le chandelier sera vert ; sinon il sera rouge.
  • Col 3:numéro indiquant la valeur finale/de clôture du repère. Il s'agit de la deuxième bordure verticale du chandelier. Si la valeur est inférieure à celle de la colonne 2, le chandelier est rouge ; sinon il est vert.
  • Col 4:nombre spécifiant la valeur haute/maximale du repère. C'est le haut de la ligne noire.

Options de configuration

Outre les options compatibles avec 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, incluant le signe #.
showAxisLines boolean true Permet d'afficher ou non les lignes des axes. Si cette règle est définie sur "false", les libellés des axes ne sont pas non plus affichés.
taille Nombre Hauteur de l'élément parent Hauteur du graphique, en pixels. Si 30 < height ou height > 1 000,cette valeur sera définie par défaut sur 200.
max Nombre Valeur maximale des données Valeur maximale de l'axe Y.
min Nombre Valeur minimale des données Valeur minimale de l'axe Y.
showCategoryLabels boolean true Si la valeur est "false", les libellés de l'axe X sont masqués.
showValueLabels boolean true Si la valeur est "false", les libellés de l'axe Y sont masqués.
showValueLabelsInternal Nombre auto Espacement entre les étiquettes de l'axe Y, en pixels.
titre chaîne " Texte à afficher au-dessus du graphique.
largeur Nombre Largeur de l'élément conteneur Largeur du graphique, en pixels. Si la valeur width est inférieure à 30 ou supérieure à 1 000, la valeur width sera définie sur 300.

Méthodes

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

Événements

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

Règles concernant les données

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