Visualización: gráfico de líneas (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 líneas 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:["imagelinechart"]});
      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.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Cargando

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

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

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

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

Formato de datos

La primera columna debe ser una cadena y contener la etiqueta de la categoría. Puede ir seguida de cualquier cantidad de columnas. Todas deben ser numéricas. Cada columna se muestra como una línea separada.

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.
showAxisLines boolean verdadero Si se establece como falsa, quita las líneas y etiquetas de los ejes.
showCategoryLabels boolean Igual que showAxisLines Si la estableces como falsa, se quitarán las etiquetas de las categorías (las etiquetas del eje X).
showValueLabels boolean Igual que showAxisLines 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.