<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
Spécifier les options
Chaque graphique dispose de nombreuses options personnalisables, y compris le titre, les couleurs, l'épaisseur du trait, le remplissage d'arrière-plan, etc. Bien que l'équipe des outils de graphique ait travaillé sans relâche sur l'apparence par défaut des graphiques, vous pouvez personnaliser votre graphique, par exemple pour y ajouter des titres d'axe ou des titres.
Spécifiez les options personnalisées de votre graphique en définissant un objet JavaScript avec les propriétés option_name/option_value. Utilisez les noms d'options indiqués dans la documentation du graphique. La documentation de chaque graphique répertorie un ensemble d'options personnalisables. Par exemple, les options disponibles pour le graphique à secteurs incluent "légende", "titre" et "is3D". Toutes les options ont une valeur par défaut documentée.
L'objet suivant définit la position de la légende, le titre du graphique, la taille du graphique et une option 3D pour un graphique à secteurs:
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':400,
'height':300
}
Mettez à jour l'objet d'options de l'exemple ci-dessus avec ces valeurs pour voir comment elles affectent le graphique.
Spécifier la taille du graphique
La hauteur et la largeur du graphique sont très souvent définies. Vous pouvez spécifier la taille du graphique à deux endroits: dans le code HTML de l'élément <div> du conteneur ou dans les options du graphique. Si vous spécifiez la taille dans les deux emplacements, le graphique s'affichera généralement sur la taille spécifiée dans le code HTML. Si vous ne spécifiez pas de taille de graphique dans le code HTML ou en tant qu'option, il est possible que le graphique ne s'affiche pas correctement.
Spécifier la taille à l'un ou l'autre endroit présente des avantages:
- Spécifier la taille en HTML : le chargement et l'affichage d'un graphique peuvent prendre quelques secondes. Si le conteneur de graphique est déjà dimensionné en HTML, la mise en page ne saute pas lors du chargement du graphique.
- Spécifier la taille en tant qu'option de graphique : si la taille du graphique est en JavaScript, vous pouvez copier et coller, ou sérialiser, enregistrer et restaurer le code JavaScript, et redimensionner le graphique.