Se usó la API de Cloud Translation para traducir esta página.

Visualización: minigráfico (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.

Overview
Ejemplo
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
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 datos

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

Opciones de configuración

Nombre	Tipo	Predeterminado	Descripción
color	cadena		Especifica un color para usar en todos los gráficos. Una cadena con el formato #rrggbb. Por ejemplo: “#00cc00”. Solo se usa 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. Un array de cadenas en el que cada elemento es una cadena con el formato #rrggbb. Por ejemplo: “#00cc00”. El color i se usa para la columna de datos i. Si la cantidad de colores es menor que la cantidad de columnas, se ajustará la selección de color.
relleno	boolean	false	Si esta preferencia se establece como "true", se completará el área debajo de la línea en color.
height	número	Altura del contenedor	Es la altura de las imágenes en píxeles.
labelPosition	cadena	ninguno	La posición de las etiquetas. Los valores admitidos son “none”, “left”, “right”.
max	Array de números	El valor máximo de datos de cada minigráfico	El valor más alto para el rango de valores de los datos de cada minigráfico. El índice del array debe coincidir con el índice de la columna de DataTable. Si todos los valores son nulos, este será el valor máximo de la serie.
min	Array de números	El valor mínimo de datos de cada minigráfico	El valor más bajo para el rango de valores de los datos de cada minigráfico. El índice del array debe coincidir con el índice de la columna de DataTable. Si todos los valores son nulos, este será el valor mínimo de la serie.
showAxisLines	boolean	verdadero	Si es verdadero, se muestran las líneas de los ejes. Si son falsos, no lo son, y el valor predeterminado para showValueLabels es falso.
showValueLabels	boolean	true, excepto cuando showAxisLines es false.	Si es verdadero, se muestran las etiquetas del eje de valor.
título	Arreglo de strings	No se muestran títulos	Títulos para usar en cada minigráfico.
width	número	Ancho del contenedor	Es el ancho de los gráficos en píxeles.
layout	cadena	"v"	Diseño horizontal o vertical: "v" para vertical, y "h" para horizontal.

Métodos

Método	Tipo de datos que se muestra	Descripción
`draw(data, options)`	ninguno	Dibuja el gráfico.
`getSelection()`	Array de elementos de selección	Devuelve los índices de los gráficos seleccionados como un array 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 los que no se hayan especificado. la selección es un array de objetos, cada uno de los cuales tiene una propiedad numérica `column`, 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 Chart.