Visualisation: Graphique à bulles

Présentation

Graphique à bulles affiché dans le navigateur à l'aide de SVG ou de VML Affiche des conseils lorsque vous pointez sur des bulles.

Un graphique à bulles permet de visualiser un ensemble de données de deux à quatre dimensions. Les deux premières dimensions sont représentées sous forme de coordonnées, la troisième comme couleur et la quatrième comme taille.

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':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Couleur par nombre

Vous pouvez utiliser l'option colorAxis pour colorer les bulles proportionnellement à une valeur, comme illustré dans l'exemple ci-dessous.

<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"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

Personnaliser des libellés

Vous pouvez contrôler la police, la police et la couleur des bulles à l'aide de l'option bubble.textStyle:

Options
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
Page Web complète
<head>
  <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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>

Les étiquettes du graphique ci-dessus sont difficiles à lire, et l'une d'elles en est la raison. C'est ce qu'on appelle un aura. Si vous préférez que vos graphiques ne s'affichent pas, vous pouvez définir bubble.textStyle.auraColor sur 'none'.

Options
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
Page Web complète
<head>
    <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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>

Chargement...

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

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

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

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

Format des données

Lignes : chaque ligne du tableau représente une seule bulle.

Columns:

  Colonne 0 Colonne 1 Colonne 2 Colonne 3 (facultatif) Colonne 4 (facultatif)
Objectif : ID (nom) de la bulle Coordonnée X Coordonnée Y ID de série ou valeur représentant une couleur sur une échelle de dégradé, en fonction du type de colonne :
  • string
    Chaîne identifiant les bulles dans la même série. Utilisez la même valeur pour identifier toutes les bulles qui appartiennent à la même série. Les bulles de la même série se verront attribuer la même couleur. Vous pouvez configurer la série à l'aide de l'option series.
  • number
    Valeur associée à une couleur réelle sur une échelle de dégradé à l'aide de l'option colorAxis.
Taille ; les valeurs de cette colonne sont mappées sur des valeurs de pixels réelles à l'aide de l'option sizeAxis.
Type de données: chaîne number (nombre) number (nombre) chaîne ou nombre number (nombre)

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
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"
bulle

Objet avec des membres permettant de configurer les propriétés visuelles des bulles.

Type:objet
Par défaut : null
bulle.opacity

L'opacité des bulles, où 0 est totalement transparent et 1 complètement opaque.

Type : nombre compris entre 0,0 et 1,0
Par défaut : 0,8
bulle

Couleur du trait des bulles.

Type:chaîne
Par défaut : "#ccc"
info-bulle

Objet spécifiant le style de texte des bulles. L'objet a le format suivant:

{color: <string>, fontName: <string>, fontSize: <number>}

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>}
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
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
colorAxis

Objet spécifiant un mappage entre les valeurs d'une colonne de couleurs et les couleurs, ou une échelle de dégradés. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme illustré ci-dessous: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type : objet
Par défaut : null
colorAxis.minValue

Indique une valeur minimale pour les données de couleur du graphique, le cas échéant. Les valeurs de données de couleur de cette valeur ou d'une valeur inférieure seront affichées en tant que première couleur de la plage colorAxis.colors.

Type : nombre
Par défaut:valeur minimale de la colonne "Couleur" dans les données du graphique
colorAxis.maxValue

Si ce champ est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur ou d'une valeur supérieure seront affichées en tant que dernière couleur de la plage colorAxis.colors.

Type:nombre
Par défaut : valeur maximale de la colonne "Couleur" dans les données du graphique
colorAxis.values

S'il est présent, contrôle la manière dont les valeurs sont associées aux couleurs. Chaque valeur est associée à la couleur correspondante dans le tableau colorAxis.colors. Ces valeurs s'appliquent aux données de couleur des graphiques. La coloration est effectuée en fonction du dégradé des valeurs spécifiées ici. Ne pas spécifier de valeur pour cette option revient à spécifier [minValue, maxValue].

Type:tableau de nombres
Par défaut : null
colorAxis.colors

