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

Visualisation: jauge

Overview
Exemple
Loading
Format des données
Options de configuration
Méthodes
Événements
Règles concernant les données

Présentation

Jauge avec un cadran, affichée dans le navigateur au format SVG ou VML.

Exemple

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

function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

chart.draw(data, options);

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Pour le moment, il n'existe aucun moyen de spécifier le titre d'un graphique jauge comme vous le feriez avec d'autres graphiques Google. Dans l'exemple ci-dessus, du code HTML simple est utilisé pour afficher le titre.

En outre, l'option animation.startup disponible pour de nombreux autres graphiques Google n'est pas disponible pour le graphique jauge. Si vous souhaitez créer une animation de démarrage, dessinez d'abord le graphique avec des valeurs définies sur zéro, puis dessinez-le à nouveau avec la valeur à laquelle vous souhaitez l'animer.

Chargement...

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

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

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

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

Format des données

Chaque valeur numérique est affichée sous forme de jauge. Deux autres formats de données sont acceptés:

Deux colonnes. La première colonne doit être une chaîne et contenir l'étiquette de la jauge. La deuxième colonne doit contenir un nombre et la valeur de la jauge.
N'importe quel nombre de colonnes numériques. L'étiquette de chaque jauge est l'étiquette de la colonne.

Options de configuration

Nom
animation.duration	Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations. Type:nombre Par défaut:400
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 en douceur, puis accélérez. "out" (lissage à l'éloignement) : démarre rapidement et ralentit. "inAndOut" (aller et venir) : démarre lentement, accélère, puis ralentit. Type:chaîne Par défaut : "linear" (linéaire).
forceIFrame	Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames. Type:booléen Par défaut : "false"
greenColor	Couleur à utiliser pour la section verte, en notation couleur HTML. Type:chaîne Par défaut : "#109618"
greenFrom	Valeur la plus faible pour une plage en vert. Type:nombre Par défaut:aucune
greenTo	Valeur la plus élevée pour une plage en vert. Type:nombre Par défaut:aucune
taille	Hauteur du graphique en pixels. Type:nombre Par défaut:largeur du conteneur
majorTicks	Libellés des principales graduations. Le nombre d'étiquettes définit le nombre de graduations principales dans toutes les jauges. La valeur par défaut est cinq graduations principales, avec les étiquettes des valeurs de jauge minimale et maximale. Type:tableau de chaînes Par défaut:aucune
max	Valeur maximale d'une jauge. Type:nombre Par défaut:100
min	Valeur minimale d'une jauge. Type:nombre Par défaut:0
minorTicks	Nombre de graduations mineures dans chaque section principale de graduation. Type:nombre Par défaut:2
redColor	Couleur à utiliser pour la section rouge, en notation couleur HTML. Type:chaîne Par défaut : "#DC3912"
redFrom	Valeur la plus basse pour une plage rouge. Type:nombre Par défaut:aucune
redTo	Valeur la plus élevée pour une plage rouge. Type:nombre Par défaut:aucune
largeur	Largeur du graphique en pixels. Type:nombre Par défaut:largeur du conteneur
yellowColor	Couleur à utiliser pour la section jaune, en notation couleur HTML. Type:chaîne Par défaut : "#FF9900"
yellowFrom	Valeur la plus faible pour une plage de couleur jaune. Type:nombre Par défaut:aucune
yellowTo	Valeur la plus élevée pour une plage jaune. Type:nombre Par défaut:aucune

Méthodes

Méthode
`draw(data, options)`	Permet de dessiner le graphique. Return Type (Type renvoyé) : aucun
`clearChart()`	Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun

Événements

Aucun événement déclenché.

Règles concernant les données

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