Visualisation: Diagramme à colonnes

Présentation

Un graphique à colonnes est un graphique à barres verticales affiché dans le navigateur à l'aide du format SVG ou VML, selon le cas. Comme tous les graphiques Google, les graphiques à colonnes affichent des info-bulles lorsque l'utilisateur passe la souris sur les données. Pour une version horizontale de ce graphique, consultez le graphique à barres.

Exemples

Colorer des colonnes

Examinons les densités de quatre métaux précieux:

Au-dessus, toutes les couleurs sont affichées en bleu par défaut. car ils font tous partie de la même série. S'il y avait une deuxième série, celle-ci aurait été rouge. Vous pouvez personnaliser ces couleurs avec le rôle de style:

Il existe trois façons de choisir les couleurs. Notre tableau de données les présente toutes: valeurs RVB, noms de couleurs en anglais et déclaration de type CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Styles de colonnes

Le rôle de style vous permet de contrôler plusieurs aspects de l'apparence des colonnes avec des déclarations de type CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Nous vous recommandons de ne pas mélanger les styles trop librement au sein d'un graphique. Choisissez un style et conservez-le, mais voici un exemple pour illustrer tous les attributs de style:

Les deux premières colonnes utilisent chacune une valeur color spécifique (la première avec un nom anglais, la deuxième avec une valeur RVB). Aucun paramètre opacity n'a été choisi. La valeur par défaut de 1, 0 (entièrement opaque) est donc utilisée. C'est pourquoi la deuxième colonne masque le quadrillage en arrière-plan. Dans la troisième colonne, un opacity de 0,2 est utilisé, ce qui révèle le quadrillage. Dans le quatrième, trois attributs de style sont utilisés : stroke-color et stroke-width pour dessiner la bordure, et fill-color pour spécifier la couleur du rectangle à l'intérieur. La colonne la plus à droite utilise également stroke-opacity et fill-opacity pour choisir les opacités pour la bordure et le remplissage:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Attribuer des libellés aux colonnes

Les graphiques sont associés à plusieurs types de libellés : ticks, légendes et libellés dans les info-bulles. Dans cette section, nous allons voir comment placer des libellés à l'intérieur (ou à proximité) de colonnes dans un graphique à colonnes.

Supposons que nous voulions annoter chaque colonne avec le symbole chimique approprié. Pour ce faire, vous pouvez utiliser le rôle annotation:

Dans notre tableau de données, nous définissons une nouvelle colonne avec { role: 'annotation' } pour contenir nos libellés de colonne:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Bien que les utilisateurs puissent passer la souris sur les colonnes pour afficher les valeurs de données, vous pouvez également les inclure dans les colonnes elles-mêmes:

C'est un peu plus compliqué qu'il ne devrait l'être, car nous créons une DataView pour spécifier l'annotation de chaque colonne.

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Si vous souhaitez formater la valeur différemment, vous pouvez définir un formateur et l'encapsuler dans une fonction comme celle-ci:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Nous pourrions alors l'appeler avec calc: getValueAt.bind(undefined, 1).

Si le libellé est trop grand pour tenir entièrement dans la colonne, il s'affiche à l'extérieur:

Graphiques à colonnes empilées

Un graphique à colonnes empilées est un graphique en colonnes qui place les valeurs associées les unes au-dessus des autres. S'il existe des valeurs négatives, elles sont empilées dans l'ordre inverse sous la référence du graphique. Il est généralement utilisé lorsqu'une catégorie se divise naturellement en composants. Par exemple, considérons des ventes de livres hypothétiques, divisées par genre et comparées au fil du temps:

Pour créer un graphique à colonnes empilées, définissez l'option isStacked sur true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

Les graphiques à colonnes empilées sont également compatibles avec l'empilement à 100 %, où les piles d'éléments de chaque valeur de domaine sont redimensionnées de manière à atteindre un total de 100%. Pour ce faire, vous disposez des options suivantes : isStacked: 'percent', qui met en forme chaque valeur sous la forme d'un pourcentage de 100%, et isStacked: 'relative', qui met en forme chaque valeur sous la forme d'une fraction de 1. Il existe également une option isStacked: 'absolute', fonctionnellement équivalente à isStacked: true.

Notez que dans le graphique empilé 100% à droite, les valeurs de tick sont basées sur l'échelle relative 0-1 en tant que fractions de 1, mais les valeurs de l'axe sont affichées en pourcentage. En effet, les graduations des axes en pourcentage sont le résultat de l'application d'un format "#.## %" aux valeurs relatives de l'échelle 0-1. Lorsque vous utilisez isStacked: 'percent', veillez à spécifier les graduations/valeurs d'axe en utilisant l'échelle relative 0-1.

Empilé
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
100% empilés
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Créer des graphiques à colonnes Material

En 2014, Google a annoncé l'introduction de consignes destinées à offrir un aspect général pour les propriétés et applications (telles que les applications Android) qui s'exécutent sur les plates-formes Google. C'est ce que nous appelons le Material Design. Nous vous fournirons des versions "Material" de tous nos graphiques principaux. N'hésitez pas à les utiliser si vous les appréciez.

La création d'un graphique à colonnes Material est semblable à la création d'un graphique à colonnes "classique". Vous allez charger l'API Google Visualization (avec le package 'bar' au lieu du package 'corechart'), définir votre table de données, puis créer un objet (mais avec la classe google.charts.Bar au lieu de google.visualization.ColumnChart).

Les graphiques à barres et les graphiques à colonnes étant essentiellement identiques, nous appelons les deux graphiques à barres Material, que les barres soient verticales (classiquement, un graphique à colonnes) ou horizontales (graphique à barres). Dans Material Design, la seule différence réside dans l'option bars. Lorsque ce paramètre est défini sur 'horizontal', l'orientation ressemble à celle du graphique à barres classique classique. Sinon, les barres sont verticales.

Remarque : Les Material Charts ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec le format SVG, ce qui est requis par Material Charts).

Les graphiques à colonnes Material présentent de nombreuses petites améliorations par rapport aux graphiques à colonnes classiques, y compris une palette de couleurs améliorée, des angles arrondis, une mise en forme plus claire des libellés, un espacement par défaut plus serré entre les séries, des lignes et des titres plus souples (et l'ajout de sous-titres).

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Les Material Charts sont disponibles en version bêta. L'apparence et l'interactivité sont en grande partie définitives, mais de nombreuses options disponibles dans les graphiques classiques ne sont pas encore disponibles. Vous trouverez la liste des options qui ne sont pas encore disponibles dans ce problème.

Par ailleurs, la façon dont les options sont déclarées n'est pas définitive. Par conséquent, si vous utilisez l'une des options de la version classique, vous devez la convertir en options "Material" en remplaçant la ligne suivante :

chart.draw(data, options);

... par ceci :

chart.draw(data, google.charts.Bar.convertOptions(options));

L'utilisation de google.charts.Bar.convertOptions() vous permet de bénéficier de certaines fonctionnalités, telles que les options prédéfinies hAxis/vAxis.format.

Graphiques bidirectionnels

Vous souhaiterez peut-être afficher deux séries dans un graphique à colonnes, avec deux axes Y indépendants : un axe gauche pour une série et un axe droit pour une autre.

Notez que non seulement nos deux axes Y sont étiquetés différemment ("parsecs" et "apparent magnitude") et chacun possède ses propres échelles et lignes de quadrillage indépendantes. Si vous souhaitez personnaliser ce comportement, utilisez les options vAxis.gridlines.

Dans le code ci-dessous, les options axes et series spécifient l'apparence bi-y du graphique. L'option series spécifie l'axe à utiliser pour chaque valeur ('distance' et 'brightness'. Ils n'ont pas besoin de lien avec les noms de colonnes du tableau de données). L'option axes transforme ensuite ce graphique en un double graphique Y, en plaçant l'axe 'distance' à gauche (identifié par "parsecs") et l'axe 'brightness' à droite (nommé "magnitude apparente").

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

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Top X

Remarque : Les axes X ne sont disponibles que pour les graphiques Material (ceux comportant le package bar).

Si vous souhaitez ajouter les libellés et le titre de l'axe X en haut de votre graphique plutôt qu'en bas, vous pouvez le faire dans les graphiques Material Design avec l'option axes.x:

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Chargement...

