Visualização: Spark (Imagem)

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.