Hình chữ thập

  1. Tổng quan
  2. Ví dụ đơn giản
  3. Tuỳ chọn chữ thập

Tổng quan

Hình chữ thập là các đường thẳng dọc và ngang mỏng ở giữa một điểm dữ liệu trong biểu đồ. Với tư cách là người tạo biểu đồ, khi bạn bật hình chữ thập trong biểu đồ, người dùng sẽ có thể nhắm mục tiêu một phần tử duy nhất:

Hình chữ thập có thể xuất hiện trên tiêu điểm, phần lựa chọn hoặc cả hai. Các biểu đồ này có sẵn cho biểu đồ tán xạ, biểu đồ dạng đường, biểu đồ vùng cũng như cho các phần đường và vùng của biểu đồ kết hợp.

Một ví dụ đơn giản

Hãy di chuột qua các điểm bên dưới hoặc chọn các điểm đó để xem hình chữ thập:

Dưới đây là một trang web hoàn chỉnh tạo biểu đồ trên, với dòng 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>

Tùy chọn chữ thập

Có các tuỳ chọn hình 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ị lấy nét
crosshair: { trigger: 'selection' } chỉ hiển thị trên thiết bị đã 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ờ hình 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 mờ đục
crosshair: { focused: { color: color_string } } đặt màu chữ thập thành color_string làm tiêu điểm
crosshair: { focused: { opacity: opacity_number } } đặt độ mờ hình chữ thập thành opacity_number trên tiêu điểm
crosshair: { selected: { color: color_string } } đặt màu chữ thập thành color_string trên lựa chọn
crosshair: { selected: { opacity: opacity_number } } đặt độ mờ hình chữ thập thành opacity_number khi chọn