Gráfico de linhas

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Visão geral

Um gráfico de linhas que é renderizado no navegador usando SVG ou VML. Exibe dicas ao passar o cursor sobre os pontos.

Exemplos

Como curvar as linhas

É possível suavizar as linhas definindo a opção curveType como function:

Veja abaixo o código para gerar este gráfico. Observe o uso da opção curveType: function:

  <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Criar gráficos de linhas 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 linhas do Material Design é semelhante à criação do que vamos chamar de gráfico de linha "clássico". Carregue a API de visualização do Google (embora com o pacote 'line' em vez do pacote 'corechart'), defina sua tabela de dados e crie um objeto (mas da classe google.charts.Line em vez de google.visualization.LineChart).

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 linhas do Material Design têm muitas pequenas melhorias em relação aos gráficos de linhas clássicas, incluindo uma paleta de cores aprimorada, cantos arredondados, formatação de rótulos mais clara, espaçamento padrão mais estreito entre séries, linhas de grade mais suaves e títulos (e a adição de legendas).

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.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.Line.convertOptions(options));

Gráficos Y e Y

Às vezes, você vai querer mostrar duas séries em um gráfico de linhas, com dois eixos y independentes: um eixo esquerdo para uma série e outro para a direita:

Observe que nossos dois eixos y estão marcados de forma diferente ("Temps" x "Daylight"), cada um tem escalas e linhas de grade independentes. Se você quiser personalizar esse comportamento, use as opções vAxis.gridlines e vAxis.viewWindow.

No código do Material Design abaixo, as opções axes e series especificam a aparência dupla em Y do gráfico. A opção series especifica qual eixo usar para cada um ('Temps' e 'Daylight'. Eles não têm qualquer 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 'Temps' à esquerda e o eixo 'Daylight' à direita.

No código clássico, isso é um pouco diferente. Em vez da opção axes, use vAxes (ou hAxes em gráficos orientados horizontalmente). Além disso, em vez de usar nomes, você usará os números de índice para coordenar uma série com um eixo usando a opção targetAxisIndex.

Material
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
      
Clássico
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };
      

Gráficos "X principais"

Observação: os eixos Top-X estão disponíveis apenas para gráficos do Material Design (ou seja, aqueles com o pacote line).

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:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>


Carregando

O nome do pacote google.charts.load é "corechart", e o nome da classe da visualização é google.visualization.LineChart.

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.LineChart(container);

Para gráficos de linhas do Material Design, o nome do pacote google.charts.load é "line" e o nome da classe da visualização é google.charts.Line.

  google.charts.load("current", {packages: ["line"]});
  var visualization = new google.charts.Line(container);

Formato de dados

Linhas: cada linha da tabela representa um conjunto de pontos de dados com a mesma localização do eixo x.

Columns:

  Coluna 0 Coluna 1 Coluna N
Finalidade: Valores da linha 1 Valores da linha N
Tipo de dado: number number
Papel: domínio dados dados
Papéis de coluna opcionais:

 

Opções de configuração

Nome
destino de agregação
Como várias seleções de dados são agrupadas em dicas:
  • 'category': agrupa os dados selecionados por valor x.
  • 'series': agrupa os dados selecionados por série.
  • 'auto': agrupa os dados selecionados por valor x se todas as seleções tiverem o mesmo valor x e por série se não forem.
  • 'none': mostra apenas uma dica por seleção.
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.startup

Determina se o gráfico vai ser animado no desenho inicial. Se true, o gráfico será iniciado no valor de referência e será animado para o estado final.

Tipo: booleano
Falso padrão
animação.easing

A função de easing aplicada à animação. As seguintes opções estão disponíveis:

  • "linear" - Velocidade constante.
  • 'in' - Facilidade em - Começar devagar e acelerar.
  • "out" - "easing" - comece rápido e desacelere.
  • "InAndOut" - facilidade dentro e fora - Inicie devagar, acelere e, em seguida, desacelere.
Tipo: string
Padrão: "linear"
anotações.boxStyle

