Google Charts - Syntaxe de configuration

Dans ce chapitre, nous présenterons la configuration requise pour dessiner un graphique à l'aide de l'API Google Chart.

Étape 1: créer une page HTML

Créez une page HTML avec les bibliothèques Google Chart.

googlecharts_configuration.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>
   </body>
</html>

Ici containerdiv est utilisé pour contenir le graphique dessiné à l'aide de la bibliothèque Google Chart. Ici, nous chargeons la dernière version de l'API corecharts à l'aide de la méthode google.charts.load.

Étape 2: créer des configurations

La bibliothèque Google Chart utilise des configurations très simples utilisant la syntaxe json.

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Ici, les données représentent les données json et les options représentent la configuration utilisée par la bibliothèque Google Chart pour dessiner un graphique avec le conteneur div à l'aide de la méthode draw (). Nous allons maintenant configurer les différents paramètres pour créer la chaîne json requise.

Titre

Configurez les options du graphique.

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};

DataTable

Configurez les données à afficher sur le graphique. DataTable est une collection structurée de table spéciale qui contient les données du graphique. Les colonnes de la table de données représentent les légendes et les lignes représentent les données correspondantes. La méthode addColumn () est utilisée pour ajouter une colonne où le premier paramètre représente le type de données et le second paramètre représente la légende. La méthode addRows () est utilisée pour ajouter des lignes en conséquence.

// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
]);

Étape 3: dessinez le graphique

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Exemple

Voici l'exemple complet -

googlecharts_configuration.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', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Le code suivant appelle la fonction drawChart pour dessiner un graphique lorsque la bibliothèque Google Chart est complètement chargée.

google.charts.setOnLoadCallback(drawChart);

Résultat

Vérifiez le résultat.

↰ Previous page Next page ↱