Présentation
Une jauge dotée d'un cadran, affichée dans le navigateur au format SVG ou VML
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':['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 :
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.