Créer un diagramme circulaire avec Google Charts
Grossièrement appelés diagrammes de Normandie « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données à une variable. Il est très facile de créer ce type de diagramme grâce à des librairies comme Highchart ou Google Charts. Aujourd’hui, je vais vous montrer comment créer un diagramme circulaire grâce à Google Chart.
<!DOCTYPE html>
<html>
<head>
<title>Diagramme circulaire</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Chart 1
var data = google.visualization.arrayToDataTable([['OS Mobile', 'Parts de marché'],["Android",71.40],["iOS",14.70],["Windows Phone",10.60],["Blackberry",1.00],["Autres",2.30]]);
var options = {
title: 'Parts de marché des OS Mobile en Juin 2014 (France)'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 100%; height: 500px;"> </div>
</body>
</html>
Comme vous le voyez, avec juste ces quelques lignes de code, on peut créer un diagramme circulaire vraiment facilement grâce à Google Charts.
Pratique pour un projet rapide, ou montrer des statistiques à votre boss d’une belle façon.
2 Commentaires
laurie
A propos5 ans agobonjour J'ai essayé ce code source, mais j'ai un joli rectangle gris au lieu du camembert. Est ce que ça vous inspire un problème ? Je ne comprends pas pourquoi.
RépondreImatt
A propos5 ans agoBonjour Laurie, ça ne me dit rien comme ça. Aurais-tu un lien à partager pour que je puisse voir ? Merci
Répondre