Le nom du package google.charts.load est "corechart". Le nom de classe de la visualisation est google.visualization.ColumnChart.

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.ColumnChart(container);

Pour les graphiques à colonnes Material, le nom du package google.charts.load est "bar". (Il ne s'agit pas d'une faute de frappe. Le graphique à barres Material gère les deux orientations.) Le nom de classe de la visualisation est google.charts.Bar. (Ce n'est pas une faute de frappe: le graphique à barres Material gère les deux orientations.)

  google.charts.load("current", {packages: ["bar"]});
  var chart = new google.charts.Bar(container);

Format des données

Chaque ligne du tableau représente un groupe de barres adjacentes.

Lignes : chaque ligne du tableau représente un groupe de barres.

Columns:

  Colonne 0 Colonne 1 Colonne N
Objectif : Valeurs de la barre 1 dans ce groupe Barre N valeurs de ce groupe
Type de données: number (nombre) number (nombre)
Rôle : domaine données données
Rôles de colonne facultatifs:

 

Options de configuration

Nom
durée.animation

Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations.

Type : nombre
Par défaut : 0
animation.easing

Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles :

  • "linear" : vitesse constante.
  • "in" - Lissage à l'approche - Démarrez lentement et accélérez.
  • "out" - Ease out - Démarrage rapide et ralenti.
  • "inAndOut" : lissez l'entrée et la sortie : démarrez lentement, accélérez, puis ralentissez.
Type:chaîne
Par défaut : "linear"
animation.startup

Détermine si le graphique doit s'animer lors du tracé initial. Si la valeur est true, le graphique commence à la référence et s'anime jusqu'à son état final.

Type:booléen
Valeur par défaut : false
annotations.alwaysOutside

Dans les graphiques à barres et à colonnes, si la valeur est true, dessine toutes les annotations en dehors de la barre/colonne.

Type : booléen
Par défaut : false
annotations.boxStyle

Pour les graphiques compatibles avec les annotations, l'objet annotations.boxStyle contrôle l'apparence des cases autour des annotations:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

Cette option est actuellement compatible avec les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Elle n'est pas compatible avec le graphique d'annotations.

Type:objet
Par défaut:null
annotations.datum
Pour les graphiques compatibles avec les annotations, l'objet annotations.datum vous permet de remplacer le choix de Google Charts pour les annotations fournies pour des éléments de données individuels (comme les valeurs affichées avec chaque barre dans un graphique à barres). Vous pouvez contrôler la couleur avec annotations.datum.stem.color, la longueur de la tige avec annotations.datum.stem.length et le style avec annotations.datum.style.
Type:objet
Par défaut : la couleur est "noir" ; la longueur est de 12 ; le style est "point".
annotations.domain
Pour les graphiques compatibles avec les annotations, l'objet annotations.domain vous permet de remplacer le choix de Google Charts pour les annotations fournies pour un domaine (l'axe principal du graphique, tel que l'axe X sur un graphique en courbes typique). Vous pouvez contrôler la couleur avec annotations.domain.stem.color, la longueur de la tige avec annotations.domain.stem.length et le style avec annotations.domain.style.
Type : objet
Par défaut:la couleur est "noir" ; la longueur est de 5 ; le style est "point".
annotations.highContrast
Pour les graphiques compatibles avec les annotations, la valeur booléenne annotations.highContrast vous permet de remplacer la couleur d'annotation choisie par Google Charts. Par défaut, annotations.highContrast est vrai, ce qui permet aux graphiques de sélectionner une couleur d'annotation avec un bon contraste: les couleurs claires sur les fonds sombres et les couleurs sombres sur le thème clair. Si vous définissez annotations.highContrast sur "false" et ne spécifiez pas votre propre couleur d'annotation, Google Charts utilise la couleur de série par défaut pour l'annotation:
Type : booléen
Par défaut : true
annotations.stem
Pour les graphiques compatibles avec les annotations, l'objet annotations.stem vous permet d'ignorer le choix de Google Charts pour le style de la racine. Vous pouvez contrôler la couleur avec annotations.stem.color et la longueur de la tige avec annotations.stem.length. Notez que l'option de longueur de tige n'a aucun effet sur les annotations de style 'line': pour les annotations de base de données 'line', la longueur de la tige est toujours identique au texte, et pour les annotations de domaine 'line', la tige s'étend sur tout le graphique.
Type : objet
Par défaut:la couleur est "noire" ; la longueur est de 5 pour les annotations de domaine et de 12 pour les annotations de référence.
annotations.style
Pour les graphiques compatibles avec les annotations, l'option annotations.style vous permet de remplacer le type d'annotation choisi par Google Charts. Il peut s'agir de 'line' ou 'point'.
Type:chaîne
Par défaut : "point"
annotations.textStyle
Pour les graphiques compatibles avec les annotations, l'objet annotations.textStyle contrôle l'apparence du texte de l'annotation:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

Cette option est actuellement compatible avec les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Elle n'est pas compatible avec le graphique d'annotations.

Type : objet
Par défaut:null
Position de l'axe

Emplacement des titres des axes par rapport à la zone du graphique. Valeurs acceptées :

  • in : dessinez les titres des axes dans la zone du graphique.
  • out : dessinez les titres des axes en dehors de la zone du graphique.
  • none : permet d'omettre les titres des axes.
Type : chaîne
Par défaut : "out"
backgroundColor

Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple 'red' ou '#00cc00', ou d'un objet ayant les propriétés suivantes.

Type:chaîne ou objet
Par défaut : "blanc"
backgroundColor.stroke

Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML.

Type : chaîne
Par défaut : "#666"
backgroundColor.strokeWidth

Largeur de la bordure, en pixels.

Type:nombre
Par défaut:0
backgroundColor.fill

Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML.

Type : chaîne
Par défaut : "blanc"
Largeur du groupe
Largeur d'un groupe de barres, spécifiée dans l'un des formats suivants:
  • Pixels (50, par exemple).
  • Pourcentage de la largeur disponible pour chaque groupe (par exemple, "20 %"). "100 %" signifie qu'il n'y a pas d'espace entre les groupes.
Type:nombre ou chaîne
Par défaut : taux d'or (environ 61,8 %).
bars

Indique si les barres d'un graphique à barres Material sont verticales ou horizontales. Cette option n'a aucun effet sur les graphiques à barres classiques ni sur les graphiques à colonnes classiques.

Type : "horizontal" ou "vertical"
Par défaut : "vertical"
zone du graphique

Objet avec des membres permettant de configurer l'emplacement et la taille de la zone du graphique (à l'endroit où le graphique est dessiné, à l'exclusion de l'axe et des légendes) Deux formats sont acceptés: un nombre, ou un nombre suivi du pourcentage. Un nombre simple est une valeur en pixels ; un nombre suivi de % est un pourcentage. Exemple : chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type:objet
Par défaut : null
chartArea.backgroundColor
Couleur d'arrière-plan de la zone de graphique. Lorsqu'une chaîne est utilisée, il peut s'agir d'une chaîne hexadécimale (par exemple, "#fdc") ou un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
  • stroke : couleur fournie sous forme de chaîne hexadécimale ou de nom de couleur anglais.
  • strokeWidth: dessine une bordure autour de la zone du graphique d'une largeur donnée (et de la couleur associée à stroke).
Type : chaîne ou objet
Par défaut : "blanc"
chartArea.gauche

La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de gauche

Type:nombre ou chaîne
Par défaut : auto
chartArea.top

La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure supérieure.

Type : nombre ou chaîne
Par défaut:auto
chartArea.width

Largeur de la zone du graphique.

Type:nombre ou chaîne
Par défaut:auto
chartArea.height

Hauteur de la zone de graphique

Type : nombre ou chaîne
Par défaut : auto
chart.subtitle

Pour les graphiques Material, cette option spécifie le sous-titre. Seuls les Material Charts sont compatibles avec les sous-titres.

Type : chaîne
Par défaut:null
chart.title [titre]

Pour les graphiques Material, cette option spécifie le titre.

Type:chaîne
Par défaut:null
couleurs

Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML (par exemple, colors:['red','#004411']).

Type:tableau de chaînes
Par défaut : couleurs par défaut
opacité des données