Para gráficos compatíveis com anotações, o objeto annotations.boxStyle controla a aparência das caixas ao redor das anotações:

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:

  • in - Desenhar os títulos dos eixos dentro da área do gráfico.
  • out - desenha os títulos do eixo fora da área do gráfico.
  • nenhum: omita os títulos dos eixos.
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: 'red' ou '#00cc00', ou um objeto com as seguintes propriedades.

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"
Á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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

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:
  • stroke: a cor, fornecida como uma string hexadecimal ou nome de cor em inglês.
  • strokeWidth: se fornecido, desenha uma borda ao redor da área do gráfico da largura especificada (e com a cor stroke).
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: colors:['red','#004411'].

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.
Exemplo: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Tipo: objeto
Padrão: padrão
crosshair.opacity

A opacidade da cruz, com 0.0 sendo totalmente transparente e 1.0 totalmente opaco.

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.
Exemplo: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Tipo: objeto
Padrão:padrão
crosshair.trigger

Quando mostrar linhas de referência: em 'focus', 'selection' ou 'both'.

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:

  • "none" - linhas retas sem curva.
  • "function": os ângulos da linha serão suavizados.
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 explorer permite que os usuários movam e apliquem zoom nos gráficos do Google. explorer: {} oferece o comportamento padrão do explorador, permitindo que os usuários movam a tela na horizontal e na vertical arrastando e usando a rolagem para aumentar e diminuir o zoom.

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:

  • dragToPan: arraste para movimentar o gráfico na horizontal e na vertical. Para movimentar apenas pelo eixo horizontal, use explorer: { axis: 'horizontal' }. O mesmo ocorre com o eixo vertical.
  • dragToZoom: o comportamento padrão do explorador é aumentar e diminuir o zoom quando o usuário rolar a tela. Se explorer: { actions: ['dragToZoom', 'rightClickToReset'] } for usado, arrastar uma área retangular aumenta o zoom nessa área. Recomendamos usar rightClickToReset sempre que dragToZoom for usado. Consulte explorer.maxZoomIn, explorer.maxZoomOut e explorer.zoomDelta para ver as personalizações de zoom.
  • rightClickToReset: quando você clica com o botão direito do mouse no gráfico, ele é retornado ao nível de zoom e movimentação original.
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 explorer é usada. Se você quiser que os usuários se movam apenas na horizontal, use explorer: { axis: 'horizontal' }. Da mesma forma, explorer: { axis: 'vertical' } permite movimentar somente a indústria.

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 explorer: { keepInBounds: true }.

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 explorer: { maxZoomIn: .5 } permitiria que os usuários aumentassem o zoom apenas para ver metade da visualização original.

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 explorer: { maxZoomOut: 8 } permitirá que os usuários diminuam o zoom o suficiente para que o gráfico ocupe apenas 1/8 do espaço disponível.

Tipo:número
Padrão: 4
explorador.zoomDelta

Quando os usuários aumentam ou diminuem o zoom, o explorer.zoomDelta determina o zoom. Quanto menor o número, mais suave e mais lento o zoom.

Tipo: número
Padrão:1,5
Meta de foco

É o tipo da entidade que recebe o foco ao passar o cursor. Também afeta qual entidade é selecionada pelo clique do mouse e qual elemento da tabela de dados está associado aos eventos. Será um dos seguintes valores:

  • "Dados" - Foque em um único ponto de dados. Correlaciona-se com uma célula na tabela de dados.
  • "category" - Concentre-se em um agrupamento de todos os pontos de dados ao longo do eixo principal. Correlaciona-se com uma linha na tabela de dados.

Na função "target" "category", a dica mostra todos os valores de categoria. Isso pode ser útil para comparar valores de séries diferentes.

Tipo: string
Padrão: "datum"
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.

Essa opção só é compatível com um eixo continuous.

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: 'red' ou '#00cc00'.

Essa opção só é compatível com um eixo continuous.

Tipo: número
Padrão: "preto"
haxis.direction

A direção em que os valores ao longo do eixo horizontal crescem. Especifique -1 para inverter a ordem dos valores.

Tipo: 1 ou -1
Padrão:1
hAxis.format

Uma string de formato para rótulos numéricos ou de eixo de data.

