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 lựa 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.v. Mặc dù nhóm Công cụ biểu đồ đã làm việc tích cực để giao diện biểu đồ mặc định, bạn có thể muốn tuỳ chỉnh biểu đồ của mình, ví dụ như để thêm nhãn tiêu đề hoặc nhãn 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 có các thuộc tính option_name/option_value. Sử dụng các tên lựa chọn được liệt kê trong tài liệu về biểu đồ. Tài liệu của mỗi biểu đồ liệt kê một tập hợp các tuỳ chọn có thể tuỳ chỉnh. Ví dụ: các tuỳ chọn có sẵn cho Biểu đồ hình tròn bao gồm "huyền thoại", "tiêu đề" và "is3D". Tất cả các lựa chọn đều có 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à tuỳ 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
}

Cập nhật các giá trị này cho đối tượng tuỳ chọn trong ví dụ ở trên để xem mức độ ảnh hưởng của các giá trị đó đến biểu đồ.

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

Một tuỳ chọn rất phổ biế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 đồ ở hai vị trí: trong HTML của phần tử vùng chứa <div> hoặc trong các tuỳ chọn biểu đồ. Nếu bạn chỉ định kích thước ở cả hai vị trí thì 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 một tuỳ chọn, biểu đồ có thể không được hiển thị chính xác.

Việc chỉ định kích thước ở một hoặc nơi khác có lợi thế:

  • Chỉ định kích thước trong HTML – Có thể mất vài giây để tải và hiển thị một biểu đồ. Nếu vùng chứa biểu đồ đã được định kích thước trong HTML, thì bố cục trang sẽ không thay đổ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 cũng như đổi kích thước biểu đồ một cách nhất quán.

 

Thông tin khác