Graphiques Google - Ensembles de graphiques histogrammes
Voici un exemple de graphique histogramme avec une taille de compartiment personnalisée. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé bucketSize configuration de histogram pour modifier la taille de compartiment par défaut du graphique histogramme.
// Set chart options
var options = {
histogram: { bucketSize: 5 }
};Exemple
googlecharts_histogram_bucket.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Student Roll No', 'height'],
['1', 80],['2', 55],['3', 68],['4', 80],['5', 54],
['6', 70],['7', 85],['8', 78],['9', 70],['10', 58],
['11', 90],['12', 65],['13', 88],['14', 82],['15', 65],
['16', 86],['17', 45],['18', 62],['19', 84],['20', 75],
['21', 82],['22', 75],['23', 58],['24', 70],['25', 85]
]);
// Set chart options
var options = {
title: 'Students height, in cms',
legend: { position: 'none' },
histogram: { bucketSize: 5 }
};
// Instantiate and draw the chart.
var chart = new google.visualization.Histogram(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.