Gráficos de Google: sintaxis de configuración

En este capítulo, demostraremos la configuración necesaria para dibujar un gráfico utilizando la API de Google Chart.

Paso 1. Crea una página HTML

Cree una página HTML con las bibliotecas de gráficos de Google.

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>

Aquí envase El div se utiliza para almacenar un gráfico dibujado con la biblioteca de Google Chart. Aquí estamos cargando la última API de corecharts usando el método google.charts.load.

Paso 2. Crea configuraciones

La biblioteca de Google Chart usa configuraciones muy simples usando la sintaxis json.

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

Aquí, los datos representan datos json y los parámetros representan la configuración que usa la biblioteca de Google Chart para dibujar el gráfico en un contenedor div usando el método draw (). Ahora configuraremos varios parámetros para generar la cadena json requerida.

título

Ajuste los parámetros del gráfico.

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

Tabla de datos

Personalice los datos para mostrarlos en el gráfico. DataTable es una colección estructurada de tabla especial que contiene datos de gráficos. Las columnas de la tabla de datos representan las leyendas y las filas representan los datos correspondientes. El método addColumn () se usa para agregar una columna donde el primer parámetro representa el tipo de datos y el segundo parámetro representa la leyenda. addRows () se usa para agregar filas en consecuencia.

// 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]
]);

Paso 3. Dibuja el diagrama

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

Ejemplo

A continuación se muestra un ejemplo completo:

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>

El siguiente código llama a la función drawChart para dibujar el gráfico cuando la biblioteca de Google Chart está completamente cargada.

google.charts.setOnLoadCallback(drawChart);

Resultado

Comprueba el resultado.

🚫