Genel bakış
Artı işaretleri, grafikteki bir veri noktasına odaklanmış ince ve dikey çizgilerdir. Bir grafik oluşturucu olarak grafiklerinizde artıları etkinleştirdiğinizde kullanıcılarınız tek bir öğeyi hedefleyebilir:
Artı işaretleri odak, seçim veya her ikisinde de görünebilir. Dağılım grafikleri, çizgi grafikler, alan grafikleri ve birleşik grafiklerin çizgi ve alan bölümleri için kullanılabilirler.
Basit Bir Örnek
Çaprazları görmek için farenizle aşağıdaki noktaların üzerine gelin veya bunları seçin:
Yukarıdaki grafiği oluşturan eksiksiz bir web sayfasını, artı işareti çizgisinin kalın olarak yazıldığı şekilde görebilirsiniz:
<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>
Artı Seçenekleri
Aşağıdaki artı işareti seçenekleri kullanılabilir:
crosshair: { trigger: 'both' } | hem odak hem de seçimde göster |
crosshair: { trigger: 'focus' } | yalnızca odakta göster |
crosshair: { trigger: 'selection' } | yalnızca seçimde göster |
crosshair: { orientation: 'both' } | yatay ve dikey saçları gösterir |
crosshair: { orientation: 'horizontal' } | yalnızca yatay saçları göster |
crosshair: { orientation: 'vertical' } | yalnızca dikey tüyleri göster |
crosshair: { color: color_string } | artı rengini color_string olarak ayarlayın (ör. 'red' veya '#f00' |
crosshair: { opacity: opacity_number } | artı işareti opaklığını opacity_number olarak, 0.0 tamamen şeffaf ve 1.0 tam opak olarak ayarlayın |
crosshair: { focused: { color: color_string } } | artı işaretini renk odaklı olacak şekilde color_string olarak ayarlayın |
crosshair: { focused: { opacity: opacity_number } } | odaktaki çapraz opaklığı opacity_number olarak ayarla |
crosshair: { selected: { color: color_string } } | seçimde artı rengini color_string olarak ayarla |
crosshair: { selected: { opacity: opacity_number } } | seçimde artı işareti opaklığını opacity_number olarak ayarla |