Visão geral
Uma
Os gráficos do Google são compatíveis com três tipos de linhas de tendência: linear, polinomial e exponencial.
Linhas de tendência lineares
Uma linha de tendência
No gráfico abaixo, você pode ver uma linha de tendência linear em um gráfico de dispersão comparando a idade dos bordos de açúcar ao diâmetro dos troncos. Passe o cursor sobre a linha de tendência para ver a equação calculada pelos gráficos do Google: 4,885 vezes o diâmetro + 0,730.
Para desenhar uma linha de tendência em um gráfico, use a opção trendlines
e especifique qual série de dados usar:
google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Diameter', 'Age'], [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]); var options = { title: 'Age of sugar maples vs. trunk diameter, in inches', hAxis: {title: 'Diameter'}, vAxis: {title: 'Age'}, legend: 'none', trendlines: { 0: {} } // Draw a trendline for data series 0. }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); }
As linhas de tendência lineares são o tipo mais comum. Mas às vezes uma curva é melhor para descrever dados e, para isso, precisaremos de outro tipo de linha de tendência.
Linhas de tendência exponencial
Se for melhor explicar seus dados com uma exponencial na forma eax+b, você pode usar o atributo type
para especificar uma linha de tendência
Observação: ao contrário das linhas de tendência lineares, existem várias maneiras diferentes de calcular linhas de tendência exponencial. Oferecemos apenas um método no momento, mas vamos oferecer suporte a mais no futuro. Por isso, é possível que o nome ou o comportamento da linha de tendência exponencial atual mude.
Neste gráfico, também usamos visibleInLegend: true
para
exibir a curva exponencial na legenda.
google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Generation', 'Descendants'], [0, 1], [1, 33], [2, 269], [3, 2013] ]); var options = { title: 'Descendants by Generation', hAxis: {title: 'Generation', minValue: 0, maxValue: 3}, vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100}, trendlines: { 0: { type: 'exponential', visibleInLegend: true, } } }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2')); chart.draw(data, options); }
Mudar a cor
Por padrão, as linhas de tendência têm as mesmas cores da série de dados, mas são mais claras. É possível substituir isso pelo atributo color
.
Aqui, mostramos quantos dígitos do π foram calculados por ano
durante um período computacionalmente frutífero, colorindo o verde da linha
de tendência exponencial.
Veja as especificações das linhas de tendência:
trendlines: { 0: { type: 'exponential', color: 'green', } }
Linhas de tendência polinomiais
Para gerar uma linha de tendência polinomial, especifique o tipo polynomial
e um degree
. Use com
cautela, porque às vezes eles podem levar a resultados enganosos. No
exemplo abaixo, em que um conjunto de dados aproximadamente linear é representado com uma
linha de tendência cúbica (graus 3):
O plummet após o último ponto de dados é visível apenas porque estendemos artificialmente o eixo horizontal para 15. Sem definir hAxis.maxValue como 15, o código ficaria assim:
Mesmas dados, mesma polinomial, janela diferente nos dados.
var options = { title: 'Age vs. Weight comparison', legend: 'none', crosshair: { trigger: "both", orientation: "both" }, trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: true, } } };
<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', legend: 'none', crosshair: { trigger: 'both', orientation: 'both' }, trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: true, } } }; var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div')); chart.draw(data, options); } </script> </head> <body> <div id='polynomial2_div' style='width: 900px; height: 500px;'></div> </body> </html>
Mudar a opacidade e a largura da linha
É possível alterar a transparência da linha de tendência definindo opacity
como um valor entre 0,0 e 1,0 e a largura da linha definindo a opção lineWidth
.
trendlines: { 0: { color: 'purple', lineWidth: 10, opacity: 0.2, type: 'exponential' } }
A opção lineWidth
é suficiente para a maioria dos usos, mas,
se você gosta da aparência, há uma opção pointSize
que pode
ser usada para personalizar o tamanho dos pontos selecionáveis dentro da linha de tendência:
Assim como a luz é uma onda e uma partícula, uma linha de tendência é uma linha e vários pontos. O que os usuários veem depende de como eles interagem com ele: normalmente, uma linha é destacada, mas quando você passa o cursor sobre a linha de tendência, um ponto específico é destacado. Esse ponto terá um diâmetro igual a:
- a linha de tendência
pointSize
, se definida... - o
pointSize
global, se definido de outra forma... - 7
No entanto, se você definir a opção pointSize
global ou
de tendência, todos os pontos selecionáveis
serão mostrados, independentemente do
lineWidth
da linha de tendência.
var options = { legend: 'none', hAxis: { ticks: [] }, vAxis: { ticks: [] }, pointShape: 'diamond', trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: true, pointSize: 20, // Set the size of the trendline dots. opacity: 0.1 } } };
<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([ ['X', 'Y'], [0, 4], [1, 2], [2, 4], [3, 6], [4, 4] ]); var options = { legend: 'none', hAxis: { ticks: [] }, vAxis: { ticks: [] }, colors: ['#703583'], pointShape: 'diamond', trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: true, pointSize: 20, // Set the size of the trendline dots. opacity: 0.1 } } }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize')); chart.draw(data, options); } </script> </head> <body> <div id="chart_pointSize" style="width: 900px; height: 500px;"></div> </body> </html>
Como tornar os pontos visíveis
As linhas de tendência são refletidas 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. A opção padrão para todas as linhas de tendência é true
, mas se você quiser desativar
a visibilidade de ponto na primeira linha, defina
trendlines.0.pointsVisible: false
.
O gráfico abaixo demonstra o controle de visibilidade de pontos por linha de tendência.
var options = { height: 500, legend: 'none', colors: ['#9575cd', '#33ac71'], pointShape: 'diamond', trendlines: { 0: { type: 'exponential', pointSize: 20, opacity: 0.6, pointsVisible: false }, 1: { type: 'linear', pointSize: 10, pointsVisible: true } } };
<html> <head> <meta charset="utf-8"/> <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([ ['X', 'Y', 'Z'], [0, 4, 5], [1, 2, 6], [2, 4, 8], [3, 6, 10], [4, 4, 11], [5, 8, 13], [6, 12, 15], [7, 15, 19], [8, 25, 21], [9, 34, 23], [10, 50, 27] ]); var options = { height: 500, legend: 'none', colors: ['#9575cd', '#33ac71'], pointShape: 'diamond', trendlines: { 0: { type: 'exponential', pointSize: 20, opacity: 0.6, pointsVisible: false }, 1: { type: 'linear', pointSize: 10, pointsVisible: true } } }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Mudar o marcador
Por padrão, se você selecionar visibleInLegend
, o rótulo revelará a equação da linha de tendência. É possível usar labelInLegend
para especificar um rótulo diferente. Aqui, mostramos uma linha de tendência para cada uma das duas séries, definindo os rótulos na
legenda como "Linha de bug" (para a série 0) e "Linha de teste" (série 1).
trendlines: { 0: { labelInLegend: 'Bug line', visibleInLegend: true, }, 1: { labelInLegend: 'Test line', visibleInLegend: true, } }
Correlações
O coeficiente de determinação, chamado R2 em estatísticas, identifica o quanto uma linha de tendência corresponde aos dados. Uma correlação perfeita é 1,0 e uma anticorrelação perfeita é 0,0.
Você pode representar R2 na legenda do gráfico, definindo a opção showR2
como true
.
<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 = { hAxis: {minValue: 0, maxValue: 15}, vAxis: {minValue: 0, maxValue: 15}, chartArea: {width:'50%'}, trendlines: { 0: { type: 'linear', showR2: true, visibleInLegend: true } } }; var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear')); chartLinear.draw(data, options); options.trendlines[0].type = 'exponential'; options.colors = ['#6F9654']; var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential')); chartExponential.draw(data, options); } </script> </head> <body> <div id="chartLinear" style="height: 350px; width: 800px"></div> <div id="chartExponential" style="height: 350px; width: 800px"></div> </body> </html>