ภาพรวม
เครื่องหมายกากบาทเป็นเส้นแนวตั้งและแนวนอนบางๆ ที่มีจุดศูนย์กลางเป็นจุดข้อมูลในแผนภูมิ เมื่อคุณเป็นผู้สร้างแผนภูมิ ให้เปิดใช้ครอสเซล ในแผนภูมิ ผู้ใช้จะสามารถกําหนดเป้าหมายองค์ประกอบได้เพียงรายการเดียว ดังนี้
เครื่องหมายกากบาทสามารถปรากฏที่โฟกัส การเลือก หรือทั้ง 2 อย่าง โดยใช้สําหรับแผนภูมิกระจาย แผนภูมิเส้น แผนภูมิพื้นที่ และส่วนของเส้นและพื้นที่ของแผนภูมิผสม
ตัวอย่างง่ายๆ
วางเมาส์เหนือจุดด้านล่างหรือเลือกจุดดังกล่าวเพื่อดูเครื่องหมายกากบาท
นี่คือหน้าเว็บที่สมบูรณ์ซึ่งสร้างแผนภูมิข้างต้น โดยมีเส้นครอสโอเวอร์เป็นตัวหนา
<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
ตัวเลือกผมตรงข้ามมีดังนี้
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 สําหรับการเลือก |