Panoramica
I mirini sono sottili linee verticali e orizzontali centrate su un punto dati in un grafico. In qualità di creatore di grafici, abilitando i mirini nei grafici, gli utenti potranno scegliere come target un singolo elemento:
Il mirino può essere attivo, selezionato o entrambi. Sono disponibili per grafici a dispersione, grafici a linee, grafici ad area e per le parti di linee e aree dei grafici combinati.
Un esempio semplice
Passa il mouse sopra i punti seguenti o selezionali per visualizzare i mirini:
Di seguito è riportata una pagina web completa che crea il grafico sopra, con la linea per i mirini in grassetto:
<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>
Mirino
Sono disponibili le seguenti opzioni di Mirino:
crosshair: { trigger: 'both' } | visualizzate sia a fuoco che in selezione |
crosshair: { trigger: 'focus' } | solo messa a fuoco in primo piano |
crosshair: { trigger: 'selection' } | Display solo su selezione |
crosshair: { orientation: 'both' } | mostrare i capelli sia orizzontali sia verticali |
crosshair: { orientation: 'horizontal' } | visualizza solo peli orizzontali |
crosshair: { orientation: 'vertical' } | mostra solo capelli verticali |
crosshair: { color: color_string } | imposta il colore del mirino su color_string, ad esempio 'red' o '#f00' |
crosshair: { opacity: opacity_number } | imposta l'opacità del mirino su opacity_number, con 0.0 completamente trasparente e 1.0 completamente opaco |
crosshair: { focused: { color: color_string } } | imposta il colore del mirino su color_string sulla messa a fuoco |
crosshair: { focused: { opacity: opacity_number } } | imposta l'opacità del mirino su opacity_number sulla messa a fuoco |
crosshair: { selected: { color: color_string } } | imposta il colore del mirino su color_string alla selezione |
crosshair: { selected: { opacity: opacity_number } } | imposta l'opacità del mirino su opacity_number alla selezione |