Graphique Google
Des simples graphiques linéaires aux arborescences hiérarchiques complexes, la galerie Google Chart fournit un grand nombre de types de graphiques prêts à l’emploi :
- Diagramme de dispersion
- Graphique en ligne
- Graphique à barres / à colonnes
- Graphique en aires
- Diagramme circulaire
- Graphique en anneau
- Organigramme
- Carte / Carte géographique
Comment utiliser Google Chart ?
Pour utiliser Google Chart dans votre page Web, ajouter un lien au chargeur de cartes :
Google Chart est facile à utiliser.
Ajoutez simplement un
L’élément
Chargez ensuite l’API Google Graph :
- Charger l’API de visualisation et le package corechart
- Définir une fonction de rappel à appeler lorsque l’API est chargée
1 google.charts.load(‘actuel’,{packages :[‘corechart’]});
2 google.charts.setOnLoadCallback(drawChart);
C’est tout!
Graphique linéaire
Code source
fonction dessinerChart() {
// Définir les données
var data = google.visualization.arrayToDataTable([
[‘Price’, ‘Size’],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Définir les options
var options = {
titre : ‘Prix des maisons par rapport à la taille’,
hAxis : {title : ‘Square Meters’},
vAxis : {titre : « Prix en millions »},
légende : ‘aucune’
} ;
// Dessiner un graphique
var chart = new google.visualization.LineChart(document.getElementById(‘myChart’));
chart.draw (données, options);
}
Essayez-le vous-même »
Nuages de points
Pour nuage de points les mêmes données, remplacez google.visualization par ScatterChart :
var chart = new google.visualization.ScatterChart(document.getElementById(‘myChart’));
Essayez-le vous-même »
Diagramme à barres
Code source
fonction dessinerChart() {
var data = google.visualization.arrayToDataTable([
[‘Contry’, ‘Mhl’],
[‘Italy’, 55],
[‘France’, 49],
[‘Spain’, 44],
[‘USA’, 24],
[‘Argentina’, 15]
]);
var options = {
titre : ‘World Wide Wine Production’
} ;
var chart = new google.visualization.BarChart(document.getElementById(‘myChart’));
chart.draw (données, options);
}
Essayez-le vous-même »
Camemberts
Pour convertir un Bar Graphique à un Tarte graphique, remplacez simplement :
google.visualisation.Diagramme à bandes
avec:
google.visualisation.Diagramme circulaire
var graphique = nouveau google.visualization.Diagramme circulaire(document.getElementById(‘myChart’));
Essayez-le vous-même »
Tarte 3D
Pour afficher le Pie en 3D, il suffit d’ajouter is3D : vrai aux choix :
var options = {
titre: ‘World Wide Wine Production’,
is3D : vrai
} ;
Essayez-le vous-même »
#Graphique #Google