No caso dos rótulos de eixo, esse é um subconjunto do conjunto de padrões de ICU (em inglês). Por exemplo, {format:'#,###%'} exibirá os valores "1.000%", "750%" e "50%" para os valores 10, 7,5 e 0,5. Também é possível fornecer o seguinte:

  • {format: 'none'}: exibe números sem formatação (por exemplo, 8000000)
  • {format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
  • {format: 'scientific'}: exibe números em notação científica (por exemplo, 8e6)
  • {format: 'currency'}: exibe números na moeda local (por exemplo, US$ 8.000.000)
  • {format: 'percent'}: exibe números como porcentagens (por exemplo, 800.000.000%)
  • {format: 'short'}: exibe números abreviados (por exemplo, 8 mi)
  • {format: 'long'}: exibe números como palavras completas (por exemplo, 8 milhões)

Para os rótulos de eixo de data, é um subconjunto do conjunto de padrões de ICU da formatação de data. Por exemplo, {format:'MMM d, y'} exibirá o valor "1o de julho de 2011" como a data de julho de 2011.

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 format:"#" se quiser mostrar apenas valores de marcação inteiros. No entanto, se nenhuma alternativa atender a essa condição, nenhuma grade ou marcação será exibida.

Essa opção é aceita apenas para um eixo continuous.

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}

Essa opção é aceita apenas para um eixo continuous.

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 gridlines.count, ela vai ser usada para calcular o minSpacing entre as linhas de grade. Especifique um valor de 1 para desenhar apenas uma linha de grade, ou 0 para desenhar nenhuma linha de grade. Especifique -1, que é o padrão, para calcular automaticamente o número de linhas de grade com base em outras opções.

Tipo: número
Padrão: -1
hAxis.gridlines.interval

Uma matriz de tamanhos (como valores de dados, não pixels) entre as linhas de grade adjacentes. No momento, essa opção é só para eixos numéricos, mas é análoga às opções gridlines.units.<unit>.interval, que são usadas apenas para datas e horas. Para escalas lineares, o padrão é [1, 2, 2.5, 5], o que significa que os valores da linha de grade podem cair em cada unidade (1), em unidades pares (2) ou em múltiplos de 2,5 ou 5. Qualquer potência de 10 vezes esses valores também é considerada (por exemplo, [10, 20, 25, 50] e [.1, .2, .25, .5]). Para escalas de registros, o padrão é [1, 2, 5].

Tipo:número entre 1 e 10, sem incluir 10.
Padrão:calculado
hAxis.gridlines.minSpacing

O espaço mínimo da tela, em pixels, entre as principais linhas de grade do Hadoop. O padrão para as principais linhas de grade é 40 para escalas lineares e 20 para escalas de registros. Se você especificar count, e não minSpacing, o minSpacing será calculado da contagem. Por outro lado, se você especificar minSpacing, e não count, a contagem será calculada com base em minSpacing. Se você especificar ambos, minSpacing será substituído.

Tipo:número
Padrão: calculado
haxis.gridlines.multiple

Todos os valores de grade e marcação precisam ser múltiplos do valor dessa opção. Observe que, ao contrário dos intervalos, potências de 10 vezes os múltiplos não são consideradas. Portanto, é possível forçar as marcações como números inteiros especificando gridlines.multiple = 1, ou forçar as marcações para que sejam múltiplos de 1.000, especificando gridlines.multiple = 1000.

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.

Essa opção é aceita apenas para um eixo continuous.

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 minorGridlines.count foi descontinuada, exceto para desativar linhas de grade secundárias definindo a contagem como 0. O número de linhas de grade secundárias agora depende totalmente do intervalo entre as principais linhas de grade (consulte hAxis.gridlines.interval) e o espaço mínimo necessário (consulte hAxis.minorGridlines.minSpacing).

Tipo:número
Padrão:1
hAxis.minorGridlines.intervalo

A opção minorGridlines.interval é como a opção do intervalo das linhas de grade principais, mas o intervalo escolhido será sempre um divisor uniforme do intervalo da linha de grade principal. O intervalo padrão para escalas lineares é [1, 1.5, 2, 2.5, 5], e para escalas de registro é [1, 2, 5].

Tipo:número
Padrão: 1
hAxis.minorGridlines.minSpacing

O espaço mínimo necessário, em pixels, entre as linhas de grade secundárias e as linhas de grade menores e maiores. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 o minSpacing para escalas de registro.

Tipo: número
Padrão:calculado
hAxis.minorGridlines.multiple

O mesmo que ocorre no gridlines.multiple principal.

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 hAxis que faz com que o eixo horizontal seja uma escala logarítmica (exige que todos os valores sejam positivos). Defina como "true" para sim.

Essa opção só é compatível com um eixo continuous.