Transparence des points de données, 1.0 étant complètement opaque et 0.0 complètement transparente. Dans les graphiques à nuage de points, d'histogrammes, à barres et à colonnes, il s'agit des données visibles: les points dans le graphique à nuage de points et les rectangles dans les autres. Dans les graphiques où la sélection des données crée un point, tel que les graphiques en courbes et en aires, il s'agit des cercles qui apparaissent lors du survol ou de la sélection. Le graphique combiné présente les deux comportements, et cette option n'a aucun effet sur les autres graphiques. Pour modifier l'opacité d'une courbe de tendance, consultez la section Opacité de la courbe de tendance.

Type : nombre
Par défaut:1.0
ActiverInteractivité

Indique si le graphique génère des événements utilisateur ou réagit aux interactions des utilisateurs. Si la valeur est "false", le graphique ne génère pas de "sélection" ni d'autres événements basés sur les interactions (mais lancera des événements prêts ou d'erreur). Il n'affichera pas de texte au passage de la souris ni ne changera d'une autre manière selon l'entrée utilisateur.

Type : booléen
Par défaut : true
explorer

L'option explorer permet aux utilisateurs de faire un panoramique et un zoom sur les graphiques Google. explorer: {} fournit le comportement par défaut de l'explorateur. Il permet aux utilisateurs d'effectuer un panoramique horizontal ou vertical en faisant glisser la souris, et de faire un zoom avant ou arrière en faisant défiler la page.

Cette fonctionnalité est en phase de test et est susceptible de changer dans les prochaines versions.

Remarque:L'explorateur ne fonctionne qu'avec des axes continus (tels que des nombres ou des dates).

Type:objet
Par défaut:null
explorateur.actions

L'explorateur de graphiques Google accepte trois actions:

  • dragToPan: faites glisser le graphique horizontalement et verticalement. Pour effectuer un panoramique uniquement le long de l'axe horizontal, utilisez explorer: { axis: 'horizontal' }. De même pour l'axe vertical.
  • dragToZoom : le comportement par défaut de l'explorateur consiste à faire un zoom avant ou arrière lorsque l'utilisateur fait défiler la page. Si vous utilisez explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, faites glisser le curseur sur une zone rectangulaire pour zoomer sur cette zone. Nous vous recommandons d'utiliser rightClickToReset chaque fois que dragToZoom est utilisé. Pour en savoir plus sur la personnalisation du zoom, consultez explorer.maxZoomIn, explorer.maxZoomOut et explorer.zoomDelta.
  • rightClickToReset : lorsque vous effectuez un clic droit sur le graphique, il revient au panoramique d'origine et au niveau de zoom.
Type:tableau de chaînes
Par défaut : ['dragToPan', 'rightClickToReset']
explorateur.axe

Par défaut, les utilisateurs peuvent faire un panoramique horizontalement ou verticalement lorsque l'option explorer est utilisée. Si vous souhaitez que les utilisateurs ne puissent effectuer un panoramique qu'horizontalement, utilisez explorer: { axis: 'horizontal' }. De même, explorer: { axis: 'vertical' } active le panoramique vertical uniquement.

Type : chaîne
Par défaut : panoramiques horizontal et vertical
Explorer.keepInBounds

Par défaut, les utilisateurs peuvent faire des panoramiques, quel que soit l'emplacement des données. Pour vous assurer qu'ils ne dépassent pas le graphique d'origine, utilisez explorer: { keepInBounds: true }.

Type:booléen
Par défaut : false
explorer.maxZoomIn

Quantité maximale que l'explorateur peut zoomer. Par défaut, les utilisateurs peuvent faire un zoom avant suffisant pour ne voir que 25% de la vue d'origine. Le fait de définir explorer: { maxZoomIn: .5 } permet aux utilisateurs d'effectuer un zoom avant suffisant pour afficher la moitié de la vue d'origine.

Type:nombre
Par défaut : 0,25
explorer.maxZoomOut

Valeurs maximales pour le zoom arrière dans l'explorateur. Par défaut, les utilisateurs peuvent effectuer un zoom arrière de sorte que le graphique n'occupe qu'un quart de l'espace disponible. Définir explorer: { maxZoomOut: 8 } permet aux utilisateurs d'effectuer un zoom arrière de manière à ce qu'il n'occupe que 1/8 de l'espace disponible.

Type:nombre
Par défaut:4
explorer.zoomDelta

Lorsque les utilisateurs font un zoom avant ou arrière, explorer.zoomDelta détermine leur niveau de zoom. Plus le nombre est petit, plus le zoom est fluide et lent.

Type:nombre
Par défaut:1.5
cible

Type d'entité qui reçoit le curseur de la souris. Affecte également l'entité sélectionnée par clic de la souris et l'élément du tableau de données associé aux événements. Il peut s'agir de l'un des éléments suivants:

  • "datum" : se concentre sur un seul point de données. Correspond à une cellule du tableau de données.
  • "category" : se concentre sur un regroupement de tous les points de données le long de l'axe principal. Correspond à une ligne du tableau de données.

Dans "targetTarget", la catégorie "target" contient toutes les valeurs de la catégorie. Cela peut être utile pour comparer les valeurs de différentes séries.

Type:chaîne
Par défaut : "datum"
Taille de police

Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques.

Type:nombre
Par défaut:automatique
Nom de la police

Police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques.

Type : chaîne
Par défaut : "Arial"
Forcer le cadre iFrame

Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.)

Type:booléen
Par défaut:false
Axe

Objet avec des membres permettant de configurer divers éléments de l'axe horizontal. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type:objet
Par défaut:null
hAxis.baseline

La référence pour l'axe horizontal.

Cette option n'est disponible que pour l'axe continuous.

Type : nombre
Par défaut : automatique
hAxis.baselineColor

Couleur de la référence pour l'axe horizontal. Il peut s'agir de n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'.

Cette option n'est disponible que pour l'axe continuous.

Type:nombre
Par défaut : "noir"
hAxis.direction

Sens de croissance des valeurs le long de l'axe horizontal. Spécifiez -1 pour inverser l'ordre des valeurs.

Type:1 ou -1
Par défaut:1
hAxis.format

Chaîne de format pour les libellés d'axes numériques ou de date.

Pour les étiquettes d'axe numérique, il s'agit d'un sous-ensemble de l'ensemble de modèles de soins intensifs avec mise en forme décimale. Par exemple, {format:'#,###%'} affichera les valeurs "1 000 %", "750 %" et "50 %" pour les valeurs 10, 7,5 et 0,5. Vous pouvez également fournir l'un des éléments suivants:

  • {format: 'none'} : affiche les nombres sans mise en forme (par exemple, 8000000)
  • {format: 'decimal'} : affiche les nombres avec des milliers de séparateurs (par exemple, 8 000 000)
  • {format: 'scientific'} : affiche les nombres en notation scientifique (par exemple, 8e6).
  • {format: 'currency'} : affiche les nombres dans la devise locale (par exemple, 8 000 000 $)
  • {format: 'percent'}: affiche les nombres sous forme de pourcentages (par exemple, 800 000 000%)
  • {format: 'short'} : affiche les nombres abrégés (par exemple, 8M)
  • {format: 'long'}: affiche les chiffres sous forme de mots entiers (par exemple, 8 millions)

Pour les étiquettes de l'axe des dates, il s'agit d'un sous-ensemble de l'ensemble de modèles de soins intensifs de mise en forme de la date. Par exemple, {format:'MMM d, y'} affiche la valeur "1er juillet 2011" pour la première date de juillet 2011.

La mise en forme réellement appliquée au libellé provient des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec un paramètre régional spécifique.

Pour calculer les valeurs de graduation et les lignes de quadrillage, plusieurs combinaisons de toutes les options de quadrillage concernées seront prises en compte si les graduations de formes formatées sont dupliquées ou se chevauchent. Vous pouvez donc spécifier format:"#" si vous ne souhaitez afficher que les ticks entiers. Toutefois, si aucune autre solution ne satisfait cette condition, aucun quadrillage ni tick ne s'affichera.

Cette option n'est disponible que pour l'axe continuous.

Type : chaîne
Par défaut : auto
hAxis.gridlines

Objet avec des propriétés permettant de configurer le quadrillage sur l'axe horizontal. Notez que le quadrillage de l'axe horizontal est dessiné verticalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{color: '#333', minSpacing: 20}

