En este capÃtulo, demostraremos la configuración necesaria para dibujar un gráfico utilizando la API de Google Chart.
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.
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.
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};
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] ]);
// Instantiate and draw the chart. var chart = new google.visualization.PieChart(document.getElementById('container')); chart.draw(data, options);
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);
Comprueba el resultado.
🚫