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 gráfico de linhas que é renderizado como uma imagem usando a API Google Charts.
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:["imagelinechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Carregando
O nome do pacote google.charts.load
é "imagelinechart"
.
google.charts.load('current', {packages: ['imagelinechart']});
O nome da classe do layout é google.visualization.ImageLineChart
.
var visualization = new google.visualization.ImageLineChart(container);
Formato de dados
A primeira coluna deve ser uma string e conter o rótulo de categoria. Qualquer número de colunas pode ser seguida, todas precisam ser numéricas. Cada coluna é exibida como uma linha separada.
Opções de configuração
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
backgroundColor | string | '#FFFFFF' (branca) | A cor do plano de fundo do gráfico no formato de cores da API Chart. |
Cores | Matriz<string> | Automático | Use essa opção para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API Chart.
A cor i é usada na coluna de dados i, envolvendo ao início
se houver mais colunas de dados do que cores. Se as variações de uma única cor forem aceitáveis para todas as séries, use a opção color . |
enableEvents | boolean | false | Faz com que os gráficos gerem eventos acionados pelo usuário, como clique ou mouse. Compatível apenas com tipos específicos de gráficos. Veja a seção Eventos abaixo. |
altura | number | Altura do contêiner | Altura do gráfico em pixels. |
lenda | string | "direita" | Posição e tipo de legenda. Será um dos seguintes valores:
|
max | number | automático | O valor máximo a ser exibido no eixo Y. |
min | number | automático | O valor mínimo a ser exibido no eixo Y. |
Linhas de linhas de apresentação | boolean | verdadeiro | Se definido como false, as linhas e os rótulos do eixo serão removidos. |
Marcadores de categoria | boolean | igual a showAxisLines | Se definido como false, remove os rótulos das categorias (os rótulos do eixo X). |
Rótulos de valor de exibição | boolean | igual a showAxisLines | Se definido como falso, remove os rótulos dos valores (os rótulos do eixo Y). |
title | string | sem título | Texto a ser exibido acima do gráfico. |
Intervalo de Rótulos de Valor | number | Automático | O intervalo em que os rótulos do eixo de valor são mostrados. Por exemplo, se min
for 0, max for 100 e valueLabelsInterval
for 20, o gráfico vai mostrar rótulos de eixo em (0, 20, 40, 60, 80 100). |
largura | number | Largura do contêiner | Largura do gráfico em pixels. |
Métodos
Método | Tipo de retorno | Descrição |
---|---|---|
draw(data, options) |
nenhum | Desenha o gráfico. |
Eventos
Você pode se registrar para ouvir os eventos descritos na página Gráfico genérico de imagens.
Política de dados
Consulte a política de geração de registros da API Chart.