Visão geral
As linhas de referência são linhas verticais e horizontais finas centralizadas em um ponto de dados em um gráfico. Quando você, como criador de gráficos, ativa linhas de referência nos seus gráficos, os usuários podem segmentar um único elemento:
As linhas de referência podem aparecer em foco, seleção ou em ambos. Eles estão disponíveis para gráficos de dispersão, linhas, áreas e para as partes de linha e área de gráficos de combinação.
Um exemplo simples
Passe o cursor sobre os pontos abaixo ou selecione-os para ver as linhas de referência:
Veja uma página da Web completa que cria o gráfico acima, com a linha de mira em negrito:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); for (var i = 0; i < 100; i++) data.addRow([Math.floor(Math.random()*100), Math.floor(Math.random()*100)]); var options = { legend: 'none', crosshair: { trigger: 'both' } // Display crosshairs on focus and selection. }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Opções de mira
As seguintes opções de mira estão disponíveis:
crosshair: { trigger: 'both' } | exibir no foco e na seleção |
crosshair: { trigger: 'focus' } | exibir somente em foco |
crosshair: { trigger: 'selection' } | exibir somente na seleção |
crosshair: { orientation: 'both' } | mostrar cabelos horizontais e verticais |
crosshair: { orientation: 'horizontal' } | exibir apenas cabelos horizontais |
crosshair: { orientation: 'vertical' } | exibir somente cabelos verticais |
crosshair: { color: color_string } | definir a cor da mira como color_string, por exemplo, 'red' ou '#f00' |
crosshair: { opacity: opacity_number } | Defina a opacidade da cruz como opacity_number, com 0.0 sendo totalmente transparente e 1.0 totalmente opaco. |
crosshair: { focused: { color: color_string } } | definir a cor da mira como color_string em foco |
crosshair: { focused: { opacity: opacity_number } } | definir opacidade da mira como opacity_number em foco |
crosshair: { selected: { color: color_string } } | definir a cor da mira como color_string na seleção |
crosshair: { selected: { opacity: opacity_number } } | definir a opacidade da cruz em opacity_number na seleção |