Visualização: minigráfico (imagem)

Importante: a parte de gráficos de imagem das Ferramentas de gráficos do Google foi oficialmente suspensa em 20 de abril de 2012. Ele continuará funcionando de acordo com nossa política de descontinuação.

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um ou vários minigráficos são renderizados com imagens usando a Google Charts API. 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 da visualização é 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
color string Especifica uma cor para usar em todos os gráficos. Uma string no formato #rrggbb. Por exemplo: "#00cc00". Usado somente se a opção colors não estiver 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 será definida.
fill boolean false Se verdadeiro, preencherá a área abaixo da linha com cor.
height 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 da série.
min Matriz de números O valor mínimo dos 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, esse será o valor mínimo da série.
showAxisLines boolean verdadeiro Se verdadeiro, as linhas de eixo serão mostradas. Se for falso, eles não serão, e o padrão para showValueLabels será falso.
showValueLabels boolean verdadeiro, exceto quando showAxisLines é falso. Se verdadeiro, os rótulos dos eixos de valor são mostrados.
título Matriz de strings Nenhum título exibido Títulos a serem usados para cada minigráfico.
width number Largura do contêiner Largura dos gráficos, em pixels.
layout string "v" Layout vertical ou horizontal: "v" para vertical, "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. Pode retornar mais de uma coluna selecionada.
setSelection(selection) nenhum Seleciona os minigráficos especificados e desmarca os minigráficos que não estão especificados. seleção é uma matriz de objetos, cada um com uma propriedade column numérica, que é o índice do minigráfico 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 de gráficos.