Google Charts - Graphique à bulles avec étiquettes
Voici un exemple de graphique à bulles avec des étiquettes de données. Un graphique à bulles est utilisé pour visualiser un ensemble de données ayant deux à quatre dimensions. Les deux premières dimensions sont visualisées sous forme de coordonnées, la troisième sous forme de couleur et la quatrième sous forme de taille. 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é BubbleChart classe pour afficher le graphique à bulles.
//area chart
var chart = new google.visualization.BubbleChart(document.getElementById('container'));Exemple
googlecharts_bubble_labels.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 = new google.visualization.DataTable();
data.addColumn('string', 'Id');
data.addColumn('number', 'Age');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Robert', 8, 12],
[ 'Mohan', 4, 5.5],
[ 'Ramesh', 11, 14],
[ 'Julie', 4, 5],
[ 'Sohan', 3, 3.5],
[ 'Karim', 6.5, 7]
]);
// Set chart options
var options = {'title':'Age vs Weight', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.