Biểu đồ thanh

Tổng quan

Biểu đồ thanh của Google được kết xuất trong trình duyệt bằng SVG hoặc VML, tuỳ theo trình duyệt nào của người dùng. Giống như tất cả biểu đồ Google, biểu đồ thanh sẽ hiển thị nội dung chú giải công cụ khi người dùng di chuột qua dữ liệu. Để xem phiên bản dọc của biểu đồ này, hãy xem biểu đồ cột.

Ví dụ

Thanh màu

Hãy vẽ biểu đồ mật độ của 4 kim loại quý:

Ở trên, tất cả các màu đều là màu xanh dương mặc định. Lý do là tất cả các tập phim này đều thuộc cùng một chương trình dài tập; nếu có một chương trình dài tập thứ hai, các chương trình đó sẽ có màu đỏ. Chúng ta có thể tuỳ chỉnh các màu này bằng vai trò định kiểu:

Có ba cách để chọn màu và bảng dữ liệu của chúng tôi trình bày tất cả các màu đó: giá trị RGB, tên màu tiếng Anh và nội dung khai báo giống như CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Kiểu thanh

Vai trò kiểu cho phép bạn kiểm soát một số khía cạnh của giao diện thanh bằng những nội dung khai báo giống như CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Bạn không nên kết hợp các kiểu quá mức bên trong một biểu đồ – hãy chọn một kiểu và tuân thủ kiểu đó, nhưng để minh hoạ tất cả thuộc tính về kiểu, bạn có thể tham khảo một mẫu sau đây:

Hai thanh đầu tiên, mỗi thanh sử dụng một color cụ thể (thanh đầu tiên có tên tiếng Anh, thanh thứ hai có giá trị RGB). Không có opacity nào được chọn, vì vậy, giá trị mặc định là 1.0 (mờ hoàn toàn) được sử dụng; đó là lý do tại sao thanh thứ hai che khuất đường lưới phía sau. Trong thanh thứ ba, opacity 0,2 được sử dụng, hiển thị đường lưới. Trong thanh thứ tư, ba thuộc tính kiểu được sử dụng: stroke-color và stroke-width để vẽ đường viền và fill-color để chỉ định màu của hình chữ nhật bên trong. Thanh ngoài cùng bên phải cũng sử dụng stroke-opacity và fill-opacity để chọn độ mờ cho đường viền và lấp đầy:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Thanh gắn nhãn

Biểu đồ có một số loại nhãn, chẳng hạn như nhãn đánh dấu, nhãn chú giải và nhãn trong chú giải công cụ. Trong phần này, chúng ta sẽ xem cách đặt nhãn bên trong (hoặc gần) thanh trong biểu đồ thanh.

Giả sử chúng tôi muốn chú thích từng thanh bằng ký hiệu hoá học thích hợp. Chúng ta có thể làm việc đó bằng vai trò chú giải:

Trong bảng dữ liệu, chúng ta xác định một cột mới có { role: 'annotation' } để giữ nhãn thanh:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Mặc dù người dùng có thể di chuột qua các thanh để xem giá trị dữ liệu, nhưng bạn cũng nên bao gồm chúng trên thanh đó:

Điều này hơi phức tạp hơn một chút, vì chúng ta tạo một DataView để chỉ định chú thích cho mỗi thanh.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Nếu muốn định dạng giá trị theo cách khác, chúng ta có thể xác định một trình định dạng và gói giá trị đó trong một hàm như sau: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Sau đó, chúng ta có thể gọi bằng calc: getValueAt.bind(undefined, 1).

Nếu nhãn quá lớn không thể vừa toàn bộ bên trong thanh, nhãn sẽ hiển thị bên ngoài:

Biểu đồ thanh xếp chồng

Biểu đồ thanh xếp chồng là biểu đồ thanh cho các giá trị liên quan nằm phía trên nhau. Nếu có giá trị âm, các giá trị này được xếp chồng theo thứ tự đảo ngược bên dưới đường cơ sở trục của biểu đồ. Biểu đồ thanh xếp chồng thường được sử dụng khi một danh mục tự nhiên chia thành các thành phần. Ví dụ: hãy xem xét một số doanh số bán sách giả định, chia theo thể loại và so sánh theo thời gian:

