Articles /

Cargar las bibliotecas

Esta página muestra cómo cargar las bibliotecas de Google Chart.

Carga básica de bibliotecas

Con pocas excepciones, todas las páginas web con Google Charts deben incluir las siguientes líneas en el <head> de la página web:

<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>

La primera línea de este ejemplo carga el propio cargador. Sólo puede cargar el cargador una vez, sin importar el número de gráficos que planee dibujar. Después de cargar el cargador, puede llamar a la función google.charts.load una o más veces para cargar paquetes para tipos de gráficos particulares.

El primer argumento de google.charts.load es el nombre o número de la versión, como una cadena. Si se especifica 'current', se carga la última versión oficial de Google Charts. Si desea probar la versión candidata a la siguiente, utilice 'upcoming'. En general, habrá muy poca diferencia entre las dos, y serán completamente idénticas, excepto cuando se trate de una nueva versión. Una razón habitual para utilizar upcoming es que quieras probar un nuevo tipo de gráfico o una nueva función que Google vaya a lanzar en uno o dos meses. (Anunciamos los próximos lanzamientos en nuestro foro y le recomendamos que los pruebe cuando se anuncien, para asegurarse de que cualquier cambio en sus gráficos sea aceptable.)

El ejemplo anterior supone que desea mostrar un corechart(barra, columna, línea, área, área escalonada, burbuja, pastel, donut, combo, candelabro, histograma, dispersión). Si desea un tipo de gráfico diferente o adicional, sustituya o añada el nombre del paquete apropiado para corechart arriba (por ejemplo, {packages: }. Puede encontrar el nombre del paquete en la sección ‘Loading’ de la página de documentación de cada gráfico.

Este ejemplo también asume que tiene una función JavaScript llamada drawChart definida en algún lugar de su página web. Puedes nombrar esa función como quieras, pero asegúrate de que es globalmente única y de que está definida antes de hacer referencia a ella en tu llamada a google.charts.setOnLoadCallback.

Nota: las versiones anteriores de Google Charts utilizaban un código diferente al anterior para cargar las bibliotecas. Para actualizar sus gráficos existentes para utilizar el nuevo código, consulte Actualizar el código del cargador de bibliotecas.

Aquí tiene un ejemplo completo de cómo dibujar un gráfico circular utilizando la técnica de carga básica:

<head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); function drawChart() { // Define the chart to be drawn. var data = new google.visualization.DataTable(); data.addColumn('string', 'Element'); data.addColumn('number', 'Percentage'); data.addRows(, , ]); // Instantiate and draw the chart. var chart = new google.visualization.PieChart(document.getElementById('myPieChart')); chart.draw(data, null); } </script></head><body> <!-- Identify where the chart should be drawn. --> <div/></body>

Detalles de la carga

En primer lugar, debe cargar el propio cargador, lo que se hace en una etiqueta script separada con src="https://www.gstatic.com/charts/loader.js". Esta etiqueta puede estar en el head o en el body del documento, o puede insertarse dinámicamente en el documento mientras se está cargando o una vez finalizada la carga. 

<script src="https://www.gstatic.com/charts/loader.js"></script>

Una vez cargado el cargador, es libre de llamar a google.charts.load. Donde lo llame puede ser en una etiqueta script en el head o body del documento, y podría llamarlo tanto mientras el documento aún se está cargando como en cualquier momento después de que haya terminado de cargarse.

A partir de la versión 45, puede llamar a google.charts.load más de una vez para cargar paquetes adicionales, aunque es más seguro si puede evitar hacerlo. Debe proporcionar el mismo número de versión y la misma configuración de idioma cada vez.

Ahora puede utilizar el antiguo parámetro URL JSAPI autoload, pero el valor de este parámetro debe utilizar el formato JSON estricto y la codificación URL. En JavaScript, puede hacer la codificación de jsonObject con este código: encodeURIComponent(JSON.stringify(jsonObject)).

Limitaciones

Si estás usando versiones anteriores a la v45, hay un par de limitaciones menores pero importantes con la forma de cargar Google Charts:

  1. Sólo puedes llamar a google.charts.load una vez. Pero puedes listar todos los paquetes que necesitarás en una sola llamada, así que no hay necesidad de hacer llamadas separadas.
  2. Si estás usando un ChartWrapper, debes cargar explícitamente todos los paquetes que necesitarás, en lugar de confiar en que el ChartWrapper los cargue automáticamente por ti.
  3. Para Geochart y Map Chart, debe cargar tanto el antiguo cargador de bibliotecas como el nuevo. De nuevo, esto es sólo para las versiones anteriores a la v45, y no debe hacer esto para las versiones posteriores. 
    <script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>

Cargar nombre o número de versión

El primer argumento de su llamada google.charts.load es el nombre o número de versión. Sólo hay dos nombres de versión especiales en este momento, y varias versiones congeladas.

actual Esto es para la última versión oficial que cambia cada vez que lanzamos una nueva versión. Esta versión es idealmente bien probado y libre de errores, pero es posible que desee especificar una versión particular congelada en su lugar una vez que esté satisfecho de que está funcionando. próxima Esto es para la próxima versión, mientras que todavía se está probando y antes de que se convierta en la versión oficial actual. Por favor, pruebe esta versión con regularidad para saber lo antes posible si hay algún problema que deba solucionarse antes de que esta versión se convierta en la oficial.

Cuando lanzamos nuevas versiones de Google Charts, algunos de los cambios son grandes, como los tipos de gráficos completamente nuevos. Otros cambios son pequeños, como las mejoras en la apariencia o el comportamiento de los gráficos existentes.

Muchos creadores de Google Chart ajustan el aspecto y la sensación de sus gráficos hasta que es exactamente lo que quieren. Algunos creadores pueden sentirse más cómodos sabiendo que sus gráficos nunca cambiarán, independientemente de las mejoras que hagamos en el futuro. Para esos usuarios, admitimos los gráficos congelados de Google.

Las versiones congeladas de los gráficos se identifican con un número y se describen en nuestras publicaciones oficiales.Para cargar una versión congelada, sustituye current o upcoming en tu llamada de google.charts.load por el número de la versión congelada:

<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>

Esperamos que las versiones congeladas sigan estando disponibles indefinidamente, aunque es posible que retiremos las versiones congeladas que tengan problemas de seguridad. Por lo general, no proporcionaremos soporte para las versiones congeladas, excepto para sugerirle que se actualice a una versión más reciente.

Cargar configuraciones

El segundo parámetro en su llamada de google.charts.load es un objeto para especificar configuraciones. Se admiten las siguientes propiedades para los ajustes.

paquetes Una matriz de cero o más paquetes. Cada paquete que se cargue tendrá el código necesario para soportar un conjunto de funcionalidades, normalmente un tipo de gráfico. El paquete o paquetes que necesita cargar se enumeran en la documentación de cada tipo de gráfico. Puede evitar especificar cualquier paquete si utiliza un ChartWrapper para cargar automáticamente lo que será necesario. language El código para el idioma o locale que debe ser para personalizar el texto que podría ser parte del gráfico. Vea Locales para más detalles. callback Una función que será llamada una vez que los paquetes hayan sido cargados. Alternativamente, puede especificar esta función llamando a

google.charts.setOnLoadCallbackcomo se demuestra en el ejemplo anterior. Ver Callback para más detalles.

 google.charts.load('current', { packages: , callback: drawChart });

mapsApiKey (v45) Esta configuración le permite especificar una clave que puede utilizar con Geochart y Map Chart. Es posible que desee hacer esto en lugar de utilizar el comportamiento predeterminado, que puede dar lugar a un estrangulamiento ocasional del servicio para sus usuarios. Aprenda a configurar su propia clave para utilizar el servicio «Google Maps JavaScript API» aquí: Obtención de una clave/Autenticación. Tu código se parecerá a lo siguiente:

 var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });

