Graphiques Google

De la simple ligne en zigzag à la complexe arborescence hiérarchique, la bibliothèque de graphiques Google offre un large éventail de types de graphiques disponibles à tout moment :

  • Graphique en nuage de points (Scatter Chart)
  • Graphique en ligne (Line Chart)
  • Graphique en barres / colonnes (Bar / Column Chart)
  • Graphique en surface (Area Chart)
  • Graphique en secteurs (Pie Chart)
  • Graphique en donut (Donut Chart)
  • Graphique d'organisation (Org Chart)
  • Carte / Graphique géographique (Map / Geo Chart)

Comment utiliser Google Chart ?

Si vous souhaitez utiliser Google Chart sur une page web, veuillezAjouter un lien vers le chargeur de graphique:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Les graphiques Google sont faciles à utiliser.

Ajouter simplement un <div> L'élément peut afficher le graphique :

<div id="myChart" style="max-width:700px; height:400px"></div>

L'élément <div> doit avoir un ID unique.

Ensuite, chargez l'API Google Graph :

  1. Charger l'API de visualisation et le paquet corechart
  2. Définir une fonction de rappel, qui est appelée après le chargement de l'API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

C'est tout !

diagramme en ligne

Code source

function drawChart() {
// Définir les données
var data = google.visualization.arrayToDataTable([
  ['Prix', 'Taille'],
  [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 = {
  title: 'Prix et superficie des maisons'
  hAxis: {title: 'Mètres carrés'},
  vAxis: {title: 'Prix en millions'},
  legend: 'none'
};
// Dessiner le graphique
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Essayer par vous-même

diagramme en nuage de points

Les mêmes données doivent être généréesdiagramme en nuage de points，veuillez remplacer google.visualization modifiez ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Essayer par vous-même

diagramme en barres

Code source

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italie', 55],
  ['France', 49],
  ['Espagne', 44],
  ['États-Unis', 24],
  
]
var options = {
  title: 'Production mondiale de vin'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Essayer par vous-même

diagramme circulaire

Pour convertir un diagramme en barres endiagramme circulaire，il suffit d'utiliser :

google.visualization.PieChart

Remplacement :

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Essayer par vous-même

diagramme circulaire 3D

Pour afficher un diagramme circulaire en 3D, il suffit de is3D: true Ajouter aux options :

var options = {
  title: 'Production mondiale de vin',
  is3D: true
};

Essayer par vous-même