Tipo: booleano
Padrão:falso
hAxis.scaleType

Propriedade hAxis que faz com que o eixo horizontal seja uma escala logarítmica. Será um dos seguintes valores:

  • null: nenhum escalonamento logarítmico é executado.
  • "log": escalonamento logarítmico. Os valores negativos e zero não são representados no gráfico. Essa opção é igual à configuração de hAxis: { logscale: true }.
  • "MirrorLog": escalonamento logarítmico em que valores negativos e zero são representados no gráfico. O valor plotado de um número negativo é o negativo do registro do valor absoluto. Valores próximos a 0 são representados em uma escala linear.

Essa opção só é compatível com um eixo continuous.

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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 v para o valor de marcação e uma propriedade f opcional contendo a string literal a ser exibida como o rótulo.

A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um viewWindow.min ou viewWindow.max para substituir.

Exemplos:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Essa opção é aceita apenas para um eixo continuous.

Tipo:matriz de elementos
Padrão:automático
hAxis.title

Propriedade hAxis que especifica o título do eixo horizontal.

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

Se for falso, os rótulos externos ficarão ocultos, em vez de permitir que sejam cortados pelo contêiner do gráfico. Se verdadeiro, permitirá o corte de rótulo.

Essa opção só é compatível com um eixo discrete.

Tipo: booleano
Padrão: falso
Texto do texto do relógio (hAxis.slantedText)

Se for verdadeiro, desenhe o texto do eixo horizontal em um ângulo para ajudar a ajustar mais texto ao longo do eixo. Se for falso, desenhe o texto do eixo horizontal na vertical. O comportamento padrão é inclinar o texto se ele não couber quando for desenhado para cima. Essa opção está disponível apenas quando o hAxis.textPosition está definido como "out" (o padrão). O padrão é false para datas e horários.

Tipo: booleano
Padrão: automático
hAxis.slantedTextAngle

É o ângulo do texto do eixo horizontal, se for inclinado. Ignorado se hAxis.slantedText for false ou estiver no modo automático, e o gráfico decidir desenhar o texto horizontalmente. Se o ângulo for positivo, a rotação será no sentido anti-horário e, se for negativa, no sentido horário.

Tipo: número, -90–90
Padrão:30
hAxis.maxAlternation

Número máximo de níveis de texto no eixo horizontal. Se os rótulos de texto dos eixos ficarem sobrecarregados, o servidor poderá deslocar os rótulos vizinhos para cima ou para baixo e, assim, ajustar os rótulos mais próximos. Esse valor especifica o maior número de níveis a ser usado. O servidor poderá usar menos níveis se os rótulos puderem ser ajustados sem sobreposição. Para datas e horas, o padrão é 1.

Tipo: número
Padrão: 2
hAxis.maxTextLines

Número máximo de linhas permitido para os rótulos de texto. Os rótulos podem abranger várias linhas se forem muito longos, e o número de linhas for, por padrão, limitado pela altura do espaço disponível.

Tipo:número
Padrão: automático
hAxis.minTextSpacing

Espaçamento mínimo (em pixels) permitido entre dois rótulos de texto adjacentes. Se os rótulos forem muito espaçados ou muito longos, o espaçamento poderá cair abaixo desse limite e, nesse caso, uma das medidas de organização será aplicada (por exemplo, truncando os rótulos ou soltando alguns deles).

Tipo: número
Padrão: o valor de hAxis.textStyle.fontSize
hAxis.showTextEvery

Quantos rótulos de eixo horizontal serão mostrados, em que 1 significa para mostrar todos os rótulos, 2 para mostrar todos os outros rótulos e assim por diante. O padrão é tentar mostrar o máximo possível de rótulos sem sobreposição.

Tipo: número
Padrão: automático
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. hAxis.viewWindow.max modifica esta propriedade.

Essa opção é aceita apenas para um eixo continuous.

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. hAxis.viewWindow.min modifica esta propriedade.

