Visão geral
Os gráficos de dispersão exibem pontos em um gráfico. Quando o usuário passa o cursor sobre os pontos, as dicas são exibidas com mais informações.
Os gráficos de dispersão do Google são renderizados no navegador usando SVG ou VML, dependendo dos recursos do navegador.
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':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Como alterar e animar formas
Por padrão, os gráficos de dispersão representam os elementos do conjunto de dados com círculos. É possível especificar outras formas com
a opção pointShape
, detalhada na
documentação Como
personalizar pontos.
Anime os outros gráficos do Google usando os eventos. É possível adicionar um
listener de eventos para o primeiro evento ready
e desenhar o gráfico novamente
depois de fazer as modificações desejadas. Após o primeiro evento ready
, é possível detectar o evento animationfinish
para repetir o processo, resultando em uma animação contínua. A opção animation
controla como o novo desenho ocorre: imediatamente
(sem animação) ou suavemente e se está suavemente, e com que comportamento.
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
Criar gráficos de dispersão do Material Design
Em 2014, o Google anunciou diretrizes destinadas a oferecer suporte a uma aparência comum em todas as propriedades e apps (como apps Android) executadas nas plataformas do Google. Chamamos isso de Material Design. Forneceremos versões de "Material" de todos os nossos gráficos principais. Fique à vontade para usá-los se quiser.
A criação de um gráfico de dispersão do Material Design é semelhante à criação do gráfico de dispersão "clássico". Carregue a API de visualização do Google (embora com o pacote 'scatter'
em vez do pacote 'corechart'
), defina sua tabela de dados e crie um objeto
(mas da classe google.charts.Scatter
em vez de
google.visualization.ScatterChart
).
Observação:os gráficos do Material Design não funcionam nas versões mais antigas do Internet Explorer. O IE8 e versões anteriores não oferecem suporte a SVG, que são obrigatórios para os gráficos do Material Design.
Os gráficos de dispersão do Material Design têm muitas pequenas melhorias em relação aos gráficos de dispersão clássicos, incluindo opacidade variável para legibilidade dos pontos sobrepostos, uma paleta de cores aprimorada, formatação de rótulos mais clara, espaçamento padrão mais restrito, linhas e títulos mais suaves e a adição de legendas.
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
Os gráficos do Material Design estão na versão Beta. A aparência e a interatividade são finais, mas muitas das opções disponíveis nos gráficos clássicos ainda não estão disponíveis nelas. Veja uma lista de opções que ainda não têm suporte
neste problema.
Além disso, a maneira como as opções são declaradas não está finalizada, portanto, se você estiver usando qualquer uma
das opções clássicas, será necessário convertê-las em opções materiais substituindo esta linha:
chart.draw(data, options);
...por:
chart.draw(data, google.charts.Scatter.convertOptions(options));
Gráficos Y duplo
Às vezes, você vai querer mostrar duas séries em um gráfico de dispersão com dois eixos y independentes: um eixo esquerdo para uma série e outro para a direita:
Os dois eixos y são rotulados de forma diferente ("Nota final do exame" x "Horas estudadas"), e cada um deles tem a própria escala e linha de grade independentes. Se você quiser
personalizar esse comportamento, use as opções vAxis.gridlines
.
No código abaixo, as opções axes
e series
especificam a aparência de Y duplo do gráfico. A opção series
especifica qual eixo usar para cada um ('final grade'
e 'hours studied'
. Eles não precisam ter nenhuma relação com os nomes das colunas na tabela de dados). A opção axes
torna esse gráfico um duplo Y, posicionando o eixo 'Final Exam Grade'
à esquerda e o eixo 'Hours Studied'
à direita.
google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };
Gráficos X
Observação:os eixos Top-X estão disponíveis apenas para gráficos do Material Design (ou seja, aqueles com o pacote
scatter
).
Se você quiser colocar os rótulos e os títulos dos eixos X na parte de cima do gráfico, e não na parte de baixo,
faça isso nos gráficos do Material Design com a opção axes.x
:
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
Carregando
O nome do pacote google.charts.load
é "corechart"
,
e o nome da classe da visualização é google.visualization.ScatterChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
Para gráficos de dispersão do Material Design, o nome do pacote google.charts.load
é
"scatter"
e o nome da classe da visualização é google.charts.Scatter
.
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
Formato de dados
Linhas:cada linha da tabela representa um conjunto de pontos de dados com o mesmo valor do eixo x.
Columns:
Coluna 0 | Coluna 1 | … | Coluna N | |
---|---|---|---|---|
Finalidade: | Valores de ponto de dados X | Valores Y da série 1 | … | Valores da série N Y |
Tipo de dado: | string, número ou data/hora/hora | string, número ou data/hora/hora | … | string, número ou data/hora/hora |
Papel: | dados | dados | … | dados |
Papéis de coluna opcionais: | Nenhuma |
… |
Para especificar várias séries, especifique duas ou mais colunas do eixo Y e os valores Y em apenas uma coluna Y:
Valores X | Valores Y da série 1 | Valores da série Y Y |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
Opções de configuração
Nome | |
---|---|
destino de agregação |
Como várias seleções de dados são agrupadas em dicas:
aggregationTarget vai ser usado acoplado a selectionMode
e tooltip.trigger , por exemplo:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Tipo: string
Padrão: "auto"
|
animação.duração |
É a duração da animação em milissegundos. Para mais detalhes, consulte a documentação de animação. Tipo:número
Padrão:0
|
animação.easing |
A função de easing aplicada à animação. As seguintes opções estão disponíveis:
Tipo: string
Padrão: "linear"
|
animação.startup |
Determina se o gráfico vai ser animado no desenho inicial. Se Tipo: booleano
Falso padrão
|
anotações.boxStyle |
Para gráficos compatíveis com
anotações,
o objeto var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; No momento, essa opção é compatível com gráficos de área, barra, coluna, combinação, linha e dispersão. Ela não é compatível com o gráfico de anotações. Tipo: objeto
Padrão: nulo
|
anotações.datum |
Para gráficos com suporte a
anotações,
o objeto
annotations.datum permite substituir a
escolha dos gráficos do Google para anotações fornecidas para elementos de dados
individuais (como valores exibidos com cada barra em um gráfico de
barras). Você pode controlar a cor
com annotations.datum.stem.color , o comprimento do tronco
com annotations.datum.stem.length e o estilo com annotations.datum.style .
Tipo: objeto
Padrão:a cor é "preta", o comprimento é 12 e o estilo é "ponto".
|
anotações.domínio |
Para gráficos compatíveis com anotações, o objeto
annotations.domain permite substituir a escolha de gráficos do Google para anotações fornecidas para um domínio (o maior eixo do gráfico, como o eixo X em um gráfico de linhas típico). Você pode controlar a cor
com annotations.domain.stem.color , o comprimento do tronco
com annotations.domain.stem.length e o estilo com annotations.domain.style .
Tipo: objeto
Padrão: a cor é "preta", o comprimento é 5, e o estilo é "ponto".
|
anotações.highContrast |
Para gráficos compatíveis com
anotações,
o booleano
annotations.highContrast permite modificar a escolha dos
gráficos do Google na cor da anotação. Por padrão, annotations.highContrast é verdadeiro, o que faz com que
os gráficos selecionem uma cor de anotação com bom contraste: cores claras em planos de fundo escuros e
escuro na luz. Se você definir annotations.highContrast como falso e não especificar a cor da sua própria anotação, os gráficos do Google usarão a cor padrão da série para a anotação:
Tipo: booleano
Padrão:verdadeiro
|
anotações.stem |
Para gráficos compatíveis com
anotações,
o objeto
annotations.stem permite substituir
a escolha dos gráficos do Google pelo estilo da raiz. Você pode controlar a cor
com annotations.stem.color e o comprimento do tronco
com annotations.stem.length . Observe que a opção de
comprimento da base não tem efeito nas anotações com
o estilo 'line' : para anotações de datum
'line' , o comprimento da raiz é sempre o mesmo que o texto.
Para as anotações de domínio 'line' , a derivação se estende
por todo o gráfico.
Tipo: objeto
Padrão: a cor é "preta", e o comprimento é 5 para anotações do domínio e 12 para anotações de datum.
|
anotações.style |
Para gráficos com suporte a
anotações,
a opção
annotations.style permite substituir
a escolha do tipo de anotação nos Gráficos Google. Pode ser
'line' ou 'point' .
Tipo: string
Padrão: "point"
|
anotações.textStyle |
Para gráficos compatíveis com
anotações,
o objeto
annotations.textStyle controla a aparência do texto da
anotação:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; No momento, essa opção é compatível com gráficos de área, barra, coluna, combinação, linha e dispersão. Ela não é compatível com o gráfico de anotações . Tipo: objeto
Padrão: nulo
|
TitleTitleSPosition |
Onde colocar os títulos dos eixos em comparação com a área do gráfico Os valores suportados são:
Tipo: string
Padrão: "out"
|
backgroundColor |
A cor do plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples,
por exemplo: Tipo: string ou objeto
Padrão: "branco"
|
backgroundColor.stroke |
A cor da borda do gráfico, como uma string de cor HTML. Tipo: string
Padrão: "#666"
|
backgroundColor.strokeWidth |
A largura da borda em pixels. Tipo:número
Padrão:0
|
backgroundColor.fill |
A cor de preenchimento do gráfico, como uma string de cor HTML. Tipo: string
Padrão: "branco"
|
gráfico.título |
Em Gráficos do Material, essa opção especifica o título. Tipo: string
Padrão:nulo
|
Chart.subtitle |
Em Gráficos do Material, essa opção especifica o subtítulo. Somente os gráficos do Material Design oferecem suporte para legendas. Tipo: string
Padrão: nulo
|
Área do gráfico |
Um objeto com membros para configurar a posição e o tamanho da área do gráfico (em que o próprio gráfico é desenhado, excluindo eixo e legendas). Dois formatos são compatíveis: um número ou um número seguido por %. Um número simples é um valor em pixels. Um número seguido por % é uma porcentagem. Exemplo: Tipo: objeto
Padrão: nulo
|
chartArea.backgroundColor |
Cor de fundo da área do gráfico. Quando usada, uma string pode ser hexadecimal (por exemplo, "#fdc") ou o nome da cor em inglês. Quando um objeto é usado, é possível
fornecer as seguintes propriedades:
Tipo: string ou objeto
Padrão: "branco"
|
gráficoArea.left |
Até onde desenhar o gráfico da borda esquerda. Tipo: número ou string
Padrão: automático
|
gráficoArea.top |
Até onde desenhar o gráfico da borda superior. Tipo: número ou string
Padrão:automático
|
gráficoArea.largura |
Largura da área do gráfico. Tipo: número ou string
Padrão:automático
|
gráficoArea.height |
Altura da área do gráfico. Tipo:número ou string
Padrão:automático
|
Cores |
As cores a serem usadas nos elementos do gráfico. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: Tipo: matriz de strings
Padrão:cores padrão
|
crosshair |
Um objeto que contém as propriedades de cruz no gráfico. Tipo: objeto
Padrão:nulo
|
crosshair.color |
A cor da cruz, expressa como um nome de cor (por exemplo, "blue") ou um valor RGB (por exemplo, "#adf"). Tipo: string
Tipo: padrão
|
crosshair.focus |
Um objeto que contém as propriedades da mira no foco. Tipo: objeto
Padrão:padrão
|
crosshair.opacity |
A opacidade da cruz, com Tipo: número
Padrão: 1.0
|
crosshair.orientation |
A orientação da mira, que pode ser "vertical" apenas para cabelos verticais, "horizontal" apenas para cabelos horizontais ou "ambos" para linhas de referência tradicionais. Tipo: string
Padrão: "ambos"
|
crosshair.selecionado |
Um objeto que contém as propriedades da mira após a seleção. Tipo: objeto
Padrão:padrão
|
crosshair.trigger |
Quando mostrar linhas de referência: em Tipo: string
Padrão: "ambos"
|
Tipo de curva |
Controla a curva das linhas quando a largura da linha não é zero. Será um dos seguintes valores:
Tipo:string
Padrão: "none"
|
Opacidade dos dados |
A transparência dos pontos de dados, com 1.0 sendo completamente opaco e 0.0 totalmente transparente. Nos gráficos de dispersão, histograma, barra e coluna, isso se refere aos dados visíveis: pontos no gráfico de dispersão e retângulos nos outros. Nos gráficos em que a seleção de dados cria um ponto, como os gráficos de linhas e áreas, isso se refere aos círculos que aparecem ao passar o cursor ou selecionar. O gráfico de combinação exibe os dois comportamentos, e essa opção não afeta outros gráficos. Para mudar a opacidade de uma linha de tendência, consulte opacidade da linha de tendência . Tipo: número
Padrão:1.0
|
enableInteractivity |
Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não gerará "select" ou outros eventos baseados em interação (mas fará eventos prontos ou de erro) e não exibirá texto passando ou mudará de acordo com a entrada do usuário. Tipo: booleano
Padrão:verdadeiro
|
explorer |
A opção Esse recurso é experimental e pode mudar em versões futuras. Observação: o explorador só funciona com eixos contínuos (como números ou datas). Tipo: objeto
Padrão: nulo
|
explorer.ações |
O explorador de gráficos do Google é compatível com três ações:
Tipo:matriz de strings
Padrão: ['dragToPan', 'rightClickToReset']
|
explorador.eixo |
Por padrão, os usuários podem movimentar horizontal e verticalmente quando a opção Tipo: string
Padrão: deslocamento horizontal e vertical
|
explorer.keepInBounds |
Por padrão, os usuários podem movimentar tudo, independentemente da localização dos dados. Para garantir que não sejam deslocados além do gráfico original, use Tipo: booleano
Padrão: falso
|
explorer.maxZoomIn |
O máximo que o explorador pode aumentar o zoom. Por padrão, os usuários poderão aumentar o zoom o suficiente
para ver apenas 25% da visualização original. A definição de Tipo:número
Padrão: 0,25
|
explorer.maxZoomOut |
O máximo que o explorador pode diminuir o zoom. Por padrão, os usuários podem diminuir o zoom o suficiente para que o gráfico ocupe apenas 1/4 do espaço disponível. Definir
Tipo: número
Padrão: 4
|
explorador.zoomDelta |
Quando os usuários aumentam ou diminuem o zoom, o Tipo: número
Padrão:1,5
|
fontSize |
O tamanho de fonte padrão, em pixels, de todo o texto do gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico. Tipo:número
Padrão:automático
|
Nome da fonte |
A fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico. Tipo: string
Padrão: "Arial"
|
FrameIForce |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:falso
|
híbrido |
Um objeto com membros para configurar vários elementos de eixo horizontal. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Tipo: objeto
Padrão:nulo
|
hAxis.baseline |
A linha de base do eixo horizontal. Tipo: número
Padrão:automático
|
hAxis.baselineColor |
A cor do valor de referência do eixo horizontal. Pode ser qualquer string de cor HTML, por exemplo:
Tipo:número
Padrão: "preto"
|
haxis.direction |
A direção em que os valores ao longo do eixo horizontal crescem. Especifique Tipo: 1 ou -1
Padrão:1
|
hAxis.format |
Uma string de formato para rótulos de eixo numérico. Esse é um subconjunto do
conjunto de padrões de ICU
. Por exemplo,
A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica.
Ao calcular valores de marcação e linhas de grade, várias combinações
alternativas de todas as opções relevantes
serão consideradas, e as alternativas serão rejeitadas se os
rótulos de marcação formatados forem duplicados ou se sobrepuserem.
Portanto, especifique Tipo: string
Padrão:automático
|
hAxis.gridlines |
Um objeto com propriedades para configurar as linhas de grade no eixo horizontal. As linhas de grade do eixo horizontal são desenhadas verticalmente. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {color: '#333', minSpacing: 20} Tipo: objeto
Padrão: nulo
|
hAxis.gridlines.color |
A cor das linhas de grade horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
hAxis.gridlines.count |
O número aproximado de linhas de grade horizontais na área do gráfico.
Se você especificar um número positivo para a Tipo:número
Padrão: -1
|
hAxis.gridlines.units |
Substitui o formato padrão para vários aspectos dos tipos de dados de data/hora/hora do dia quando usado com linhas de grade calculadas de acordo com o gráfico. Permite a formatação de anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão:nulo
|
hAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo horizontal, semelhante à opção hAxis.gridlines. Tipo: objeto
Padrão:nulo
|
hAxis.minorGridlines.color |
A cor das linhas de grade secundárias horizontais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão:uma combinação da linha de grade e das cores do plano de fundo
|
hAxis.minorGridlines.count |
A opção Tipo:número
Padrão:1
|
hAxis.minorGridlines.units |
Substitui o formato padrão para vários aspectos de tipos de dados de data/hora/hora do dia quando usado com gráfico de grade calculado. Permite a formatação de anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão: nulo
|
hAxis.logScale |
Propriedade Tipo: booleano
Padrão:falso
|
hAxis.scaleType |
Propriedade
Tipo: string
Padrão: nulo
|
hAxis.textPosition |
Posição do texto do eixo horizontal em relação à área do gráfico. Valores compatíveis: "out", "in", "none". Tipo: string
Padrão: "out"
|
hAxis.textStyle |
Um objeto que especifica o estilo de texto do eixo horizontal. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Marcações de relógio. |
Substitui as marcações do eixo X geradas automaticamente pela matriz especificada. Cada elemento da
matriz precisa ser um valor de marcação válido (como um número, data, data/hora ou
hora do dia) ou um objeto. Se for um objeto, ele precisa ter uma propriedade
A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um Exemplos:
Tipo:matriz de elementos
Padrão:automático
|
hAxis.title |
Propriedade Tipo: string
Padrão: nulo
|
hAxis.titleTextStyle |
Um objeto que especifica o estilo do texto do título do eixo horizontal. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
Move o valor máximo do eixo horizontal para o valor especificado; ele será direcionado para a direita na maioria dos gráficos. Será ignorado se esse valor for menor que o valor máximo de x dos dados.
Tipo: número
Padrão:automático
|
hAxis.minValue |
Move o valor mínimo do eixo horizontal para o valor especificado. Esse valor será deixado para a esquerda na maioria dos gráficos. Será ignorado se esse valor for maior que o valor x mínimo dos dados.
Tipo:número
Padrão: automático
|
hAxis.viewWindowMode |
Especifica como dimensionar o eixo horizontal para renderizar os valores na área do gráfico. Os seguintes valores de string são compatíveis:
Tipo: string
Padrão:
equivalente a "pretinho", mas
haxis.viewWindow.min e
haxis.viewWindow.max têm precedência, se usados.
|
hAxis.viewWindow |
Especifica o intervalo de corte do eixo horizontal. Tipo: objeto
Padrão:nulo
|
hAxis.viewWindow.max |
O valor máximo de dados horizontais para renderização. Ignorado quando Tipo:número
Padrão: automático
|
hAxis.viewWindow.min |
O valor mínimo mínimo de dados horizontais para renderização. Ignorado quando Tipo: número
Padrão: automático
|
altura |
Altura do gráfico, em pixels. Tipo: número
Padrão:altura do elemento em questão
|
lenda |
Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto
Padrão: nulo
|
legenda.alinhamento |
Alinhamento da legenda. Será um dos seguintes valores:
O início, o centro e o fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda "direita", "início" e "fim" estão na parte superior e inferior, respectivamente. Para uma legenda "superior", "início" e "fim" estariam à esquerda e à direita da área, respectivamente. O valor padrão depende da posição da legenda. Para legendas "inferior", o padrão é "center", outras legendas padrão são "start". Tipo: string
Padrão: automático
|
legenda.maxLines |
Número máximo de linhas na legenda. Defina um número maior do que um para adicionar linhas à legenda. Observação: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo. No momento, essa opção funciona apenas quando caption.position é "top". Tipo: número
Padrão: 1
|
legenda.pagina |
Índice inicial selecionado da página com base em zero da legenda. Tipo:número
Padrão:0
|
legenda.posição |
Posição da legenda. Será um dos seguintes valores:
Tipo: string
Padrão: "right"
|
legenda.Estilodetexto |
Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Largura da linha |
Largura da linha em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos. Tipo:número
Padrão:0
|
orientação |
A orientação do gráfico. Quando definido como Tipo: string
Padrão: "horizontal"
|
Forma de ponto |
O formato dos elementos individuais de dados: 'círculo', 'triângulo', 'quadrado', 'diamante', 'estrela' ou 'polígono'. Consulte a documentação de pontos para ver exemplos. Tipo: string
Padrão: 'círculo'
|
tamanho do ponto |
Diâmetro dos pontos de dados, em pixels. Use zero para ocultar todos os pontos. É possível substituir os valores de séries individuais usando a propriedade Tipo:número
Padrão:7
|
pontos visíveis |
Determina se os pontos são exibidos. Defina como
Isso também pode ser substituído usando o papel de estilo na forma de Tipo: booleano
Padrão: verdadeiro
|
Modo de seleção |
Quando Tipo: string
Padrão: "single"
|
Série |
Uma matriz de objetos, cada um descrevendo o formato da série correspondente no gráfico. Para usar valores padrão para uma série, especifique um objeto vazio {}. Se uma série ou um valor não for especificado, o valor global será usado. Cada objeto oferece suporte às seguintes propriedades:
É possível especificar uma matriz de objetos, sendo que cada uma delas se aplica à série na ordem fornecida, ou especificar um objeto em que cada filho tem uma chave numérica indicando a qual série ela se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira série como preta e ausente da legenda, e a quarta como vermelha e ausente da legenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo: matriz de objetos ou objetos com objetos aninhados
Padrão:{}
|
tema |
Um tema é um conjunto de valores de opção predefinidos que funcionam juntos para alcançar um comportamento ou efeito visual específico. Atualmente, apenas um tema está disponível:
Tipo: string
Padrão:nulo
|
title |
Texto a ser exibido acima do gráfico. Tipo: string
Padrão: sem título
|
Posição do título |
Onde colocar o título do gráfico, em comparação com a área do gráfico. Os valores suportados são:
Tipo: string
Padrão: "out"
|
TítulodoEstiloEstilo |
Um objeto que especifica o estilo do texto do título. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
dica |
Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objeto
Padrão: nulo
|
tooltip.ignoreBounds |
Se definido como Observação: isso se aplica somente a dicas de HTML. Se ele estiver ativado com dicas de ferramentas SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo de dicas para mais detalhes. Tipo: booleano
Padrão: falso
|
tooltip.isHTML |
Se definida como verdadeira, use dicas renderizadas por HTML (em vez de renderizadas por SVG). Consulte Como personalizar o conteúdo de dicas para mais detalhes. Observação: a personalização do conteúdo da dica de HTML por meio do papel de dados da coluna de dica de ferramenta não é aceita pela visualização Gráfico de bolhas. Tipo: booleano
Padrão: falso
|
tooltip.showColorCode |
Se verdadeiro, mostra quadrados coloridos ao lado das informações da série na dica. Tipo: booleano
Padrão: falso
|
tooltip.textStyle |
Um objeto que especifica o estilo do texto da dica. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
A interação do usuário que faz com que a dica seja exibida:
Tipo: string
Padrão: "focus"
|
linhas de tendência |
Exibe
linhas de tendência
nos gráficos compatíveis. Por padrão, as linhas de tendência lineares são
usadas, mas isso pode ser personalizado com a opção
As linhas de tendência são especificadas por série, portanto, na maioria das vezes, suas opções terão esta aparência: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Tipo: objeto
Padrão: nulo
|
linelines.n.color |
A cor da linha de tendência , expressa como um nome de cor em inglês ou uma string hexadecimal. Tipo: string
Padrão:cor padrão da série
|
linhas de tendência.n |
Para
linhas de tendência
de Tipo: número
Padrão:3
|
linelines.n.labelInLegend |
Se definida, a linha de tendência vai aparecer na legenda como essa string. Tipo: string
Padrão: nulo
|
tendêncialines.n.lineWidth |
A largura da linha de tendência em pixels. Tipo:número
Padrão: 2
|
linelines.n.opacity |
É a transparência da linha de tendência , de 0,0 (transparente) a 1,0 (opaca). Tipo:número
Padrão:1.0
|
linelines.n.pointSize |
As
linhas de tendência
são marcadas com a inclusão de vários pontos no gráfico. Com essa opção raramente necessária, é possível
personalizar o tamanho dos pontos. A opção Tipo: número
Padrão: 1
|
linelines.n.pointsVisible |
As linhas de tendência são incluídas com a marcação de vários pontos no gráfico. A opção Tipo: booleano
Padrão: verdadeiro
|
Linhas de tendência.n.showR2 |
Mostra o coeficiente de determinação na dica de legenda ou linha de tendência. Tipo: booleano
Padrão:falso
|
linelines.n.type |
Define se as
linhas de tendência
são Tipo: string
Padrão:linear
|
Linhas de tendência.n.visibleInLegend |
Se a equação da linha de tendência aparece na legenda. Ela vai aparecer na dica da linha de tendência. Tipo: booleano
Padrão: falso
|
Eixo |
Um objeto com membros para configurar vários elementos de eixo vertical. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Tipo: objeto
Padrão: nulo
|
vAxis.baseline |
Propriedade Tipo: número
Padrão:automático
|
vAxis.baselineColor |
Especifica a cor do valor de referência do eixo vertical. Pode ser qualquer string de cor HTML, por exemplo, Tipo: número
Padrão: "preto"
|
vAxis.direction |
A direção em que os valores ao longo do eixo vertical crescem. Por padrão, os valores mais baixos ficam na parte inferior do gráfico. Especifique Tipo:1 ou -1
Padrão:1
|
vAxis.format |
Uma string de formato para rótulos de eixo numérico. Esse é um subconjunto do
conjunto de padrões de ICU
.
Por exemplo,
A formatação real aplicada ao rótulo é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica.
Ao calcular valores de marcação e linhas de grade, várias combinações
alternativas de todas as opções relevantes
serão consideradas, e as alternativas serão rejeitadas se os
rótulos de marcação formatados forem duplicados ou se sobrepuserem.
Portanto, especifique Tipo: string
Padrão:automático
|
vAxis.gridlines |
Um objeto com membros para configurar as linhas de grade no eixo vertical. As linhas de grade do eixo vertical são desenhadas horizontalmente. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {color: '#333', minSpacing: 20} Tipo: objeto
Padrão: nulo
|
vAxis.gridlines.color |
A cor das linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: "#CCC"
|
vAxis.gridlines.count |
O número aproximado de linhas de grade horizontais na área do gráfico.
Se você especificar um número positivo para a Tipo:número
Padrão: -1
|
vAxis.gridlines.units |
Substitui o formato padrão para vários aspectos dos tipos de dados de data/hora/hora do dia quando usado com linhas de grade calculadas de acordo com o gráfico. Permite a formatação de anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão: nulo
|
vAxis.minorGridlines |
Um objeto com membros para configurar as linhas de grade secundárias no eixo vertical, semelhante à opção vAxis.gridlines. Tipo: objeto
Padrão:nulo
|
vAxis.minorGridlines.color |
A cor das pequenas linhas de grade verticais dentro da área do gráfico. Especifique uma string de cor HTML válida. Tipo: string
Padrão: uma combinação da linha de grade e das cores do plano de fundo
|
vAxis.minorGridlines.count |
O uso da opção minorGridlines.count foi descontinuado, exceto pela desativação de linhas de grade menores, definindo a contagem como 0. O número de linhas de grade secundárias depende do intervalo entre as linhas de grade principais (consulte vAxis.gridlines.interval) e o espaço mínimo necessário (consulte vAxis.minorGridlines.minSpacing). Tipo:número
Padrão:1
|
vAxis.minorGridlines.units |
Substitui o formato padrão para vários aspectos de tipos de dados de data/hora/hora do dia quando usado com gráfico de grade calculado. Permite a formatação de anos, meses, dias, horas, minutos, segundos e milissegundos. O formato geral é: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Mais informações podem ser encontradas em Datas e horas. Tipo: objeto
Padrão:nulo
|
vAxis.logScale |
Se for verdadeiro, torna o eixo vertical uma escala logarítmica. Observação: todos os valores precisam ser positivos. Tipo: booleano
Padrão: falso
|
vAxis.scaleType |
Propriedade
Tipo: string
Padrão:nulo
|
vAxis.textPosition |
Posição do texto do eixo vertical em relação à área do gráfico. Valores compatíveis: "out", "in", "none". Tipo: string
Padrão: "out"
|
vAxis.textStyle |
Um objeto que especifica o estilo de texto do eixo vertical. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Marcas de vídeo. |
Substitui as marcações do eixo Y geradas automaticamente pela matriz especificada. Cada elemento da
matriz precisa ser um valor de marcação válido (como um número, data, data/hora ou
hora do dia) ou um objeto. Se for um objeto, ele precisará ter uma propriedade
A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um Exemplos:
Tipo: matriz de elementos
Padrão: automático
|
vAxis.title |
Propriedade Tipo: string
Padrão: sem título
|
vAxis.titleTextStyle |
Um objeto que especifica o estilo do texto do título do eixo vertical. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Move o valor máximo do eixo vertical para o valor especificado; isso será crescente na maioria dos gráficos. Será ignorado se esse valor for definido como um valor menor que o valor y máximo dos dados.
Tipo: número
Padrão: automático
|
vAxis.minValue |
Move o valor mínimo do eixo vertical para o valor especificado. Esse valor será decrescente na maioria dos gráficos. Será ignorado se esse valor for maior que o valor y mínimo dos dados.
Tipo:número
Padrão:nulo
|
vAxis.viewWindowMode |
Especifica como dimensionar o eixo vertical para renderizar os valores na área do gráfico. Os seguintes valores de string são compatíveis:
Tipo: string
Padrão:
equivalente a "pretinho", mas
vaxis.viewWindow.min e
vaxis.viewWindow.max têm precedência, se usados.
|
vAxis.viewWindow |
Especifica o intervalo de corte do eixo vertical. Tipo: objeto
Padrão:nulo
|
vAxis.viewWindow.max |
O valor máximo de dados verticais para renderização. Ignorado quando Tipo: número
Padrão:automático
|
vAxis.viewWindow.min |
O valor mínimo de dados verticais para renderização. Ignorado quando Tipo:número
Padrão:automático
|
largura |
Largura do gráfico, em pixels. Tipo: número
Padrão:largura do elemento contido
|
Métodos
Método | |
---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno:nenhum
|
getAction(actionID) |
Retorna o objeto de ação da dica com a Return Type: objeto
|
getBoundingBox(id) |
Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartAreaBoundingBox() |
Retorna um objeto que contém o lado esquerdo, o topo, a largura e a altura do conteúdo do gráfico (ou seja, excluir rótulos e legendas):
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartLayoutInterface() |
Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e os elementos dele. Os seguintes métodos podem ser chamados no objeto retornado:
Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Retorna o valor de dados horizontal em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
getImageURI() |
Retorna o gráfico serializado como um URI de imagem. Chame essa função após o gráfico ser desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno:string
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
As entidades selecionáveis são pontos e entradas de legenda.
Um ponto corresponde a uma célula da tabela de dados e a uma entrada de legenda para uma coluna
(o índice da linha é nulo).
Nesse gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno: matriz de elementos de seleção
|
getVAxisValue(yPosition, optional_axis_index) |
Retorna o valor de dados verticais em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
getXLocation(dataValue, optional_axis_index) |
Retorna a coordenada X de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
getYLocation(dataValue, optional_axis_index) |
Retorna a coordenada y de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
removeAction(actionID) |
Remove a ação de dica com a Tipo de retorno:
none |
setAction(action) |
Define uma ação de dica a ser executada quando o usuário clica no texto de ação.
O método
Toda e qualquer ação de dica precisa ser definida antes de chamar o método Tipo de retorno:
none |
setSelection() |
Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior.
As entidades selecionáveis são pontos e entradas de legenda.
Um ponto corresponde a uma célula da tabela de dados e a uma entrada de legenda para uma coluna
(o índice da linha é nulo).
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno:nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno: nenhum
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Eventos de disparo.
Nome | |
---|---|
animationfinish |
Disparado quando a animação de transição é concluída. Propriedades: nenhuma
|
click |
Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legendas, os eixos, as linhas de grade ou os rótulos são clicados. Propriedades:targetID.
|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades: ID e mensagem
|
legendpagination |
Disparado quando o usuário clica nas setas de paginação de legenda. Retorna o índice de páginas atual com base em zero e o número total de páginas. Propriedades:currentPageIndex, totalPages
|
onmouseover |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
onmouseout |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Retorna os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades:linha, coluna
|
ready |
O gráfico está pronto para chamadas de método externo. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método Propriedades:nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Propriedades: nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.