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

Visualisation: jauge

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

Présentation

Une jauge dotée d'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, contrairement à d'autres graphiques Google. Dans l'exemple ci-dessus, un titre HTML simple est utilisé pour afficher le titre.

De plus, l'option animation.startup disponible pour de nombreux autres graphiques Google n'est pas disponible pour le graphique jauge. Si vous souhaitez utiliser une animation de démarrage, dessinez d'abord le graphique avec des valeurs définies sur zéro, puis dessinez à nouveau avec la valeur que vous souhaitez 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 contenir une chaîne contenant le libellé de la jauge. La deuxième colonne doit être un nombre contenant la valeur de la jauge.
N'importe quel nombre de colonnes numériques. L'étiquette de chaque jauge correspond à l'étiquette de la colonne.

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: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 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"
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
Couleur verte	Couleur à utiliser pour la section verte, au format de couleur HTML. Type : chaîne Par défaut : "#109618"
GreenFrom	Valeur la plus faible d'une plage marquée d'une couleur verte. Type : nombre Par défaut : aucun
GreenTo	Valeur la plus élevée pour une plage marquée d'une couleur verte. Type:nombre Par défaut:aucun
hauteur	Hauteur du graphique en pixels. Type:nombre Par défaut:largeur du conteneur
Majeur	Libellés des principales coches 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 : aucun
max	Valeur maximale d'une jauge. Type:nombre Par défaut : 100
min	Valeur minimale d'une jauge. Type:nombre Par défaut : 0
MineurTick	Nombre de graduations mineures dans chaque graduation majeure. Type:nombre Par défaut:2
rouge	Couleur à utiliser pour la section rouge, au format HTML. Type : chaîne Par défaut : "#DC3912"
redFrom	Valeur la plus faible d'une plage marquée d'une couleur rouge. Type:nombre Par défaut:aucun
RedTo	Valeur la plus élevée pour une plage marquée d'une couleur rouge. Type:nombre Par défaut : aucun
largeur	Largeur du graphique en pixels. Type : nombre Par défaut:largeur du conteneur
Jaune	Couleur à utiliser pour la section jaune, au format HTML. Type : chaîne Par défaut : "#FF9900"
JauneDe	Valeur la plus faible d'une plage marquée par une couleur jaune. Type:nombre Par défaut:aucun
jaune à	Valeur la plus élevée pour une plage marquée d'une couleur jaune. Type : nombre Par défaut : aucun

Méthodes

Méthode
`draw(data, options)`	Dessine le graphique. 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

Aucun événement déclenché.

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.