Essa opção é aceita apenas para um eixo continuous.

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:

  • "pretty": dimensione os valores horizontais para que os valores máximo e mínimo de dados sejam renderizados um pouco à esquerda e à direita da área do gráfico. O viewWindow é expandido para a linha de grade principal mais próxima para números ou a linha de grade secundária mais próxima para datas e horários.
  • "maximizado": dimensione os valores horizontais para que os valores máximo e mínimo de dados toquem na área esquerda e direita da área do gráfico. haxis.viewWindow.min e haxis.viewWindow.max vão ser ignorados.
  • "explicita": uma opção obsoleta para especificar os valores de escala esquerdo e direito da área do gráfico. Descontinuado porque é redundante com haxis.viewWindow.min e haxis.viewWindow.max. Valores de dados fora desses valores serão cortados. É necessário especificar um objeto hAxis.viewWindow descrevendo os valores máximos e mínimos a serem mostrados.

Essa opção é aceita apenas para um eixo continuous.

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
  • Para um eixo continuous :

    O valor máximo de dados horizontais para renderização.

  • Para um eixo discrete:

    O índice de linhas com base em zero em que a janela de corte termina. Os pontos de dados nesse índice e superiores serão cortados. Junto com vAxis.viewWindowMode.min, ele define um intervalo semiaberto (min, max) que indica os índices de elementos a serem exibidos. Em outras palavras, cada índice de modo que min <= index < max seja exibido.

Ignorado quando hAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo: número
Padrão: automático
hAxis.viewWindow.min
  • Para um eixo continuous:

    O valor mínimo mínimo de dados horizontais para renderização.

  • Para um eixo discrete:

    O índice de linhas com base em zero em que a janela de corte começa. Os pontos de dados em índices inferiores a esse serão cortados. Junto com vAxis.viewWindowMode.max, ele define um intervalo semiaberto (min, max) que indica os índices de elementos a serem exibidos. Em outras palavras, cada índice de modo que min <= index < max seja exibido.

Ignorado quando hAxis.viewWindowMode é "bonito" ou "maximizado".

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
interpolateNulls

Indica se o valor dos pontos ausentes precisa ser identificado. Se for verdadeiro, ele adivinhará o valor dos dados ausentes com base nos pontos vizinhos. Se for falso, ele vai deixar uma quebra na linha no ponto desconhecido.

Isso não é compatível com gráficos Área com a opção isStacked: true/'percent'/'relative'/'absolute'.

Tipo: booleano
Padrão: falso
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:

  • "start": alinhado ao início da área alocada para a legenda.
  • 'center' - centralizado na área alocada para a legenda.
  • 'end' - Alinhado ao final da área alocada para a legenda.

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:

  • "bottom" – abaixo do gráfico.
  • "left" - à esquerda do gráfico, desde que o eixo esquerdo não tenha séries associadas a ele. Portanto, se você quiser a legenda à esquerda, use a opção targetAxisIndex: 1.
  • "in": dentro do gráfico, no canto superior esquerdo.
  • "none": nenhuma legenda é exibida.
  • "right" - à direita do gráfico. Incompatível com a opção vAxes.
  • "top" - acima do gráfico.
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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Estilo da linha

O padrão ativado e desativado de linhas tracejadas. Por exemplo, [4, 4] repetirá quatro traços de quatro comprimentos e duas lacunas de quatro comprimentos, e [5, 1, 3] repetirá um traço de cinco comprimentos, um comprimento de um comprimento, um traço de três comprimentos, um intervalo de cinco comprimentos, um traço de um comprimento e uma lacuna de três comprimentos. Consulte Linhas tracejadas para mais informações.

Tipo: matriz de números
Padrão: nulo
Largura da linha

Largura da linha de dados em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos. É possível substituir os valores de séries individuais usando a propriedade series.

Tipo: número
Padrão:2
orientação

A orientação do gráfico. Quando definido como 'vertical', gira os eixos do gráfico para que, por exemplo, um gráfico de colunas se torne um gráfico de barras e um gráfico de área cresça para a direita em vez de para cima:

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 exibidos em pixels. Use zero para ocultar todos os pontos. É possível substituir os valores de séries individuais usando a propriedade series. Se você estiver usando uma linha de tendência, a opção pointSize afetará a largura da linha de tendência, a menos que você a substitua pela opção trendlines.n.pointsize.

Tipo: número
Padrão:0
pontos visíveis

Determina se os pontos são exibidos. Defina como false para ocultar todos os pontos. É possível substituir valores para séries individuais usando a propriedade series. Se você estiver usando uma linha de tendência, a opção pointsVisible afetará a visibilidade dos pontos em todas as linhas de tendência, a menos que você a substitua pela opção trendlines.n.pointsVisible.