Cette option n'est disponible que pour l'axe continuous.

Type:objet
Par défaut : null
hAxis.gridlines.color

Couleur du quadrillage horizontal dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut : "#CCC"
hAxis.gridlines.count

Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique. Si vous spécifiez un nombre positif pour gridlines.count, il est utilisé pour calculer le minSpacing entre les lignes de quadrillage. Vous pouvez spécifier une valeur 1 pour ne dessiner qu'un quadrillage, ou une valeur 0 pour ne dessiner aucun quadrillage. Spécifiez -1, qui est la valeur par défaut, pour calculer automatiquement le nombre de lignes de quadrillage en fonction d'autres options.

Type : nombre
Par défaut : -1
hAxis.gridlines.interval

Tableau de tailles (sous forme de valeurs de données et non de pixels) entre les lignes adjacentes. Cette option ne concerne que les axes numériques pour le moment, mais elle est analogue aux options gridlines.units.<unit>.interval, qui ne sont utilisées que pour les dates et les heures. Pour les échelles linéaires, la valeur par défaut est [1, 2, 2.5, 5], ce qui signifie que les valeurs de quadrillage peuvent tomber sur chaque unité (1), sur les unités paires (2) ou sur des multiples de 2,5 ou 5. Toute puissance de 10 fois ces valeurs est également prise en compte (par exemple, [10, 20, 25, 50] et [.1, .2, .25, .5]). Pour les échelles de journaux, la valeur par défaut est [1, 2, 5].

Type : nombre compris entre 1 et 10, à l'exception de 10.
Par défaut : calculée
hAxis.gridlines.minSpacing

Espace minimal d'affichage en pixels entre les quadrillages principaux de l'axe. La valeur par défaut pour les principales lignes de quadrillage est 40 pour les échelles linéaires et 20 pour les échelles logarithmiques. Si vous spécifiez count et non minSpacing, le minSpacing est calculé à partir du nombre. À l'inverse, si vous spécifiez minSpacing et non count, le nombre est calculé à partir de minSpacing. Si vous spécifiez les deux, la valeur minSpacing est prioritaire.

Type : nombre
Par défaut:calculée
hAxis.gridlines.multiple

Toutes les valeurs de quadrillage et de graduation doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois supérieures au multiple ne sont pas prises en compte. Vous pouvez donc forcer les ticks à être des entiers en spécifiant gridlines.multiple = 1, ou les forcer à être des multiples de 1 000 en spécifiant gridlines.multiple = 1000.

Type:nombre
Par défaut : 1
hAxis.gridlines.units

Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Pour en savoir plus, consultez Dates et heures.

Type:objet
Par défaut:null
hAxis.minorGridlines

Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe horizontal, semblable à l'option hAxis.gridlines.

Cette option n'est disponible que pour l'axe continuous.

Type : objet
Par défaut : null
hAxis.minorGridlines.color

Couleur du quadrillage mineur horizontal dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type : chaîne
Par défaut : un mélange de quadrillages et de couleurs d'arrière-plan
hAxis.minorGridlines.count

L'option minorGridlines.count est principalement obsolète, sauf pour désactiver les lignes mineures en définissant le nombre sur 0. Le nombre de lignes secondaires dépend désormais entièrement de l'intervalle entre les lignes principales (voir hAxis.gridlines.interval) et l'espace minimal requis (voir hAxis.minorGridlines.minSpacing).

Type:nombre
Par défaut:1
hAxis.minorGridlines.interval

L'option minorGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, mais l'intervalle choisi est toujours un diviseur pair de l'intervalle de quadrillage principal. L'intervalle par défaut pour les échelles linéaires est de [1, 1.5, 2, 2.5, 5] et celui pour les échelles logarithmiques est de [1, 2, 5].

Type : nombre
Par défaut : 1
hAxis.minorGridlines.minSpacing

Espace minimal requis, en pixels, entre les lignes de quadrillage secondaires adjacentes et les lignes de quadrillage mineures et principales. La valeur par défaut est 0, 5 fois l'intervalle minimal entre les principales lignes de quadrillage pour les échelles linéaires et 1/5 minSpacing pour les échelles logarithmiques.

Type:nombre
Par défaut:calculé
hAxis.minorGridlines.multiple

Identique à gridlines.multiple.

Type:nombre
Par défaut:1
hAxis.minorGridlines.units

Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Pour en savoir plus, consultez Dates et heures.

Type:objet
Par défaut:null
hAxis.logScale

hAxis qui fait de l'axe horizontal une échelle logarithmique (nécessite que toutes les valeurs soient positives). Défini sur "true" pour "oui".

Cette option n'est disponible que pour l'axe continuous.

Type:booléen
Par défaut : false
hAxis.scaleType

hAxis qui fait de l'axe horizontal une échelle logarithmique. Les possibilités suivantes s'offrent à vous :

  • null - Aucune mise à l'échelle logarithmique n'est effectuée.
  • "log" : scaling logarithmique. Les valeurs négatives et nulles ne sont pas tracées. Cette option est identique à la configuration de hAxis: { logscale: true }.
  • "mirrorLog" : échelle logarithmique dans laquelle les valeurs négatives et nulles sont tracées. La valeur tracée d'un nombre négatif est la négative du logarithme de la valeur absolue. Les valeurs proches de 0 sont représentées sur une échelle linéaire.

Cette option n'est disponible que pour l'axe continuous.

Type:chaîne
Par défaut: null
hAxis.textPosition

Position du texte de l'axe horizontal par rapport à la zone du graphique. Valeurs acceptées : 'out', 'in', 'none'.

Type:chaîne
Par défaut : "out"
hAxis.textStyle

Objet spécifiant le style de texte de l'axe horizontal. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type : objet
Par défaut : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Remplace les graduations générées automatiquement par l'axe X par le tableau spécifié. Chaque élément du tableau doit être une valeur de tick valide (un nombre, une date, une date/heure ou une heure) ou un objet. S'il s'agit d'un objet, il doit posséder une propriété v pour la valeur de tick et une propriété f facultative contenant la chaîne littérale à afficher.

La fenêtre d'affichage est automatiquement étendue pour inclure les graduations minimale et maximale, sauf si vous spécifiez une valeur pour viewWindow.min ou viewWindow.max.

Exemples :

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Cette option n'est disponible que pour l'axe continuous.

Type : tableau d'éléments
Par défaut:auto
hAxis.title

hAxis qui spécifie le titre de l'axe horizontal.

Type:chaîne
Par défaut : null
hAxis.titleTextStyle

Objet spécifiant le style de texte du titre de l'axe horizontal. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type:objet
Par défaut : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

Si la valeur est "false", les étiquettes les plus externes sont masquées au lieu d'être recadrées par le conteneur du graphique. Si la valeur est "true", cela autorise le recadrage du libellé.

Cette option n'est disponible que pour l'axe discrete.

Type : booléen
Par défaut:false
hAxis.slantedText

Si la valeur est "true", dessinez le texte de l'axe horizontal à angle droit afin de faciliter l'ajustement. Si la valeur est "false", dessinez le texte de l'axe horizontal à la verticale. Par défaut, le texte est incliné si la ligne ne peut pas être parfaitement alignée. Notez que cette option n'est disponible que lorsque la valeur de hAxis.textPosition est définie sur "out" (valeur par défaut). La valeur par défaut est false pour les dates et les heures.

Type:booléen
Par défaut : automatique
hAxis.slantedTextAngle

Angle du texte de l'axe horizontal, s'il est incliné. Ignoré si hAxis.slantedText est défini sur false ou s'il est en mode automatique, et si le graphique a décidé de dessiner le texte horizontalement. Si l'angle est positif, la rotation est dans le sens inverse des aiguilles d'une montre. Si elle est négative, elle est dans le sens horaire.

Type:nombre, -90-90
Par défaut:30
hAxis.maxAlternation

Nombre maximal de niveaux de texte sur l'axe horizontal. Si les étiquettes du texte de l'axe sont trop encombrées, le serveur peut déplacer les étiquettes voisines vers le haut ou vers le bas pour les rapprocher. Cette valeur spécifie le nombre maximal de niveaux à utiliser. Le serveur peut utiliser moins de niveaux si les libellés peuvent être mis en place sans chevauchement. Pour les dates et les heures, la valeur par défaut est 1.

