Ringkasan
Garis bidik adalah garis vertikal dan horizontal tipis yang berpusat pada titik data di diagram. Saat Anda, sebagai pembuat diagram, mengaktifkan garis bidik dalam diagram, pengguna akan dapat menargetkan satu elemen:
Tanda pisah dapat muncul pada fokus, pilihan, atau keduanya. Diagram ini tersedia untuk diagram sebar, diagram garis, diagram area, serta untuk bagian garis dan area diagram kombinasi.
Contoh Sederhana
Arahkan kursor ke titik di bawah ini, atau pilih, untuk melihat garis bidik:
Berikut adalah halaman lengkap yang membuat diagram di atas, dengan garis untuk garis bidik yang dicetak tebal:
<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>
Opsi Crosshair
Opsi crosshair berikut tersedia:
crosshair: { trigger: 'both' } | yang menampilkan fokus dan pilihan |
crosshair: { trigger: 'focus' } | ditampilkan hanya pada fokus |
crosshair: { trigger: 'selection' } | ditampilkan hanya pada pilihan |
crosshair: { orientation: 'both' } | menampilkan rambut horizontal dan vertikal |
crosshair: { orientation: 'horizontal' } | hanya tampilkan rambut horizontal |
crosshair: { orientation: 'vertical' } | hanya tampilkan rambut vertikal |
crosshair: { color: color_string } | setel warna garis bidik ke color_string, misalnya, 'red' atau '#f00' |
crosshair: { opacity: opacity_number } | setel opasitas crosshair menjadi opacity_number, dengan 0.0 transparan sepenuhnya dan 1.0 sepenuhnya buram |
crosshair: { focused: { color: color_string } } | menetapkan warna crosshair ke color_string pada fokus |
crosshair: { focused: { opacity: opacity_number } } | setel opasitas crosshair menjadi opacity_number pada fokus |
crosshair: { selected: { color: color_string } } | setel warna crosshair ke color_string pada pilihan |
crosshair: { selected: { opacity: opacity_number } } | setel opasitas crosshair menjadi opacity_number sesuai pilihan |