Isso também pode ser substituído usando o papel de estilo na forma de "point {visible: true}".

Tipo: booleano
Padrão: verdadeiro
categorias inversas

Se definida como verdadeira, a série será desenhada da direita para a esquerda. O padrão é desenhar da esquerda para a direita.

Essa opção é compatível apenas com um eixo discrete major.

Tipo: booleano
Padrão: falso
Modo de seleção

Quando selectionMode é 'multiple', os usuários podem selecionar vários pontos de dados.

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:

  • annotations: um objeto a ser aplicado em anotações desta série. Isso pode ser usado para controlar, por exemplo, o textStyle da série:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Consulte as diversas opções de annotations para ver uma lista mais completa do que pode ser personalizado.

  • color: a cor a ser usada para esta série. Especifique uma string de cor HTML válida.
  • curveType: substitui o valor global curveType desta série.
  • labelInLegend: a descrição da série que aparece na legenda do gráfico.
  • lineDashStyle: substitui o valor global lineDashStyle desta série.
  • lineWidth: substitui o valor global lineWidth desta série.
  • pointShape: substitui o valor global pointShape desta série.
  • pointSize: substitui o valor global pointSize desta série.
  • pointsVisible: substitui o valor global pointsVisible desta série.
  • targetAxisIndex: a qual eixo atribuir esta série, em que 0 é o eixo padrão e 1 é o eixo oposto. O valor padrão é 0. Defina como 1 para definir um gráfico em que diferentes séries são renderizadas em diferentes eixos. Pelo menos uma série está alocada ao eixo padrão. Você pode definir uma escala diferente para cada eixo.
  • visibleInLegend: um valor booleano, em que verdadeiro significa que a série precisa ter uma entrada de legenda e false significa que não deve. O padrão é "true".

É 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:

  • "maximized" - maximiza a área do gráfico e desenha a legenda e todos os rótulos dentro da área do gráfico. Define as seguintes opções:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
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:

  • in - Desenhar o título dentro da área do gráfico.
  • out - desenhe o título fora da área do gráfico.
  • nenhum: omita o título.
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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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 true, permite que o desenho de dicas flua para fora dos limites do gráfico em todos os lados.

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. O padrão é verdadeiro quando focusTarget estiver definido como "categoria". Caso contrário, será falso.

Tipo: booleano
Padrão: automático
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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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:

  • "focus": a dica será exibida quando o usuário passar o cursor sobre o elemento.
  • "none": a dica não será exibida.
  • "selection" - a dica será exibida quando o usuário selecionar o elemento.
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 trendlines.n.type.

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 type: 'polynomial', o grau do polinômio (2 para quadrático, 3 para cúbico e assim por diante). O grau padrão pode mudar de três para dois na próxima versão dos Gráficos Google.

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 lineWidth da linha de tendência geralmente é preferível. No entanto, você precisará dessa opção se estiver usando a opção pointSize global e quiser um tamanho de ponto diferente para suas linhas de tendência.

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 pointsVisible da linha de tendência determina se os pontos de uma linha específica estão visíveis.

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 'linear' (o padrão), 'exponential' ou 'polynomial'.

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
Axx

Especifica propriedades para eixos verticais individuais, se o gráfico tiver vários eixos verticais. Cada objeto filho é um objeto vAxis e pode conter todas as propriedades compatíveis com vAxis. Esses valores substituem as configurações globais da mesma propriedade.

