Visão geral
Em muitos gráficos do Google, os valores de dados são exibidos em pontos precisos. Um gráfico de linhas é apenas um conjunto desses pontos conectados por linhas, e um gráfico de dispersão é apenas pontos.
Em todos os gráficos, exceto no de dispersão, por padrão, esses pontos são de tamanho zero. Você pode controlar o tamanho com a opção pointSize
e o formato com a opção pointShape
.
Acima, é possível ver um gráfico com seis séries, cada uma com pointSize
30, mas com uma pointShape
diferente.
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 7 }, pointSize: 30, series: { 0: { pointShape: 'circle' }, 1: { pointShape: 'triangle' }, 2: { pointShape: 'square' }, 3: { pointShape: 'diamond' }, 4: { pointShape: 'star' }, 5: { pointShape: 'polygon' } } };
<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', '1', '2', '3', '4', '5', '6'], [1, 2, null, null, null, null, null], [2, null, 3, null, null, null, null], [3, null, null, 4, null, null, null], [4, null, null, null, 5, null, null], [5, null, null, null, null, 6, null], [6, null, null, null, null, null, 7] ]); var options = { legend: 'none', pointSize: 30, series: { 0: { pointShape: 'circle' }, 1: { pointShape: 'triangle' }, 2: { pointShape: 'square' }, 3: { pointShape: 'diamond' }, 4: { pointShape: 'star' }, 5: { pointShape: 'polygon' } } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Alguns exemplos simples
Ao contrário do gráfico na seção anterior, a maioria dos gráficos tem apenas uma série. Veja o exemplo de um gráfico de linhas com pontos circulares de 20 pontos:
Como o pointShape
padrão é o círculo, podemos mantê-lo fora das opções:
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 20, };
<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'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 20, }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
É possível alterar o formato de "círculo" para outra forma
definindo pointShape
como "triângulo", "quadrado", "diamante",
"estrela" ou "polígono":
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#795548'], pointSize: 20, pointShape: 'square' };
<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'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#795548'], pointSize: 20, pointShape: 'square' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
As formas "estrela" e "polígono" permitem personalizar o número de lados, ambos sendo padronizados como cinco. Algumas estrelas de quatro lados:
var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#EF851C'], pointSize: 30, pointShape: { type: 'star', sides: 4 } };
<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'], [1, 3], [2, 2.5], [3, 3], [4, 4], [5, 4], [6, 3], [7, 2.5], [8, 3] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, colors: ['#EF851C'], pointSize: 30, pointShape: { type: 'star', sides: 4 } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
As estrelas podem ser ainda mais personalizadas com a opção dent
, que controla se a estrela é próxima. Quando a agulha estiver próxima de zero, a estrela será semelhante a uma estrela-do-mar; à medida que se aproxima dela, ela vai ultrapassar um polígono equilátero.
Aqui estão as dents variando de 0,05 a 0,8 para cinco estrelas unilaterals:
var options = { legend: 'none', hAxis: { textPosition: 'none' }, vAxis: { textPosition: 'none', gridlines: { count: 0 }, baselineColor: 'white' }, colors: ['#E94D20', '#ECA403', '#63A74A', '#15A0C8', '#4151A3', '#703593', '#981B48'], pointSize: 20, annotations: { stemColor: 'white', textStyle: { fontSize: 16 } }, series: { 0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } }, 1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } }, 2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } }, 3: { pointShape: { type: 'star', sides: 5 } }, 4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }, 5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } }, 6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } }, } };
<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('string', 'Element'); data.addColumn('number', 'A'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'B'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'C'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'D'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'E'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'F'); data.addColumn( { type: 'string', role: 'annotation' }); data.addColumn('number', 'G'); data.addColumn( { type: 'string', role: 'annotation' }); data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]); data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]); data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]); data.addRow(['D', , , , , , , 1, "default", , , , , , null]); data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]); data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]); data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]); var options = { legend: 'none', hAxis: { textPosition: 'none' }, vAxis: { textPosition: 'none', gridlines: { count: 0 }, baselineColor: 'white' }, colors: ['#E94D20', '#ECA403', '#63A74A', '#15A0C8', '#4151A3', '#703593', '#981B48'], pointSize: 20, annotations: { stemColor: 'white', textStyle: { fontSize: 16 } }, series: { 0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } }, 1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } }, 2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } }, 3: { pointShape: { type: 'star', sides: 5 } }, 4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }, 5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } }, 6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } }, } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Rotações
Todas as formas de ponto podem ser giradas com a opção rotation
, especificada em graus. Por exemplo, podemos fazer nossos triângulos apontarem para baixo no gráfico de área abaixo, girando-os 180 graus:
var options = { legend: 'none', colors: ['#15A0C8'], pointSize: 30, pointShape: { type: 'triangle', rotation: 180 } };
<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'], [1, 3], [2, 2.5], [3, 2], [4, 3], [5, 4.5], [6, 6.5], [7, 9], [8, 12] ]); var options = { legend: 'none', colors: ['#15A0C8'], pointSize: 30, pointShape: { type: 'triangle', rotation: 180 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Personalizar pontos individuais
Por padrão, os estilos aplicados a um ponto se aplicam a todos os pontos da série. Se você quiser mudar a aparência de um ponto de dados específico, é possível fazer isso.
No gráfico a seguir, aumentamos o tamanho de um dos pontos, reduzimos a opacidade para 0, 3 e mudamos a forma e a cor:
<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', {'type': 'string', 'role': 'style'}], [1, 3, null], [2, 2.5, null], [3, 3, null], [4, 4, null], [5, 4, null], [6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'], [7, 2.5, null], [8, 3, null] ]); var options = { legend: 'none', hAxis: { minValue: 0, maxValue: 9 }, curveType: 'function', pointSize: 7, dataOpacity: 0.3 }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
As seguintes personalizações de estilo estão disponíveis:
fill-color
(especificado como uma string hexadecimal).shape-dent
shape-rotation
shape-sides
shape-type
stroke-color
(especificado como uma string hexadecimal).stroke-width
(especificado como uma string hexadecimal).size
visible
: indica se o ponto está visível ou não.
A opacidade é controlada não por um estilo, mas com a
opção dataOpacity
.