Visualización: Minigráfico (imagen)

Importante: La sección de gráficos de imágenes de las herramientas de Google Chart dejó de estar disponible oficialmente a partir del 20 de abril de 2012. Continuará funcionando de acuerdo con nuestra política de baja.

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

Descripción general

Uno o varios minigráficos que se renderizan con imágenes mediante la API de Google Charts Las imágenes se encuentran en una tabla HTML.

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:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Cargando

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

  google.charts.load("current", {packages: ["imagesparkline"]});

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

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

Formato de los datos

Cualquier cantidad de columnas Todas las columnas deben ser números. Cada columna se muestra como un minigráfico.

Opciones de configuración

Nombre Tipo Predeterminado Descripción
color string Especifica un color para usar en todos los gráficos. Una string en el formato #rrggbb. Por ejemplo: “#00cc00”. Se usa solo si no se especifica la opción colors.
colores Arreglo de strings Colores predeterminados Los colores que se usarán para las columnas de datos. Una matriz de strings en la que cada elemento es una string con el formato #rrggbb. Por ejemplo: “#00cc00”. El color i se utiliza para la columna de datos i. Si el número de colores es menor que el número de columnas, la selección de color se ajustará.
relleno boolean falso Si es verdadero, el área que aparece debajo de la línea se rellenará con color.
alto número Altura del contenedor Altura de las imágenes en píxeles.
labelPosition string ninguno La posición de las etiquetas. Los valores admitidos son “none”, “left” y “right”.
máx. Arreglo de números El valor máximo de datos de cada minigráfico El valor más alto para el rango de valores de datos de cada minigráfico. El índice del arreglo debe coincidir con el índice de la columna en la tabla de datos. Si todos los valores son nulos, este será el valor máximo en la serie.
min Arreglo de números El valor de datos mínimo de cada minigráfico El valor más bajo para el rango de valores de datos de cada minigráfico. El índice del arreglo debe coincidir con el índice de la columna en la tabla de datos. Si todos los valores son nulos, este será el valor mínimo en la serie.
mostrarAxisLines boolean true Si es verdadero, se muestran las líneas del eje. Si es falso, no lo son y el valor predeterminado para showValueLabels es falso.
showValueLabels boolean true, excepto cuando showAxisLines es falso. Si es verdadero, se muestran las etiquetas del eje de valor.
title Arreglo de strings No se muestran títulos Títulos para cada minigráfico
ancho número Ancho del contenedor Ancho de los gráficos, en píxeles.
diseño string "v" Diseño horizontal o vertical: "v" para vertical, "h" para horizontal.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) ninguno Dibuja el gráfico.
getSelection() Arreglo de elementos de selección Muestra los índices de los gráficos seleccionados como un arreglo de objetos. Cada objeto tiene una propiedad de columna que contiene el número de columna de un minigráfico seleccionado. Puede mostrar más de una columna seleccionada.
setSelection(selection) ninguno Selecciona los minigráficos especificados y anula la selección de cualquier minigráfico que no esté especificado. es un arreglo de objetos, cada uno con una propiedad column numérica, que es el índice del minigráfico seleccionado. Consulta setSelection() para obtener más información.

Eventos

Nombre Descripción Propiedades
select Evento de selección estándar Ninguno

Política de Datos

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