safeMode (v47) Si se establece en true, todos los gráficos y las descripciones emergentes que generen HTML a partir de datos suministrados por el usuario se desinfectarán eliminando los elementos y atributos no seguros. Como alternativa (v49+), la biblioteca puede cargarse en modo seguro mediante un acceso directo que acepta la misma configuración de carga, pero siempre carga la versión «actual»:

 google.charts.safeLoad({ packages: });

Locales

Las locales se utilizan para personalizar el texto para un país o un idioma, lo que afecta al formato de valores como las monedas, las fechas y los números.

De forma predeterminada, los gráficos de Google se cargan con la localización «en». Puede anular este valor predeterminado especificando explícitamente una configuración regional en los ajustes de carga.

Para cargar un gráfico formateado para una configuración regional específica, utilice la configuración language de la siguiente manera:

 // Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});

Siga este enlace para ver un ejemplo en vivo.

Callback

Antes de poder utilizar cualquiera de los paquetes cargados por google.charts.load tiene que esperar a que termine la carga. No basta con esperar a que el documento termine de cargarse. Dado que puede pasar algún tiempo antes de que esta carga termine, es necesario registrar una función de devolución de llamada. Hay tres maneras de hacerlo. O bien se especifica una configuración callback en su llamada google.charts.load, o se llama a setOnLoadCallback pasando una función como argumento, o se utiliza la Promesa que es devuelta por la llamada de google.charts.load.

Tenga en cuenta que para todas estas formas, usted necesita proporcionar una definición de la función, en lugar de llamar a la función. La definición de la función que proporcione puede ser una función con nombre (por lo que sólo tiene que dar su nombre) o una función anónima. Cuando los paquetes hayan terminado de cargarse, esta función de devolución de llamada será llamada sin argumentos. El cargador también esperará a que el documento termine de cargarse antes de llamar al callback.

Si desea dibujar más de un gráfico, puede registrar más de una función de devolución de llamada utilizando setOnLoadCallback, o puede combinarlas en una sola función. Obtenga más información sobre cómo dibujar varios gráficos en una página. 

 google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });

Callback vía Promise

Otra forma de registrar su callback es utilizar la Promise que se devuelve de la llamada google.charts.load. Esto se hace añadiendo una llamada al método then() con un código parecido al siguiente. 

 google.charts.load('upcoming', {packages: }).then(drawChart);

Una de las ventajas de usar la Promesa es que entonces puedes dibujar fácilmente más gráficos simplemente encadenando más llamadas .then(anotherFunction). El uso de la Promesa también vincula el callback a los paquetes específicos requeridos para ese callback, lo cual es importante si quieres cargar más paquetes con otra llamada de google.charts.load().

Actualización del código del cargador de bibliotecas

Las versiones anteriores de Google Charts utilizaban un código diferente para cargar las bibliotecas. La siguiente tabla muestra el código antiguo del cargador de bibliotecas frente al nuevo.

Código antiguo del cargador de bibliotecas 

<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript"> google.load("visualization", "1", {packages:}); google.setOnLoadCallback(drawChart);</script>

Código nuevo del cargador de bibliotecas 

<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart);</script>

Para actualizar los gráficos existentes, puede reemplazar el código antiguo del cargador de bibliotecas por el nuevo código.Sin embargo, tenga en cuenta las limitaciones en la carga de bibliotecas descritas anteriormente.

Leave a Reply