Vẽ 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>

Bước cuối cùng là vẽ biểu đồ. Trước tiên, bạn phải tạo thực thể cho một thực thể của lớp biểu đồ mà bạn muốn sử dụng, sau đó bạn phải gọi draw() trên thực thể đó.

Tạo thực thể cho biểu đồ

Mỗi loại biểu đồ dựa trên một lớp khác nhau, được nêu trong tài liệu về biểu đồ. Ví dụ: biểu đồ hình tròn dựa trên lớp google.visualization.PieChart, biểu đồ thanh dựa trên lớp google.visualization.BarChart, v.v. Cả biểu đồ hình tròn và biểu đồ thanh đều có trong gói biểu đồ cốt lõi mà bạn đã tải ở đầu hướng dẫn này. Tuy nhiên, nếu muốn dùng biểu đồ dạng cây hoặc biểu đồ địa lý trên trang của mình, bạn phải tải thêm các gói "biểu đồ dạng cây" hoặc "bản đồ địa lý".

Hàm khởi tạo biểu đồ của Google lấy một tham số duy nhất: tham chiếu đến phần tử DOM để vẽ hình ảnh trực quan.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Vẽ biểu đồ

Sau khi chuẩn bị dữ liệu và các lựa chọn, bạn có thể vẽ biểu đồ của mình.

Trang của bạn phải có phần tử HTML (thường là <div>) để chứa biểu đồ. Bạn phải truyền tham chiếu đến phần tử này trên biểu đồ, vì vậy, hãy chỉ định cho biểu đồ một mã nhận dạng mà bạn có thể dùng để truy xuất tham chiếu bằng document.getElementById(). Mọi nội dung bên trong phần tử này sẽ được thay thế bằng biểu đồ khi được vẽ. Hãy cân nhắc xem bạn có nên định kích thước rõ ràng cho phần tử <div> này hay không, nhưng hiện tại, hãy chỉ định kích thước biểu đồ trong HTML <div>.

Mỗi biểu đồ đều hỗ trợ một phương thức draw() nhận hai giá trị: một đối tượng DataTable (hoặc DataView) chứa dữ liệu của bạn và một đối tượng tuỳ chọn biểu đồ (không bắt buộc). Đối tượng tuỳ chọn là không bắt buộc và bạn có thể bỏ qua hoặc truyền giá trị rỗng để sử dụng các tuỳ chọn mặc định của biểu đồ.

Sau khi gọi draw(), biểu đồ của bạn sẽ được vẽ trên trang. Bạn nên gọi phương thức draw() mỗi khi thay đổi dữ liệu hoặc các tuỳ chọn và muốn cập nhật biểu đồ.

Phương thức draw() không đồng bộ: tức là phương thức này trả về ngay lập tức, nhưng thực thể mà phương thức này trả về có thể không có sẵn ngay. Trong nhiều trường hợp, điều này không có vấn đề gì; cuối cùng biểu đồ sẽ được vẽ. Tuy nhiên, nếu muốn đặt hoặc truy xuất các giá trị trên biểu đồ sau khi gọi draw(), bạn phải đợi hàm này gửi sự kiện sẵn sàng để cho biết rằng sự kiện đã được điền sẵn. Chúng tôi sẽ đề cập đến cách nghe sự kiện trong trang tiếp theo.

Khắc phục sự cố

Nếu biểu đồ của bạn không vẽ trên trang, thì sau đây là một số phương pháp có thể giúp bạn giải quyết vấn đề:

  • Tìm lỗi chính tả. Hãy nhớ rằng JavaScript là ngôn ngữ phân biệt chữ hoa chữ thường.
    • Sử dụng trình gỡ lỗi JavaScript. Trong Firefox, bạn có thể sử dụng bảng điều khiển JavaScript, Venkman Debugger hoặc tiện ích bổ sung cận thê. Trong Chrome, bạn có thể sử dụng các công cụ cho nhà phát triển (Shift + Ctl + J).
  • Tìm kiếm trong nhóm thảo luận về Google Optimization API (API Trực quan hoá của Google). Nếu bạn không tìm thấy bài đăng nào giải đáp được thắc mắc của mình, hãy đăng câu hỏi lên nhóm kèm theo đường liên kết đến một trang web minh hoạ vấn đề.

 

 

 

Thông tin khác