Couleurs à attribuer aux valeurs de la visualisation. Un tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: colorAxis: {colors:['red','#004411']}. Vous devez disposer d'au moins deux valeurs. Le gradient inclura toutes vos valeurs, plus les valeurs intermédiaires calculées, la première couleur comme valeur la plus petite et la dernière couleur la plus élevée.

Type : tableau de chaînes de couleurs
Par défaut : null
colorAxis.legend

Objet spécifiant le style de la légende de dégradé.

Type:objet
Par défaut:null
colorAxis.legend.position

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

  • "top" : au-dessus du graphique.
  • "bottom" : en dessous du graphique.
  • "in" : à l'intérieur du graphique, en haut.
  • "none" : aucune légende ne s'affiche.
Type : objet
Par défaut : "top"
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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>}
colorAxis.legend.numberFormat

Chaîne de format pour les libellés numériques. Il s'agit d'un sous-ensemble de l'ensemble de modèles d'ICU. Par exemple, {numberFormat:'.##'} affichera les valeurs "10.66", "10.6" et "10.0" pour les valeurs 10.666, 10.6 et 10.

Type:chaîne
Par défaut:auto
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
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.

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'.

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 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
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}
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.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.

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.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".

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.
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] }
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>}
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é.

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é.

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.
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

Valeur maximale de données horizontales à afficher.

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

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

Valeur minimale des données horizontales à afficher.

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.
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.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.maxLines

Nombre maximal de lignes dans la légende. Définissez ce nombre sur un nombre supérieur à un pour ajouter des lignes à votre légende. Remarque: La logique exacte utilisée pour déterminer le nombre réel de lignes à afficher est toujours en flux.

Cette option ne fonctionne actuellement que lorsque légende.position est "haut".

Type:nombre
Par défaut : 1
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.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>}
Mode de sélection

Lorsque selectionMode est défini sur 'multiple', les utilisateurs peuvent sélectionner plusieurs points de données.

Type : chaîne
Par défaut : "single"
series

Objet d'objets dans lequel les clés sont des noms de séries (valeurs dans la colonne "Couleur") et chaque objet décrivant le format de la série correspondante dans le graphique. Si une série ou une valeur n'est pas spécifiée, la valeur globale sera utilisée. Chaque objet accepte les propriétés suivantes:

  • color : couleur à utiliser pour cette série. Spécifiez une chaîne de couleur HTML valide.
  • 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".
Exemple : 
series: {'Europe': {color: 'green'}}
Type : objet avec objets imbriqués
Par défaut:{}
sizeAxis

Objet avec des membres permettant de configurer l'association des valeurs à la taille des 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: 

 {minValue: 0,  maxSize: 20}
Type : objet
Par défaut:null
sizeAxis.maxSize

Rayon maximal de la bulle la plus grande possible, en pixels.

Type:nombre
Par défaut:30
sizeAxis.maxValue

Valeur de la taille (telle qu'elle apparaît dans les données du graphique) à mapper sur sizeAxis.maxSize. Les valeurs plus élevées seront recadrées selon cette valeur.

Type : nombre
Valeur par défaut:valeur maximale de la colonne de taille dans les données du graphique
sizeAxis.minSize

Rayon minimal de la plus petite bulle possible, en pixels.

Type:nombre
Par défaut : 5
sizeAxis.minValue

Valeur de la taille (telle qu'elle apparaît dans les données du graphique) à mapper sur sizeAxis.minSize. Les valeurs inférieures sont recadrées selon cette valeur.

Type : nombre
Par défaut:valeur minimale de la colonne de taille dans les données du graphique
TriBullesParTaille

Si la valeur est "true", les bulles sont triées par taille afin que les bulles plus petites apparaissent au-dessus des bulles plus grandes. Si la valeur est "false", les bulles sont triées dans l'ordre dans le tableau de données.

Type : booléen
Par défaut:true
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.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.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"
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.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.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.
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. Les entités sélectionnables sont des bulles. 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. Les entités sélectionnables sont des bulles. 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. Une info-bulle est liée à une ligne du tableau de données (l'index de la colonne est "null").

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. Une info-bulle est liée à une ligne du tableau de données (l'index de la colonne est "null").

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 relatives aux 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.