Type:nombre
Par défaut:2
hAxis.maxTextLines

Nombre maximal de lignes autorisées pour les libellés textuels. Les libellés peuvent s'étendre sur plusieurs lignes s'ils sont trop longs. Par défaut, le nombre de lignes est limité par la hauteur de l'espace disponible.

Type : nombre
Par défaut:auto
hAxis.minTextSpacing

Espacement horizontal minimal, en pixels, autorisé entre deux libellés textuels adjacents. Si les libellés sont trop espacés ou s'ils sont trop longs, l'espacement peut descendre en dessous de ce seuil.Dans ce cas, l'une des mesures de désidentification des libellés est appliquée (par exemple, il est possible de tronquer les libellés ou d'en supprimer certains).

Type : nombre
Par défaut:la valeur de hAxis.textStyle.fontSize
hAxis.showTextEvery

Nombre d'étiquettes à afficher sur l'axe horizontal : 1 signifiant chaque étiquette, 2 signifie toutes les autres étiquettes, etc. Par défaut, nous essayons d'afficher autant d'étiquettes que possible sans chevauchement.

Type : nombre
Par défaut:automatique
Valeur maximale de hAxis

Déplace la valeur maximale de l'axe horizontal vers la valeur spécifiée. Cette valeur se trouvera vers la droite dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur x maximale des données. hAxis.viewWindow.max remplace cette propriété.

Cette option n'est disponible que pour l'axe continuous.

Type:nombre
Par défaut : automatique
Valeur min.

Déplace la valeur minimale de l'axe horizontal vers la valeur spécifiée. Cette valeur sera gauche dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur supérieure à la valeur x minimale des données. hAxis.viewWindow.min remplace cette propriété.

Cette option n'est disponible que pour l'axe continuous.

Type : nombre
Par défaut:automatique
hAxis.viewWindowMode

Indique comment mettre à l'échelle l'axe horizontal pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:

  • "pretty" (pretty) : adapte les valeurs horizontales de sorte que les valeurs de données maximales et minimales s'affichent un peu à gauche et à droite de la zone du graphique. La vue est définie sur le quadrillage principal le plus proche pour les nombres ou sur le quadrillage secondaire le plus proche pour les dates et les heures.
  • 'maximized' (agrandissement) : mettez à l'échelle les valeurs horizontales de sorte que les valeurs maximale et minimale des données touchent les zones à gauche et à droite de la zone du graphique. haxis.viewWindow.min et haxis.viewWindow.max seront donc ignorés.
  • "explicite" : option obsolète permettant de spécifier les valeurs d'échelle gauche et droite de la zone du graphique. (Obsolète, car elle est redondante avec haxis.viewWindow.min et haxis.viewWindow.max.) Les valeurs de données en dehors de ces valeurs seront recadrées. Vous devez spécifier un objet hAxis.viewWindow décrivant les valeurs maximales et minimales à afficher.

Cette option n'est disponible que pour l'axe continuous.

Type:chaîne
Par défaut : équivaut à "pretty", mais haxis.viewWindow.min et haxis.viewWindow.max sont prioritaires s'ils sont utilisés.
hAxis.viewWindow

Spécifie la plage de recadrage de l'axe horizontal.

Type : objet
Par défaut : null
hAxis.viewWindow.max
  • Pour un axe continuous:

    Valeur maximale de données horizontales à afficher.

  • Pour un axe discrete:

    Index de ligne basé sur zéro à la fin de la fenêtre de recadrage. Les points de données à cet indice et aux niveaux supérieurs seront tronqués. Conjointement avec vAxis.viewWindowMode.min, il définit une plage semi-ouverte (min, max) qui indique les index des éléments à afficher. En d'autres termes, chaque index tel que min <= index < max sera affiché.

Ignoré lorsque le champ "hAxis.viewWindowMode" est "beau" ou "maximisé".

Type:nombre
Par défaut:auto
hAxis.viewWindow.min
  • Pour un axe continuous:

    Valeur minimale des données horizontales à afficher.

  • Pour un axe discrete:

    Index de ligne basé sur zéro au début de la fenêtre de recadrage. Les points de données associés à des indices inférieurs seront recadrés. Conjointement avec vAxis.viewWindowMode.max, il définit une plage semi-ouverte (min, max) qui indique les index des éléments à afficher. En d'autres termes, chaque index tel que min <= index < max sera affiché.

Ignoré lorsque le champ "hAxis.viewWindowMode" est "beau" ou "maximisé".

Type : nombre
Par défaut : auto
hauteur

Hauteur du graphique, en pixels.

Type : nombre
Par défaut : hauteur de l'élément conteneur.
empilé

Si ce paramètre est défini sur "true", les éléments sont empilés pour toutes les séries à chaque valeur de domaine. Remarque : Dans les graphiques Colonne, Superficie et Étape Cela ne s'applique pas aux graphiques à barres.

L'option isStacked est également compatible avec l'empilement à 100 %, qui consiste à redimensionner les piles d'éléments pour chaque valeur de domaine afin d'obtenir un total de 100%.

Les options pour isStacked sont les suivantes:

  • false : les éléments ne sont pas empilés. il s'agit de l'option par défaut.
  • true : empile les éléments de toutes les séries à chaque valeur de domaine.
  • 'percent' : empile les éléments de toutes les séries pour chaque valeur de domaine et les redimensionne pour qu'ils atteignent 100 % (la valeur de chaque élément étant calculée sous la forme d'un pourcentage de 100 %).
  • 'relative' : empile les éléments de toutes les séries pour chaque valeur de domaine et les redimensionne pour qu'ils atteignent 1, la valeur de chaque élément étant calculée comme une fraction de 1.
  • 'absolute' : fonctionne de la même manière que isStacked: true.

Pour un empilement à 100 %, la valeur calculée pour chaque élément apparaîtra dans l'info-bulle après sa valeur réelle.

