Personnaliser le graphique 

<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 comporte de nombreuses options personnalisables, y compris le titre, les couleurs, l'épaisseur des lignes, le remplissage de l'arrière-plan, etc. Bien que l'équipe Outils de graphique ait travaillé dur sur l'apparence par défaut du graphique, vous pouvez personnaliser votre graphique, par exemple en y ajoutant un titre ou des libellés d'axe.

Spécifiez des options personnalisées pour 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 liste un ensemble d'options personnalisables. Par exemple, les options disponibles pour le graphique à secteurs incluent "légend", "title" 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 et la taille du graphique, ainsi qu'une option 3D pour un graphique à secteurs:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Remplacez l'objet "options" de l'exemple ci-dessus par ces valeurs pour voir comment elles affectent le graphique.

Spécifier la taille du graphique

Une option très courante à définir est la hauteur et la largeur du graphique. 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 aux deux emplacements, le graphique affichera généralement 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, le graphique risque de ne pas s'afficher correctement.

Spécifier la taille à un endroit ou à un autre présente certains avantages:

  • Spécifier la taille en HTML : le chargement et l'affichage d'un graphique peuvent prendre quelques secondes. Si le conteneur du graphique est déjà dimensionné en HTML, la mise en page ne se déplacera pas lors du chargement du graphique.
  • Spécifier la taille en tant qu'option de graphique : si la taille du graphique est définie dans JavaScript, vous pouvez copier et coller, ou sérialiser, enregistrer et restaurer le code JavaScript, et faire en sorte que le graphique soit redimensionné de manière cohérente.

 

Plus d'infos