Importante:o uso do componente de gráficos de imagem das Ferramentas de gráfico do Google foi suspenso oficialmente em 20 de abril de 2012. Ela vai continuar funcionando de acordo com nossa política de descontinuação.
Visão geral
Um ou vários gráficos sparkline renderizados com imagens usando a API Google Charts. As imagens estão contidas em uma tabela HTML.
Exemplo
<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>
Carregando
O nome do pacote google.charts.load
é "imagesparkline"
.
google.charts.load("current", {packages: ["imagesparkline"]});
O nome da classe do layout é google.visualization.ImageSparkLine
.
var visualization = new google.visualization.ImageSparkLine(container);
Formato de dados
Qualquer número de colunas. Todas as colunas precisam ser números. Cada coluna é exibida como um único minigráfico.
Opções de configuração
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
cor | string | Especifica uma cor a ser usada em todos os gráficos.
Uma string no formato #rrggbb. Por exemplo: "#00cc00".
Usado somente se a opção colors não for especificada. |
|
Cores | Matriz de strings | Cores padrão | As cores a serem usadas para as colunas de dados. Uma matriz de strings em que cada elemento é uma string no formato #rrggbb. Por exemplo: "#00cc00". A cor i é usada para a coluna de dados i. Se o número de cores for menor que o número de colunas, a seleção de cores vai ser agrupada. |
fill | boolean | false | Se verdadeiro, preencherá a área abaixo da linha em cores. |
altura | number | Altura do contêiner | Altura das imagens, em pixels. |
labelPosition | string | nenhum | A posição dos rótulos. Os valores aceitos são "none", "left" e "right". |
max | Matriz de números | O valor máximo de dados de cada minigráfico | O valor mais alto para o intervalo de valores de dados de cada minigráfico. O índice na matriz precisa corresponder ao índice da coluna na DataTable. Se todos os valores forem nulos, esse será o valor máximo na série. |
min | Matriz de números | O valor mínimo de dados de cada minigráfico | O menor valor para o intervalo de valores de dados de cada minigráfico. O índice na matriz precisa corresponder ao índice da coluna na DataTable. Se todos os valores forem nulos, vai ter o valor mínimo na série. |
Linhas de linhas de apresentação | boolean | verdadeiro | Se for verdadeiro, as linhas do eixo serão mostradas. Se for falso, não serão, e o padrão para showValueLabel é falso. |
Rótulos de valor de exibição | boolean | verdadeiro, exceto quando showAxisLines for falso. | Se for verdadeiro, os rótulos do eixo de valor serão exibidos. |
title | Matriz de strings | Nenhum título é exibido | Títulos a serem usados em cada minigráfico. |
largura | number | Largura do contêiner | Largura dos gráficos, em pixels. |
layout. | string | "v" | Layout vertical ou horizontal: "v" para vertical e "h" para horizontal. |
Métodos
Método | Tipo de retorno | Descrição |
---|---|---|
draw(data, options) |
nenhum | Desenha o gráfico. |
getSelection() |
Matriz de elementos de seleção | Retorna os índices dos gráficos selecionados como uma matriz de objetos. Cada objeto tem uma propriedade de coluna que contém o número da coluna de um minigráfico selecionado. É possível retornar mais de uma coluna selecionada. |
setSelection(selection) |
nenhum | Seleciona o gráfico sparkline especificado e desmarca qualquer minigráfico. seleção é uma matriz de objetos, cada um com uma propriedade column numérica, que é o índice do gráfico sparkline selecionado. Consulte setSelection() para mais informações. |
Eventos
Nome | Descrição | Propriedades |
---|---|---|
select | Evento de seleção padrão. | Nenhum |
Política de dados
Consulte a política de geração de registros da API Chart.