Tùy chỉnh rìu

  1. Tổng quan
  2. Thuật ngữ
  3. Phân biệt đối xử và Liên tục
  4. Tỷ lệ trục
  5. Định dạng số

Tổng quan

Các tham số trong dữ liệu thường hiển thị trên các trục, ngang và dọc. Chẳng hạn như: Biểu đồ vùng, Biểu đồ thanh, Biểu đồ hình nến, Biểu đồ cột, Biểu đồ kết hợp, Biểu đồ dạng đường, Biểu đồ vùng dạng bậc và Biểu đồ thang.

Khi tạo biểu đồ có trục, bạn có thể tùy chỉnh một số thuộc tính của chúng:

  • Phân biệt đối xử và Liên tục
  • Hướng – Bạn có thể tuỳ chỉnh hướng bằng cách sử dụng tuỳ chọn hAxis/vAxis.direction.
  • Định vị và định kiểu nhãn – Bạn có thể tuỳ chỉnh vị trí và kiểu của nhãn bằng các tuỳ chọn hAxis/vAxis.textPosition và hAxis/vAxis.textStyle.
  • Văn bản và kiểu tiêu đề trục - Bạn có thể tùy chỉnh văn bản và kiểu tiêu đề trục bằng các tùy chọn hAxis/vAxis.title và hAxis/vAxis.titleTextStyle.
  • Thang trục – Bạn có thể đặt thang trên trục thành thang đo lôgarit (log) bằng cách sử dụng tuỳ chọn hAxis/vAxis.logScale hoặc hAxis/vAxis.scaleType.
  • Để biết danh sách đầy đủ các tùy chọn cấu hình trục, hãy xem các tùy chọn hAxi và vAxis trong tài liệu cho biểu đồ cụ thể của bạn.

Thuật ngữ

Trục chính/Trục nhỏ:

  • Trục chính là trục dọc theo hướng tự nhiên của biểu đồ. Đối với đường kẻ, khu vực, cột, tổ hợp, khu vực bậc thang và biểu đồ hình nến, đây là trục hoành. Đối với biểu đồ thanh, biểu đồ này là biểu đồ dọc. Biểu đồ tán xạ và biểu đồ hình tròn không có trục chính.
  • Trục minor là trục còn lại.

Trục rời rạc/liên tục:

  • Trục tách biệt có một số lượng hữu hạn các giá trị cách nhau đồng đều, được gọi là danh mục.
  • Trục liên tục có số lượng giá trị vô hạn.

Phân biệt với Liên tục

Trục chính của biểu đồ có thể bị gián đoạn hoặc liên tục. Khi sử dụng một trục riêng biệt, các điểm dữ liệu của mỗi chuỗi được giãn cách đồng đều trên trục, theo chỉ mục hàng của chúng. Khi sử dụng trục liên tục, các điểm dữ liệu được định vị theo giá trị miền của các điểm dữ liệu đó.

Việc gắn nhãn cũng khác nhau. Trong một trục riêng, tên của các danh mục (được chỉ định trong cột miền của dữ liệu) được dùng làm nhãn. Trong một trục liên tục, các nhãn sẽ được tạo tự động: biểu đồ này hiển thị các đường lưới cách đều nhau, trong đó mỗi đường lưới được gắn nhãn theo giá trị mà nó đại diện.

Các trục sau luôn liên tục:

  • Cả hai trục của biểu đồ bong bóng.
  • Trục nhỏ.

Trong biểu đồ dạng đường, khu vực, thanh, cột và hình nến (và biểu đồ kết hợp chỉ chứa các chuỗi như vậy), bạn có thể kiểm soát loại trục chính:

  • Đối với trục riêng biệt, hãy đặt loại cột dữ liệu thành string.
  • Đối với trục liên tục, hãy đặt loại cột dữ liệu thành một trong các loại sau: number, date, datetime hoặc timeofday.
Rời rạc / Liên tục Loại cột đầu tiên Ví dụ:
Tách biệt chuỗi
Liên tục number
Liên tục ngày

Tỷ lệ trục

Bạn có thể đặt tỷ lệ của trục bằng tùy chọn scaleType. Ví dụ: để đặt tỷ lệ của trục dọc thành thang ghi nhật ký, hãy sử dụng tùy chọn sau:

  vAxis: {
        scaleType: 'log'
  }

Biểu đồ dạng đường sau đây cho thấy sự gia tăng dân số thế giới ở cả quy mô tuyến tính (chuẩn) và thang đo nhật ký.

<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(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

Khi sử dụng định dạng sử dụng văn bản (ví dụ: định dạng long, sẽ hiển thị 8.000.000 thành "8 triệu", bạn có thể bản địa hoá các chuỗi sang ngôn ngữ khác bằng cách chỉ định mã ngôn ngữ khi tải thư viện Google Biểu đồ. Ví dụ: Để thay đổi "8 triệu" thành "8 миллиона" của Nga, hãy gọi thư viện như sau:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>