खास जानकारी
क्रॉसहेयर, चार्ट में डेटा पॉइंट के बीच में पतले वर्टिकल और हॉरिज़ॉन्टल लाइन होते हैं. जब आप चार्ट क्रिएटर के तौर पर, चार्ट में क्रॉसहेयर चालू करते हैं, तो आपके उपयोगकर्ता सिंगल एलिमेंट को टारगेट कर पाएंगे:
क्रॉसहेयर फ़ोकस, चुने गए या दोनों पर दिख सकते हैं. ये स्कैटर चार्ट, लाइन चार्ट, क्षेत्र चार्ट, और कॉम्बो चार्ट की लाइन और एरिया हिस्सों के लिए उपलब्ध हैं.
एक आसान उदाहरण
क्रॉसहेयर देखने के लिए नीचे दिए बिंदुओं पर कर्सर घुमाएं या उन्हें चुनें:
यहां एक पूरा वेब पेज दिया गया है, जिसमें ऊपर दिए गए चार्ट को बोल्ड में क्रॉसहेयर के लिए बनाया गया है:
<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>
क्रॉसहेयर विकल्प
ये क्रॉसहेयर विकल्प उपलब्ध हैं:
crosshair: { trigger: 'both' } | फ़ोकस और चुनने, दोनों पर दिखाएं |
crosshair: { trigger: 'focus' } | सिर्फ़ फ़ोकस वाले डिसप्ले पर |
crosshair: { trigger: 'selection' } | सिर्फ़ चुने गए डिसप्ले पर |
crosshair: { orientation: 'both' } | हॉरिज़ॉन्टल और वर्टिकल, दोनों तरह के बाल दिखाएं |
crosshair: { orientation: 'horizontal' } | सिर्फ़ हॉरिज़ॉन्टल बाल दिखाएं |
crosshair: { orientation: 'vertical' } | सिर्फ़ वर्टिकल बाल दिखाएं |
crosshair: { color: color_string } | क्रॉसहेयर रंग को color_string पर सेट करें, उदाहरण, 'red' या '#f00' |
crosshair: { opacity: opacity_number } | क्रॉसहेयर ओपैसिटी को opacity_number पर सेट करें. इसमें 0.0 पूरी तरह से पारदर्शी और 1.0 पूरी तरह से अपारदर्शी होगा |
crosshair: { focused: { color: color_string } } | फ़ोकस पर क्रॉसहेयर रंग को color_string पर सेट करें |
crosshair: { focused: { opacity: opacity_number } } | फ़ोकस पर क्रॉसहेयर अपारदर्शिता को opacity_number पर सेट करें |
crosshair: { selected: { color: color_string } } | चुनने पर क्रॉसहेयर रंग को color_string पर सेट करें |
crosshair: { selected: { opacity: opacity_number } } | चुनने पर, क्रॉसहेयर ओपैसिटी को opacity_number पर सेट करें |