Para especificar um gráfico com vários eixos verticais, primeiro defina um novo eixo usando series.targetAxisIndex. Em seguida, configure o eixo usando vAxes. O exemplo a seguir atribui a série 2 ao eixo direito e especifica um título e estilo de texto personalizados para ele:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Essa propriedade pode ser um objeto ou uma matriz: o objeto é uma coleção de objetos, cada uma com um rótulo numérico que especifica o eixo que define. Esse é o formato mostrado acima. A matriz é uma matriz de objetos, um por eixo. Por exemplo, a seguinte notação de estilo de matriz é idêntica ao objeto vAxis mostrado acima:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Tipo: matriz de objeto ou objeto com objetos filhos
Padrão: nulo
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 vAxis que especifica o valor de referência para o eixo vertical. Se o valor de referência for maior que a linha de grade mais alta ou menor que a linha de grade mais baixa, ele será arredondado para a linha de grade mais próxima.

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, 'red' ou '#00cc00'.

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 -1 para inverter a ordem dos valores.

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, {format:'#,###%'} exibirá os valores "1.000%", "750%" e "50%" para os valores 10, 7,5 e 0,5. Também é possível fornecer o seguinte:

  • {format: 'none'}: exibe números sem formatação (por exemplo, 8000000)
  • {format: 'decimal'}: exibe números com separadores de milhares (por exemplo, 8.000.000)
  • {format: 'scientific'}: exibe números em notação científica (por exemplo, 8e6)
  • {format: 'currency'}: exibe números na moeda local (por exemplo, US$ 8.000.000)
  • {format: 'percent'}: exibe números como porcentagens (por exemplo, 800.000.000%)
  • {format: 'short'}: exibe números abreviados (por exemplo, 8 mi)
  • {format: 'long'}: exibe números como palavras completas (por exemplo, 8 milhões)

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 format:"#" se quiser mostrar apenas valores de marcação inteiros. No entanto, se nenhuma alternativa atender a essa condição, nenhuma grade ou marcação será exibida.

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 gridlines.count, ela vai ser usada para calcular o minSpacing entre as linhas de grade. Especifique um valor de 1 para desenhar apenas uma linha de grade, ou 0 para desenhar nenhuma linha de grade. Especifique -1, que é o padrão, para calcular automaticamente o número de linhas de grade com base em outras opções.

Tipo: número
Padrão: -1
vAxis.gridlines.interval

Uma matriz de tamanhos (como valores de dados, não pixels) entre as linhas de grade adjacentes. No momento, essa opção é só para eixos numéricos, mas é análoga às opções gridlines.units.<unit>.interval, que são usadas apenas para datas e horas. Para escalas lineares, o padrão é [1, 2, 2.5, 5], o que significa que os valores da linha de grade podem cair em cada unidade (1), em unidades pares (2) ou em múltiplos de 2,5 ou 5. Qualquer potência de 10 vezes esses valores também é considerada (por exemplo, [10, 20, 25, 50] e [.1, .2, .25, .5]). Para escalas de registros, o padrão é [1, 2, 5].

Tipo:número entre 1 e 10, sem incluir 10.
Padrão:calculado
vAxis.gridlines.minSpacing

O espaço mínimo da tela, em pixels, entre as principais linhas de grade do Hadoop. O padrão para as principais linhas de grade é 40 para escalas lineares e 20 para escalas de registros. Se você especificar count, e não minSpacing, o minSpacing será calculado da contagem. Por outro lado, se você especificar minSpacing, e não count, a contagem será calculada com base em minSpacing. Se você especificar ambos, minSpacing será substituído.

Tipo:número
Padrão: calculado
vAxis.gridlines.multiple

Todos os valores de grade e marcação precisam ser múltiplos do valor dessa opção. Observe que, ao contrário dos intervalos, potências de 10 vezes os múltiplos não são consideradas. Portanto, é possível forçar as marcações como números inteiros especificando gridlines.multiple = 1, ou forçar as marcações para que sejam múltiplos de 1.000, especificando gridlines.multiple = 1000.

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.intervalo

A opção minorGridlines.interval é como a opção do intervalo das linhas de grade principais, mas o intervalo escolhido será sempre um divisor uniforme do intervalo da linha de grade principal. O intervalo padrão para escalas lineares é [1, 1.5, 2, 2.5, 5], e para escalas de registro é [1, 2, 5].

Tipo:número
Padrão: 1
vAxis.minorGridlines.minSpacing

O espaço mínimo necessário, em pixels, entre as linhas de grade secundárias e as linhas de grade menores e maiores. O valor padrão é 1/2 do minSpacing das principais linhas de grade para escalas lineares e 1/5 o minSpacing para escalas de registro.

Tipo:número
Padrão:calculado
vAxis.minorGridlines.multiple

O mesmo que ocorre no gridlines.multiple principal.

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 vAxis que faz com que o eixo vertical seja uma escala logarítmica. Será um dos seguintes valores:

  • null: nenhum escalonamento logarítmico é executado.
  • "log": escalonamento logarítmico. Os valores negativos e zero não são representados no gráfico. Essa opção é igual à configuração de vAxis: { logscale: true }.
  • "MirrorLog": escalonamento logarítmico em que valores negativos e zero são representados no gráfico. O valor plotado de um número negativo é o negativo do registro do valor absoluto. Valores próximos a 0 são representados em uma escala linear.