Bạn tạo một biểu đồ thanh xếp chồng bằng cách đặt tùy chọn isStacked thành true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Biểu đồ thanh xếp chồng cũng hỗ trợ xếp chồng 100%, trong đó ngăn xếp các phần tử ở mỗi giá trị miền được điều chỉnh theo tỷ lệ để tổng cộng lên đến 100%. Các tuỳ chọn này là isStacked: 'percent', định dạng mỗi giá trị theo tỷ lệ phần trăm 100% và isStacked: 'relative' để định dạng từng giá trị dưới dạng phân số của 1. Ngoài ra còn có một tuỳ chọn isStacked: 'absolute' có chức năng tương đương với isStacked: true.

Lưu ý trong biểu đồ xếp chồng 100% ở bên phải, các giá trị đánh dấu nhịp độ khung hình dựa trên thang điểm tương đối 0-1 dưới dạng phân số của 1, nhưng giá trị trục được hiển thị dưới dạng phần trăm. Điều này là do việc đánh dấu trục quay theo tỷ lệ phần trăm là kết quả của việc áp dụng định dạng "#.##%" cho các giá trị tỷ lệ tương đối 0-1. Khi sử dụng isStacked: 'percent', hãy nhớ chỉ định kim đánh dấu nhịp độ khung hình bằng cách sử dụng thang đo 0-1 tương đối.

Bị xếp chồng
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
Theo thứ tự xếp chồng 100%
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Tạo biểu đồ thanh Material

Năm 2014, Google công bố các nguyên tắc nhằm hỗ trợ giao diện chung trên các tài sản và ứng dụng (chẳng hạn như ứng dụng Android) chạy trên nền tảng Google. Chúng tôi gọi nỗ lực này là Material Design. Chúng tôi sẽ cung cấp phiên bản "Material" (Tài liệu) của tất cả biểu đồ cốt lõi; chúng tôi hoan nghênh bạn sử dụng các biểu đồ này nếu muốn.

Việc tạo Biểu đồ thanh Material tương tự như quá trình tạo biểu đồ thanh toán "Cổ điển". Bạn tải API Hình ảnh trực quan của Google (mặc dù có gói 'bar' thay vì gói 'corechart'), hãy xác định bảng dữ liệu rồi tạo một đối tượng (nhưng lớp google.charts.Bar thay vì google.visualization.BarChart).

Lưu ý: Biểu đồ Material sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (IE8 và các phiên bản trước đó không hỗ trợ SVG. Biểu đồ này yêu cầu.)

Biểu đồ thanh Material có nhiều điểm cải tiến nhỏ so với Biểu đồ thanh cổ điển, bao gồm bảng màu được cải thiện, góc tròn, định dạng nhãn rõ ràng hơn, khoảng cách mặc định chặt chẽ hơn giữa các loạt video, lưới và tiêu đề mềm mại hơn (và cả phụ đề).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Biểu đồ Material ở phiên bản beta. Giao diện và khả năng tương tác phần lớn là cuối cùng, nhưng nhiều tùy chọn có sẵn trong Biểu đồ cổ điển chưa có sẵn trong các biểu đồ đó. Bạn có thể tìm thấy danh sách các lựa chọn chưa được hỗ trợ trong vấn đề này.

Ngoài ra, cách khai báo các tuỳ chọn chưa được hoàn tất. Vì vậy, nếu đang sử dụng bất kỳ tùy chọn cũ nào, bạn phải chuyển đổi các tùy chọn đó thành các tùy chọn quan trọng bằng cách thay thế dòng này:

chart.draw(data, options);

...bằng cách này:

chart.draw(data, google.charts.Bar.convertOptions(options));

Việc sử dụng google.charts.Bar.convertOptions() cho phép bạn tận dụng một số tính năng, chẳng hạn như các tuỳ chọn đặt trước hAxis/vAxis.format.

Biểu đồ kép X

Lưu ý: Trục X kép chỉ có trong các biểu đồ Material (tức là các biểu đồ có gói bar).

Đôi khi, bạn sẽ muốn hiển thị hai chuỗi trong biểu đồ thanh, với hai trục x độc lập: trục trên cho một chuỗi và trục dưới cho chuỗi khác: