Omówienie
Krzyżyk to cienkie pionowe i poziome linie wyśrodkowane w punkcie danych na wykresie. Jeśli jako twórca wykresów włączysz w swoich wykresach krzyżyk, Twoi użytkownicy będą mogli kierować reklamy na 1 element:
Krzyżyk może się wyświetlać na pierwszym planie, na obu tych obszarach. Są one dostępne na wykresach rozproszonych, wykresach liniowych, wykresach warstwowych oraz częściach liniowych i powierzchniowych wykresów mieszanych.
Prosty przykład
Najedź kursorem myszy na poniższe punkty lub wybierz je, aby wyświetlić krzyżyk:
Oto kompletna strona internetowa, która tworzy powyższy wykres, z wyróżnionym pogrubionym krzyżykiem:
<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>
Opcje celownika
Dostępne są następujące rodzaje celownika:
crosshair: { trigger: 'both' } | wyświetlaj zaznaczenia i zaznaczanie |
crosshair: { trigger: 'focus' } | wyświetlaj tylko podczas ustawiania ostrości |
crosshair: { trigger: 'selection' } | Wyświetlaj tylko po zaznaczeniu |
crosshair: { orientation: 'both' } | wyświetlaj fryzury poziome i pionowe |
crosshair: { orientation: 'horizontal' } | wyświetlaj tylko fryzury poziome |
crosshair: { orientation: 'vertical' } | wyświetlaj tylko pionowe włosy |
crosshair: { color: color_string } | ustaw kolor krzyżyka na color_string, np. 'red' lub '#f00' |
crosshair: { opacity: opacity_number } | ustaw przezroczystość w postaci krzyżaka na opacity_number, gdzie 0.0 ma być całkowicie przezroczyste, a 1.0 całkowicie nieprzezroczyste |
crosshair: { focused: { color: color_string } } | ustaw kolor krzyżyka na color_string |
crosshair: { focused: { opacity: opacity_number } } | ustaw ostrość w postaci krzyżaka na opacity_number |
crosshair: { selected: { color: color_string } } | Ustaw kolor krzyża na color_string |
crosshair: { selected: { opacity: opacity_number } } | ustaw przezroczystość krzyżyka na opacity_number przy zaznaczonym obszarze |