Tùy chỉnh biểu đồ

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

          // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Chỉ định các tùy chọn

Mỗi biểu đồ có nhiều tuỳ chọn có thể tuỳ chỉnh, bao gồm tiêu đề, màu sắc, độ dày của đường, màu nền và nhiều lựa chọn khác. Mặc dù nhóm Công cụ biểu đồ đã nỗ lực để cải thiện giao diện biểu đồ mặc định, nhưng bạn có thể muốn tùy chỉnh biểu đồ của mình, ví dụ như thêm nhãn tiêu đề hoặc trục.

Chỉ định các tùy chọn tùy chỉnh cho biểu đồ của bạn bằng cách xác định đối tượng JavaScript bằng các thuộc tính option_name/option_value. Hãy sử dụng tên tuỳ chọn nêu trong tài liệu về biểu đồ. Mỗi tài liệu của biểu đồ liệt kê một tập hợp các tùy chọn có thể tùy chỉnh. Ví dụ: các tuỳ chọn có sẵn trong Biểu đồ hình tròn bao gồm "legend", "title" và "is3D". Tất cả các tùy chọn đều có một giá trị mặc định được ghi lại.

Đối tượng sau đây xác định vị trí chú giải, tiêu đề biểu đồ, kích thước biểu đồ và tùy chọn 3D cho biểu đồ hình tròn:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Hãy cập nhật các giá trị này cho đối tượng tuỳ chọn trong những ví dụ trên để xem chúng ảnh hưởng như thế nào đến biểu đồ.

Chỉ định kích thước biểu đồ

Một lựa chọn rất phổ biến cần đặt là chiều cao và chiều rộng của biểu đồ. Bạn có thể chỉ định kích thước biểu đồ ở 2 vị trí: trong HTML của phần tử vùng chứa <div> hoặc trong tùy chọn biểu đồ. Nếu bạn chỉ định kích thước ở cả hai nơi, biểu đồ thường sẽ tuân theo kích thước được chỉ định trong HTML. Nếu bạn không chỉ định kích thước biểu đồ trong HTML hoặc dưới dạng tùy chọn, thì biểu đồ có thể không được hiển thị chính xác.

Có một số ưu điểm khi chỉ định kích thước ở vị trí này hoặc vị trí khác:

  • Chỉ định kích thước trong HTML – Một biểu đồ có thể mất vài giây để tải và hiển thị. Nếu vùng chứa biểu đồ đã có kích thước trong HTML, thì bố cục trang sẽ không chuyển đổi khi biểu đồ được tải.
  • Chỉ định kích thước dưới dạng tuỳ chọn biểu đồ – Nếu kích thước biểu đồ nằm trong JavaScript, bạn có thể sao chép và dán hoặc chuyển đổi tuần tự, lưu và khôi phục JavaScript và đổi kích thước biểu đồ một cách nhất quán.

 

Thông tin khác