نظرة عامة
يُعد المؤشر المتقاطع خطوطًا رأسية وأفقية تتوسطها نقطة بيانات في المخطط. عندما تمكِّن - بصفتك منشئًا للمخططات - مؤشرًا متقاطعًا في الرسوم البيانية، سيتمكن المستخدمون حينئذٍ من استهداف عنصر واحد:
يمكن أن يظهر مؤشر متقاطع على التركيز أو التحديد أو كليهما. تتوفر هذه المخططات للمخططات المبعثرة والمخططات الخطية والرسوم البيانية المساحية وأجزاء الخطوط والمساحات في الرسوم البيانية للتحرير والسرد.
مثال بسيط
مرِّر مؤشر الماوس فوق النقاط أدناه أو اختَرها للاطّلاع على مؤشر متقاطع:
في ما يلي صفحة ويب كاملة تُنشئ الرسم البياني أعلاه، مع خط متقاطع بخط غامق:
<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 عند التحديد |