Par défaut, l'axe cible coche les valeurs en fonction de l'échelle 0-1 relative sous forme de fractions de 1 pour 'relative' et de 0 à 100% pour 'percent' (Remarque : avec l'option 'percent', les valeurs de l'axe/des graduations sont affichées sous forme de pourcentages. Toutefois, les valeurs réelles sont les valeurs relatives de l'échelle 0-1. En effet, les graduations des axes en pourcentage sont le résultat de l'application d'un format "#.##%" aux valeurs d'échelle relatives 0-1. Lorsque vous utilisez isStacked: 'percent', veillez à spécifier tous les ticks/lignes de grille à l'aide des valeurs relatives de l'échelle 0-1. Vous pouvez personnaliser le quadrillage, les valeurs de graduation et la mise en forme à l'aide des options hAxis/vAxis appropriées.

L'empilement à 100% n'accepte que les valeurs de données de type number et doit avoir une valeur de référence égale à zéro.

Type : booléen/chaîne
Par défaut : false
légende

Objet avec des membres permettant de configurer divers aspects de la légende. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:objet
Par défaut : null
légende.pageIndex

Index de page base zéro sélectionné de la légende.

Type : nombre
Par défaut:0
légende.position

Position de la légende. Les possibilités suivantes s'offrent à vous :

  • "bottom" : en dessous du graphique.
  • "left" : à gauche du graphique, à condition qu'aucune série ne soit associée à l'axe gauche. Si vous souhaitez afficher la légende sur la gauche, utilisez l'option targetAxisIndex: 1.
  • "in" : à l'intérieur du graphique, en haut à gauche.
  • "none" : aucune légende ne s'affiche.
  • "right" : à droite du graphique. Incompatible avec l'option vAxes.
  • "top" : au-dessus du graphique.
Type:chaîne
Par défaut : "right"
légende.alignement

Alignement de la légende. Les possibilités suivantes s'offrent à vous :

  • "start" : aligné sur le début de la zone allouée à la légende.
  • "center" : centré dans la zone allouée à la légende.
  • "end" : aligné à la fin de la zone allouée à la légende.

Le début, le centre et la fin se rapportent au style (vertical ou horizontal) de la légende. Par exemple, dans une légende "à droite", "start" et "end" sont respectivement en haut et en bas. Pour une légende "top", "start" et "end" sont respectivement situés à gauche et à droite de la zone.

La valeur par défaut dépend de la position de la légende. Pour les légendes de bas de page, la valeur par défaut est "center". Les autres légendes sont définies par défaut sur "start".

Type : chaîne
Par défaut:automatique
légende.texteStyle

Objet spécifiant le style de légende. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple : 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type : objet
Par défaut : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
orientation

Orientation du graphique. Lorsque ce paramètre est défini sur 'vertical', il fait pivoter les axes du graphique de sorte que, par exemple, un graphique à colonnes devienne un graphique à barres, et qu'un graphique en aires s'étende vers la droite plutôt que vers le haut.

Type : chaîne
Par défaut : "horizontal"
catégories inversées

Si cette règle est définie sur "true", les séries sont tracées de droite à gauche. Par défaut, il faut dessiner de gauche à droite.

Cette option n'est compatible qu'avec l'axe discrete major.

Type : booléen
Par défaut : false
series

Tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Pour utiliser les valeurs par défaut d'une série, spécifiez un objet vide {}. Si vous ne spécifiez pas de série ou de valeur, la valeur globale sera utilisée. Chaque objet accepte les propriétés suivantes:

  • annotations : objet à appliquer aux annotations de cette série. Cela permet de contrôler, par exemple, l'élément textStyle de la série:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Consultez les différentes options de annotations pour obtenir une liste plus complète des éléments personnalisables.

  • color : couleur à utiliser pour cette série. Spécifiez une chaîne de couleur HTML valide.
  • targetAxisIndex : l'axe auquel attribuer cette série, où 0 est l'axe par défaut et 1 est l'axe opposé. La valeur par défaut est 0. Définissez la valeur sur 1 pour définir un graphique dans lequel des séries différentes sont affichées par rapport à différents axes. Au moins une série sera allouée à l'axe par défaut. Vous pouvez définir une échelle différente pour différents axes.
  • visibleInLegend : valeur booléenne, où "true" signifie que la série doit comporter une entrée de légende, et "false" dans le cas contraire. La valeur par défaut est "true".

Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la série dans l'ordre indiqué, ou spécifier un objet dans lequel chaque enfant possède une clé numérique indiquant la série à laquelle il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première série comme noire et absente de la légende, et la quatrième comme rouge et absente de la légende:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type:tableau d'objets (objets avec objets imbriqués)
Par défaut : {}
thème

Un thème est un ensemble de valeurs d'options prédéfinies qui fonctionnent ensemble pour obtenir un comportement de graphique ou un effet visuel spécifique. Actuellement, un seul thème est disponible:

  • "maximized" : maximise la zone du graphique et dessine la légende et tous les libellés dans la zone du graphique. Définit les options suivantes :
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
Type:chaîne
Par défaut : null
title

Texte à afficher au-dessus du graphique.

Type : chaîne
Par défaut:pas de titre
titrePosition

Emplacement du titre du graphique par rapport à la zone du graphique. Valeurs acceptées :

  • in : dessinez le titre dans la zone du graphique.
  • out : dessinez le titre en dehors de la zone du graphique.
  • none : ne renseignez pas le titre.
Type:chaîne
Par défaut : "out"
titreTexteStyle

Objet spécifiant le style du titre. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type : objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
info-bulle

Objet avec des membres permettant de configurer divers éléments d'info-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type : objet
Par défaut : null
tooltip.ignoreBounds

Si la valeur est définie sur true, elle permet de dessiner des info-bulles en dehors des limites du graphique, de chaque côté.

Remarque : Cela ne s'applique qu'aux info-bulles HTML. Si cette option est activée avec les info-bulles SVG, tout dépassement en dehors des limites du graphique sera recadré. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles.

Type:booléen
Par défaut:false
tooltip.isHtml

Si la valeur est "true", utilisez les info-bulles au format HTML (plutôt qu'au format SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles.

Remarque : La personnalisation du contenu de l'info-bulle HTML via le rôle de données de la colonne d'info-bulles n'est pas compatible avec la visualisation Graphique à bulles.

Type:booléen
Par défaut : false
tooltip.showColorCode

Si la valeur est "true", des carrés de couleur sont affichés à côté des informations de la série dans l'info-bulle. La valeur par défaut est "true" (vrai) lorsque focusTarget est défini sur "category" (catégorie). Sinon, la valeur par défaut est "false" (faux).

Type : booléen
Par défaut : automatique
tooltip.textStyle

Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:

  • "focus" : l'info-bulle s'affiche lorsque l'utilisateur passe la souris sur l'élément.
  • "none" : l'info-bulle ne s'affiche pas.
  • "selection" : l'info-bulle s'affiche lorsque l'utilisateur sélectionne l'élément.
Type:chaîne
Par défaut : "focus"
courbes de tendance

Affiche des lignes de tendance sur les graphiques correspondants. Par défaut, les courbes de tendance linéaires sont utilisées, mais elles peuvent être personnalisées avec l'option trendlines.n.type.

Les courbes de tendance étant spécifiées par série, vos options se présentent la plupart du temps comme suit:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    
Type : objet
Par défaut:null
tendanceslignes.n.couleur

Couleur de la ligne de tendance, exprimée sous la forme d'un nom de couleur anglais ou d'une chaîne hexadécimale.

Type : chaîne
Par défaut : couleur de la série par défaut
tendances.degrés.n

Pour les lignes de tendance de type: 'polynomial', le degré du polynôme (2 pour le quadratique, 3 pour le cube, etc.). (Le niveau par défaut peut passer de 3 à 2 dans une prochaine version de Google Charts.)

Type : nombre
Par défaut : 3
Trendslines.n.labelInLegend

Si elle est définie, la ligne de tendance apparaît dans la légende sous la forme de cette chaîne.

Type : chaîne
Par défaut:null
tendanceslignes.n.largeurLargeur

Largeur de ligne de la ligne de tendance, en pixels.

Type : nombre
Par défaut : 2
tendanceslignes.n.opacité

Transparence de la ligne de tendance, comprise entre 0 (transparent) et 1 (opaque).

Type : nombre
Par défaut : 1.0
Trendslines.n.pointSize

Les courbes de tendance sont constituées d'un groupe de points correspondant à un graphique. Cette option rarement nécessaire vous permet de personnaliser la taille des points. L'option lineWidth de la courbe de tendance est généralement préférable. Toutefois, vous en aurez besoin si vous utilisez l'option globale pointSize et que vous souhaitez utiliser une autre taille de point pour vos courbes de tendance.

Type : nombre
Par défaut : 1
Trendslines.n.pointsVisible.

Les lignes de tendance sont composées d'un groupe de points figurant sur le graphique. L'option pointsVisible de la courbe de tendance détermine si les points d'une courbe de tendance particulière sont visibles.

Type : booléen
Par défaut : true
Trendslines.n.showR2

Indique si le coefficient de détermination doit être affiché dans l'info-bulle relative à la légende ou à la courbe de tendance.

Type:booléen
Par défaut:false
tendances.n.type

Indique si les lignes de tendance sont 'linear' (par défaut), 'exponential' ou 'polynomial'.

Type:chaîne
Par défaut:linéaire
tendances.n.visibleInLégende

Indique si l'équation de la ligne de tendance apparaît ou non dans la légende. Elle apparaîtra dans l'info-bulle de la courbe de tendance.

Type : booléen
Par défaut:false
Axes

Spécifie les propriétés de chaque axe vertical, si le graphique comporte plusieurs axes verticaux. Chaque objet enfant est un objet vAxis et peut contenir toutes les propriétés acceptées par vAxis. Ces valeurs remplacent les paramètres généraux de la même propriété.

Pour spécifier un graphique avec plusieurs axes verticaux, définissez d'abord un nouvel axe à l'aide de series.targetAxisIndex, puis configurez l'axe à l'aide de vAxes. L'exemple suivant attribue la série 2 à l'axe de droite et spécifie un titre et un style de texte personnalisés pour celle-ci:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Cette propriété peut être un objet ou un tableau. L'objet est une collection d'objets, chacun avec un libellé numérique qui spécifie l'axe qu'il définit (il s'agit du format indiqué ci-dessus). Le tableau est un tableau d'objets (un par axe). Par exemple, la notation de style tableau suivante est identique à l'objet vAxis présenté ci-dessus:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type : tableau d'objets ou objet avec des objets enfants
Par défaut : null
vAxis

Objet avec des membres permettant de configurer divers éléments de l'axe vertical. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type : objet
Par défaut : null
vAxis.baseline (vaxis.baseline)

vAxis qui spécifie la référence de l'axe vertical. Si la valeur de référence est supérieure à la ligne de grille la plus élevée ou inférieure à la ligne de grille la plus basse, elle sera arrondie à la ligne de grille la plus proche.

Type : nombre
Par défaut : automatique
vAxis.baselineColor

Indique la couleur de la référence pour l'axe vertical. Il peut s'agir de n'importe quelle chaîne de couleur HTML, par exemple : 'red' ou '#00cc00'.

Type : nombre
Par défaut : "noir"
v.axe.direction

Sens de croissance des valeurs le long de l'axe vertical. Par défaut, les valeurs basses figurent au bas du graphique. Spécifiez -1 pour inverser l'ordre des valeurs.

Type:1 ou -1
Par défaut:1
vAxis.format

Chaîne de format pour les libellés de l'axe numérique. Il s'agit d'un sous-ensemble de l'ensemble de modèles d'ICU. Par exemple, {format:'#,###%'} affichera les valeurs "1 000 %", "750 %" et "50 %" pour les valeurs 10, 7,5 et 0,5. Vous pouvez également fournir l'un des éléments suivants:

  • {format: 'none'}: affiche les nombres sans mise en forme (par exemple, 8000000)
  • {format: 'decimal'} : affiche les nombres avec des milliers de séparateurs (par exemple, 8 000 000)
  • {format: 'scientific'} : affiche les nombres en notation scientifique (par exemple, 8e6).
  • {format: 'currency'} : affiche les nombres dans la devise locale (par exemple, 8 000 000 $)
  • {format: 'percent'} : affiche les nombres sous forme de pourcentages (par exemple, 800 000 000%)
  • {format: 'short'}: affiche les nombres abrégés (par exemple, 8M)
  • {format: 'long'}: affiche les chiffres sous forme de mots entiers (par exemple, 8 millions)

La mise en forme réellement appliquée au libellé provient des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec un paramètre régional spécifique.

Pour calculer les valeurs de graduation et les lignes de quadrillage, plusieurs combinaisons de toutes les options de quadrillage concernées seront prises en compte si les graduations de formes formatées sont dupliquées ou se chevauchent. Vous pouvez donc spécifier format:"#" si vous ne souhaitez afficher que les ticks entiers. Toutefois, si aucune autre solution ne satisfait cette condition, aucun quadrillage ni tick ne s'affichera.

Type:chaîne
Par défaut : auto
vAxis.gridlines

Objet avec des membres permettant de configurer le quadrillage sur l'axe vertical. Notez que le quadrillage de l'axe vertical est dessiné horizontalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous:

{color: '#333', minSpacing: 20}
Type : objet
Par défaut : null
vAxis.gridlines.color

Couleur du quadrillage vertical dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut : "#CCC"
v.axe.gridlines.count

Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique. Si vous spécifiez un nombre positif pour gridlines.count, il est utilisé pour calculer le minSpacing entre les lignes de quadrillage. Vous pouvez spécifier une valeur 1 pour ne dessiner qu'un quadrillage, ou une valeur 0 pour ne dessiner aucun quadrillage. Spécifiez -1, qui est la valeur par défaut, pour calculer automatiquement le nombre de lignes de quadrillage en fonction d'autres options.

Type:nombre
Par défaut : -1
vAxis.gridlines.interval

Tableau de tailles (sous forme de valeurs de données et non de pixels) entre les lignes adjacentes. Cette option ne concerne que les axes numériques pour le moment, mais elle est analogue aux options gridlines.units.<unit>.interval, qui ne sont utilisées que pour les dates et les heures. Pour les échelles linéaires, la valeur par défaut est [1, 2, 2.5, 5], ce qui signifie que les valeurs de quadrillage peuvent tomber sur chaque unité (1), sur les unités paires (2) ou sur des multiples de 2,5 ou 5. Toute puissance de 10 fois ces valeurs est également prise en compte (par exemple, [10, 20, 25, 50] et [.1, .2, .25, .5]). Pour les échelles de journaux, la valeur par défaut est [1, 2, 5].

Type : nombre compris entre 1 et 10, à l'exception de 10.
Par défaut : calculée
vAxis.gridlines.minSpacing

Espace minimal d'affichage en pixels entre les quadrillages principaux de l'axe. La valeur par défaut pour les principales lignes de quadrillage est 40 pour les échelles linéaires et 20 pour les échelles logarithmiques. Si vous spécifiez count et non minSpacing, le minSpacing est calculé à partir du nombre. À l'inverse, si vous spécifiez minSpacing et non count, le nombre est calculé à partir de minSpacing. Si vous spécifiez les deux, la valeur minSpacing est prioritaire.

Type : nombre
Par défaut:calculée
vAxis.gridlines.multiple

Toutes les valeurs de quadrillage et de graduation doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois supérieures au multiple ne sont pas prises en compte. Vous pouvez donc forcer les ticks à être des entiers en spécifiant gridlines.multiple = 1, ou les forcer à être des multiples de 1 000 en spécifiant gridlines.multiple = 1000.

Type:nombre
Par défaut:1
vAxis.gridlines.units

Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Pour en savoir plus, consultez Dates et heures.

Type : objet
Par défaut:null
vAxis.minorGridlines

Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe vertical, semblable à l'option vAxis.gridlines.

Type:objet
Par défaut:null
vAxis.minorGridlines.color

Couleur du quadrillage vertical vertical dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut : un mélange de quadrillages et de couleurs d'arrière-plan
vAxis.minorGridlines.count

L'option minorGridlines.count est principalement obsolète, sauf pour désactiver les lignes mineures mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend de l'intervalle entre les lignes principales (voir vAxis.gridlines.interval) et l'espace minimal requis (voir vAxis.minorGridlines.minSpacing).

Type:nombre
Par défaut : 1
vAxis.minorGridlines.interval

L'option minorGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, mais l'intervalle choisi est toujours un diviseur pair de l'intervalle de quadrillage principal. L'intervalle par défaut pour les échelles linéaires est de [1, 1.5, 2, 2.5, 5] et celui pour les échelles logarithmiques est de [1, 2, 5].

Type:nombre
Par défaut:1
vAxis.minorGridlines.minSpacing

Espace minimal requis, en pixels, entre les lignes de quadrillage secondaires adjacentes et les lignes de quadrillage mineures et principales. La valeur par défaut est 0, 5 fois l'intervalle minimal entre les principales lignes de quadrillage pour les échelles linéaires et 1/5 minSpacing pour les échelles logarithmiques.

Type : nombre
Par défaut : calculé
vAxis.minorGridlines.multiple

Identique à gridlines.multiple.

Type : nombre
Par défaut:1
vAxis.minorGridlines.units

Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Pour en savoir plus, consultez Dates et heures.

Type : objet
Par défaut:null
vAxis.logScale

Si la valeur est "true", l'axe vertical devient une échelle logarithmique. Remarque: Toutes les valeurs doivent être positives.

Type:booléen
Par défaut:false
vAxis.scaleType (vAxis.scaleType)

vAxis qui fait de l'axe vertical une échelle logarithmique. Les possibilités suivantes s'offrent à vous :

  • null - Aucune mise à l'échelle logarithmique n'est effectuée.
  • "log" : scaling logarithmique. Les valeurs négatives et nulles ne sont pas tracées. Cette option est identique à la configuration de vAxis: { logscale: true }.
  • "mirrorLog" : échelle logarithmique dans laquelle les valeurs négatives et nulles sont tracées. La valeur tracée d'un nombre négatif est la négative du logarithme de la valeur absolue. Les valeurs proches de 0 sont représentées sur une échelle linéaire.

Cette option n'est disponible que pour l'axe continuous.

Type : chaîne
Par défaut:null
vAxis.textPosition

Position du texte de l'axe vertical par rapport à la zone du graphique. Valeurs acceptées : 'out', 'in', 'none'.

Type : chaîne
Par défaut : "out"
vAxis.textStyle (vAxis.textStyle)

Objet spécifiant le style de texte de l'axe vertical. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type : objet
Par défaut : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Remplace les graduations générées automatiquement par l'axe Y par le tableau spécifié. Chaque élément du tableau doit être une valeur de tick valide (un nombre, une date, une date/heure ou une heure) ou un objet. S'il s'agit d'un objet, il doit posséder une propriété v pour la valeur de tick et une propriété f facultative contenant la chaîne littérale à afficher.

La fenêtre d'affichage est automatiquement étendue pour inclure les graduations minimale et maximale, sauf si vous spécifiez une valeur pour viewWindow.min ou viewWindow.max.

Exemples :

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Type : tableau d'éléments
Par défaut : auto
vAxis.title

vAxis qui spécifie un titre pour l'axe vertical.

Type:chaîne
Par défaut : pas de titre
vAxis.titleTextStyle

Objet spécifiant le style de texte du titre de l'axe vertical. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

Le color peut être n'importe quelle chaîne de couleur HTML, par exemple : 'red' ou '#00cc00'. Voir aussi fontName et fontSize.

Type:objet
Par défaut : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Déplace la valeur maximale de l'axe vertical vers la valeur spécifiée. Cette valeur est plus élevée dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur y maximale des données. vAxis.viewWindow.max remplace cette propriété.

Type : nombre
Par défaut:automatique
Valeur minimale

Déplace la valeur minimale de l'axe vertical vers la valeur spécifiée. Cette valeur est descendante dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur supérieure à la valeur y minimale des données. vAxis.viewWindow.min remplace cette propriété.

Type : nombre
Par défaut : null
vAxis.viewWindowMode

Spécifie comment mettre à l'échelle l'axe vertical pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:

  • "pretty" : mettez à l'échelle les valeurs verticales de sorte que les valeurs de données maximales et minimales soient affichées un peu en bas et en haut de la zone du graphique. La vue est définie sur le quadrillage principal le plus proche pour les nombres ou sur le quadrillage secondaire le plus proche pour les dates et les heures.
  • "maximized" : met à l'échelle les valeurs verticales pour que les valeurs de données maximales et minimales touchent les parties supérieure et inférieure de la zone du graphique. vaxis.viewWindow.min et vaxis.viewWindow.max seront donc ignorés.
  • "explicite" : option obsolète permettant de spécifier les valeurs d'échelle supérieure et inférieure de la zone du graphique. (obsolète, car elle est redondante avec vaxis.viewWindow.min et vaxis.viewWindow.max.) Les valeurs de données en dehors de ces valeurs seront recadrées. Vous devez spécifier un objet vAxis.viewWindow décrivant les valeurs maximales et minimales à afficher.
Type : chaîne
Par défaut:équivaut à "pretty", mais vaxis.viewWindow.min et vaxis.viewWindow.max sont prioritaires s'ils sont utilisés.
vAxis.viewWindow

Spécifie la plage de recadrage de l'axe vertical.

Type:objet
Par défaut : null
vAxis.viewWindow.max

Valeur maximale des données verticales à afficher.

Ignoré lorsque le champ "vAxis.viewWindowMode" est "beau" ou "maximisé".

Type : nombre
Par défaut:auto
vAxis.viewWindow.min

Valeur minimale des données verticales à afficher.

Ignoré lorsque le champ "vAxis.viewWindowMode" est "beau" ou "maximisé".

Type : nombre
Par défaut:auto
largeur

Largeur du graphique, en pixels.

Type:nombre
Par défaut:largeur de l'élément conteneur

Méthodes

Méthode
draw(data, options)

Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement ready. Extended description

Return Type (Type de retour) : aucun
getAction(actionID)

Renvoie l'objet d'action info-bulle avec le actionID demandé.

Return Type:objet
getBoundingBox(id)

Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique id. Le format de id n'est pas encore documenté (il s'agit des valeurs de retour des gestionnaires d'événements). Voici quelques exemples:

var cli = chart.getChartLayoutInterface();

Hauteur de la zone de graphique
cli.getBoundingBox('chartarea').height
Largeur de la troisième barre dans la première série d'un graphique à barres ou à colonnes
cli.getBoundingBox('bar#0#2').width
Cadre de délimitation du cinquième coin du graphique à secteurs
cli.getBoundingBox('slice#4')
Cadre de délimitation des données d'un graphique vertical (par exemple, une colonne) :
cli.getBoundingBox('vAxis#0#gridline')
Cadre de délimitation des données d'un graphique horizontal (à barres, par exemple) :
cli.getBoundingBox('hAxis#0#gridline')

Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique.

Return Type : objet
getChartAreaBoundingBox()

Renvoie un objet contenant les éléments "left", "top", "width" et "height" dans le contenu du graphique (c'est-à-dire, à l'exclusion des libellés et de la légende):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique.

Return Type:objet
getChartLayoutInterface()

Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments.

Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Appelez-le après le graphique.

Return Type : objet
getHAxisValue(xPosition, optional_axis_index)

Renvoie la valeur de données horizontale à xPosition, qui est un décalage de pixels par rapport au bord gauche du conteneur de graphique. Peut être négatif.

Exemple : chart.getChartLayoutInterface().getHAxisValue(400)

Appelez-le après le graphique.

Return Type (Type de retour) : nombre
getImageURI()

Renvoie le graphique sérialisé en tant qu'URI d'image.

Appelez-le après le graphique.

Consultez Imprimer des graphiques PNG.

Type de retour : chaîne
getSelection()

Affiche un tableau des entités de graphique sélectionnées. Vous pouvez sélectionner les barres, les entrées de légende et les catégories. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Pour ce graphique, une seule entité peut être sélectionnée à un moment donné. Extended description.

Type de renvoi : tableau des éléments de sélection
getVAxisValue(yPosition, optional_axis_index)

Renvoie la valeur de données verticales à yPosition, qui est un décalage de pixels par rapport au bord supérieur du conteneur de graphique. Peut être négatif.

Exemple : chart.getChartLayoutInterface().getVAxisValue(300)

Appelez-le après le graphique.

Return Type (Type de retour) : nombre
getXLocation(dataValue, optional_axis_index)

Renvoie la coordonnée X du pixel de dataValue par rapport au bord gauche du conteneur du graphique.

Exemple : chart.getChartLayoutInterface().getXLocation(400)

Appelez-le après le graphique.

Return Type (Type de retour) : nombre
getYLocation(dataValue, optional_axis_index)

Renvoie la coordonnée Y en pixels de dataValue par rapport au bord supérieur du conteneur du graphique.

Exemple : chart.getChartLayoutInterface().getYLocation(300)

Appelez-le après le graphique.

Return Type (Type de retour) : nombre
removeAction(actionID)

Supprime l'action d'info-bulle avec le actionID demandé du graphique.

Type de retour : none
setAction(action)

Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.

La méthode setAction utilise un objet comme paramètre d'action. Cet objet doit spécifier trois propriétés: id (l'ID de l'action définie, text), le texte qui doit apparaître dans l'info-bulle, et action, la fonction à exécuter lorsqu'un utilisateur clique sur le texte de l'action.

Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode draw() du graphique. Description étendue :

Type de retour : none
setSelection()

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. Vous pouvez sélectionner les barres, les entrées de légende et les catégories. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Pour ce graphique, une seule entité peut être sélectionnée à la fois. Extended description.

Return Type (Type de retour) : aucun
clearChart()

Efface le graphique et libère toutes ses ressources allouées.

Return Type (Type de retour) : aucun

Événements

Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gestion des événements et Déclenchement d'événements.

Nom
animationfinish

Déclenché lorsque l'animation de transition est terminée.

Properties (Propriétés) : aucune
click

Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés.

Properties (Propriétés) : targetID
error

Déclenché en cas d'erreur lors de la tentative d'affichage du graphique

Properties (Propriétés) : id, message
legendpagination

Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende Transmet l'index de page basé sur la légende actuelle et le nombre total de pages.

Properties (Propriétés) : currentPageIndex, totalPages
onmouseover

Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet les index de ligne et de colonne de l'élément du tableau de données correspondant.

Properties (Propriétés) : ligne, colonne
onmouseout

Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant.

Properties (Propriétés) : ligne, colonne
ready

Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw et de les appeler uniquement après le déclenchement de l'événement.

Properties (Propriétés) : aucune
select

Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez getSelection().

Properties (Propriétés) : aucune

Règles concernant les données

L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.