Visualización: gráfico de áreas (imagen)

Importante: La sección de gráficos de imágenes de las herramientas de gráficos de Google se dio de baja oficialmente a partir del 20 de abril de 2012. Seguirá funcionando de acuerdo con nuestra política de baja.

  1. Overview
  2. Ejemplo
  3. Cargando
  4. Formato de los datos
  5. Opciones de configuración
  6. Métodos
  7. Eventos
  8. Política de Datos

Descripción general

Un gráfico de áreas que se renderiza como una imagen con la API de Google Charts.

Ejemplo

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Cargando

El nombre del paquete google.charts.load es "imageareachart" 

  google.charts.load('current', {packages: ['imageareachart']});

El nombre de clase de la visualización es google.visualization.ImageAreaChart 

  var visualization = new google.visualization.ImageAreaChart(container);

Formato de datos

Cada columna representa una línea en el gráfico; cada entrada es el valor del eje Y en el mismo punto del eje X, y la visualización las conecta con una línea recta y, luego, se llena el área debajo de la línea.

Los datos se procesan por columna, comenzando en la columna cero y aumentando. Debes escribir las líneas más altas primero y, luego, las inferiores, porque si pintas una línea inferior primero, la línea más alta pinta y oculta las líneas inferiores. Por lo tanto, trata de que la columna 1 tenga puntos más altos que la columna 2, que la columna 2 sea más alta que la columna 3, y así sucesivamente. Si tienes uno o dos puntos más arriba en una columna derecha que en una columna izquierda, es posible que se oculte parcialmente la línea inferior, pero debería estar visible.

Todos los datos deben ser de tipo numérico, excepto el primero, que puede ser numérico o de cadena. Si la primera columna es de tipo string, las primeras entradas de la columna se mostrarán como etiquetas en la X; si la primera columna es un número, no se mostrarán etiquetas del eje X. Todas las columnas (excepto la primera) deben ser números. No hay límite para la cantidad de columnas.

Opciones de configuración

Nombre Tipo Predeterminado Descripción
backgroundColor cadena '#FFFFFF' (blanco) El color de fondo del gráfico en el formato de color de la API de Chart.
colores Arreglo<string> Automático Úsala para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de Chart. El color i se usa para la columna de datos i y se ajusta al principio si hay más columnas de datos que colores. Si las variaciones de un solo color son aceptables para todas las series, usa la opción color en su lugar.
enableEvents boolean false Hace que los gráficos muestren eventos activados por el usuario, como un clic o el mouse. Solo es compatible con tipos de gráficos específicos. Consulta la sección Eventos a continuación.
height número Altura del contenedor Es la altura del gráfico en píxeles.
leyenda cadena 'derecha' Posición y tipo de leyenda. Puede ser una de las siguientes opciones:
  • "right": a la derecha del gráfico.
  • "left": se encuentra a la izquierda del gráfico.
  • “top”: se encuentra encima del gráfico.
  • "parte inferior": se encuentra debajo del gráfico.
  • "none": No se muestra ninguna leyenda.
max número automático Valor máximo que se mostrará en el eje Y.
min número automático El valor mínimo que se muestra en el eje Y.
showCategoryLabels boolean verdadero Si la estableces como falsa, se quitarán las etiquetas de las categorías (las etiquetas del eje X).
showValueLabels boolean verdadero Si se establece como falsa, quita las etiquetas de los valores (las etiquetas del eje Y).
título cadena sin título Es el texto que se mostrará sobre el gráfico.
valueLabelsInterval número Automático El intervalo en el que se muestran las etiquetas del eje de valores. Por ejemplo, si min es 0, max es 100 y valueLabelsInterval es 20, el gráfico mostrará etiquetas de eje en (0, 20, 40, 60, 80 100).
width número Ancho del contenedor Es el ancho del gráfico en píxeles.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) ninguno Dibuja el gráfico.

Eventos

Regístrate para escuchar los eventos descritos en la página Gráfico de imágenes genéricas.

Política de Datos

Consulta la política de registro de la API de Chart.