Tổng quan
Vạch chữ thập là các đường dọc và ngang mỏng nằm ở giữa một điểm dữ liệu trong biểu đồ. Khi bạn, với tư cách là nhà sáng tạo biểu đồ, bật dấu gạch chéo trong biểu đồ, người dùng của bạn sẽ có thể nhắm đến một phần tử duy nhất:
Hình chữ thập có thể xuất hiện ở tiêu điểm, lựa chọn hoặc cả hai. Chúng có sẵn cho biểu đồ tán xạ, biểu đồ dạng đường, biểu đồ vùng và các phần dòng và vùng của biểu đồ kết hợp.
Ví dụ đơn giản
Di chuột qua các điểm bên dưới hoặc chọn các điểm này để xem các hình chữ thập:
Sau đây là một trang web hoàn chỉnh tạo ra biểu đồ trên, với dòng cho chữ thập được in đậm:
<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>
Lựa chọn hình chữ thập
Bạn có các tuỳ chọn hiển thị vạch chữ thập sau đây:
crosshair: { trigger: 'both' } | hiển thị trên cả tiêu điểm và lựa chọn |
crosshair: { trigger: 'focus' } | chỉ hiển thị trên tiêu điểm |
crosshair: { trigger: 'selection' } | chỉ hiển thị đối với lựa chọn |
crosshair: { orientation: 'both' } | hiển thị cả tóc ngang và dọc |
crosshair: { orientation: 'horizontal' } | chỉ hiển thị tóc ngang |
crosshair: { orientation: 'vertical' } | chỉ hiển thị tóc dọc |
crosshair: { color: color_string } | đặt màu chữ thập thành color_string, ví dụ: 'red' hoặc '#f00' |
crosshair: { opacity: opacity_number } | đặt độ mờ chữ thập thành opacity_number, với 0.0 là hoàn toàn trong suốt và 1.0 hoàn toàn không trong suốt |
crosshair: { focused: { color: color_string } } | đặt màu chữ thập thành color_string trên tiêu điểm |
crosshair: { focused: { opacity: opacity_number } } | đặt độ mờ chữ thập thành opacity_number lấy tiêu điểm |
crosshair: { selected: { color: color_string } } | đặt màu chữ thập thành color_string trên vùng chọn |
crosshair: { selected: { opacity: opacity_number } } | đặt opacity opacity thành opacity_number để chọn |