Essa opção só é compatível com um eixo continuous.

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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 v para o valor da marcação e uma propriedade f opcional contendo a string literal a ser exibida como o rótulo.

A viewWindow será expandida automaticamente para incluir as marcações mínima e máxima, a menos que você especifique um viewWindow.min ou viewWindow.max para substituir.

Exemplos:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Tipo:matriz de elementos
Padrão: automático
vAxis.title

Propriedade vAxis que especifica um título para o eixo vertical.

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 color pode ser qualquer string de cor HTML, por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize.

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. vAxis.viewWindow.max modifica esta propriedade.

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. vAxis.viewWindow.min modifica esta propriedade.

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:

  • "pretty" - dimensione os valores verticais para que os valores máximo e mínimo dos dados sejam renderizados um pouco dentro das partes de baixo e de cima da área do gráfico. O viewWindow é expandido para a linha de grade principal mais próxima para números ou a linha de grade secundária mais próxima para datas e horários.
  • "maximizado": dimensione os valores verticais para que os valores máximo e mínimo de dados toquem nas partes de cima e de baixo da área do gráfico. vaxis.viewWindow.min e vaxis.viewWindow.max vão ser ignorados.
  • "explicita": uma opção obsoleta para especificar os valores de escala superior e inferior da área do gráfico. Descontinuado porque é redundante com vaxis.viewWindow.min e vaxis.viewWindow.max. Os valores de dados fora desses valores serão cortados. É preciso especificar um objeto vAxis.viewWindow descrevendo os valores máximos e mínimos a serem mostrados.
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 vAxis.viewWindowMode é "bonito" ou "maximizado".

Tipo:número
Padrão: automático
vAxis.viewWindow.min

O valor mínimo de dados verticais para renderização.

Ignorado quando vAxis.viewWindowMode é "bonito" ou "maximizado".

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 ready ser acionado. Extended description

Tipo de retorno:nenhum
getAction(actionID)

Retorna o objeto de ação da dica com a actionID solicitada.

Return Type: objeto
getBoundingBox(id)

Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico id. O formato de id ainda não foi documentado (são os valores de retorno dos manipuladores de eventos), mas veja alguns exemplos:

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico
cli.getBoundingBox('chartarea').height
Largura da terceira barra na primeira série de um gráfico de barras ou de colunas
cli.getBoundingBox('bar#0#2').width
Caixa delimitadora do quinto encaixe de um gráfico de pizza
cli.getBoundingBox('slice#4')
Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):
cli.getBoundingBox('vAxis#0#gridline')
Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, uma barra):
cli.getBoundingBox('hAxis#0#gridline')

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):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

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:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

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 xPosition, que é um deslocamento de pixel da borda esquerda do contêiner do gráfico. Pode ser negativa.

Exemplo: chart.getChartLayoutInterface().getHAxisValue(400).

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. Entidades selecionáveis são pontos, anotações, entradas de legenda e categorias. Um ponto ou uma anotação corresponde a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo). Nesse gráfico, apenas uma entidade pode ser selecionada por vez. Extended description

Tipo de retorno:matriz de elementos de seleção
getVAxisValue(yPosition, optional_axis_index)

Retorna o valor de dados verticais em yPosition, que é um deslocamento de pixel da borda superior do contêiner do gráfico. Pode ser negativa.

Exemplo: chart.getChartLayoutInterface().getVAxisValue(300).

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 dataValue em relação à borda esquerda do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getXLocation(400).

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 dataValue em relação à borda superior do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getYLocation(300).

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 actionID solicitada do gráfico.

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 setAction usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: id, o ID da ação sendo definida, text, o texto que vai aparecer na dica da ação, e action, a função que precisa ser executada quando um usuário clica no texto da ação.

Toda e qualquer ação de dica precisa ser definida antes de chamar o método draw() do gráfico. Descrição estendida.

Tipo de retorno: none
setSelection()

Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior. Entidades selecionáveis são pontos, anotações, entradas de legenda e categorias. Um ponto ou uma anotação corresponde a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo). Somente uma entidade pode ser selecionada por vez para este gráfico. Extended description

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 draw e chame-o somente depois que o evento for acionado.

Propriedades:nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

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.