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 bản sao lớp bản đồ mà bạn muốn sử dụng, sau đó bạn phải gọi draw() trên bản sao đó.

Tạo bản sao biểu đồ của bạn

Mỗi loại biểu đồ dựa trên một loại khác nhau, được liệt kê trong tài liệu của 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 coreChart mà bạn tải ở đầu hướng dẫn này. Tuy nhiên, nếu muốn có bản đồ 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 'sơ đồ cây' hoặc 'bản đồ địa lý'.

Các hàm 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ó một phần tử HTML (thường là <div>) để lưu giữ biểu đồ của bạn. Bạn phải chuyển biểu đồ của mình tham chiếu đến phần tử này, vì vậy hãy chỉ định cho ID đó một mã mà bạn có thể sử dụng để truy xuất tệp 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 vẽ. Hãy cân nhắc xem có nên định kích thước rõ ràng cho <div> phần tử 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 đồ hỗ trợ một phương thức draw() nhận hai giá trị: đối tượng DataTable (hoặc DataView) chứa dữ liệu của bạn và đối tượng tuỳ chọn biểu đồ (không bắt buộc). Đối tượng tùy chọn là không bắt buộc và bạn có thể bỏ qua hoặc chuyển giá trị rỗng vào để sử dụng các tùy chọn mặc định của biểu đồ.

Sau khi bạn 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ộ: nghĩa là phương thức này trả về ngay lập tức, nhưng trường hợp 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ì vì 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 sự kiện đó gửi sự kiện sẵn sàng, cho biết sự kiện đó được điền sẵn. Chúng ta sẽ đề cập đến việc nghe các sự kiện trong trang tiếp theo.

Khắc phục sự cố

Nếu biểu đồ của bạn không xuất hiện 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ữ có 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, Trình gỡ lỗi Venkman hoặc tiện ích bổ sung Trekker. 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 nhóm thảo luận về API Google Visual. Nếu bạn không tìm thấy bài đăng nào trả lời câu hỏi của mình, hãy đăng câu hỏi lên nhóm cùng với một đường liên kết đến một trang web có vấn đề.

 

 

 

Thông tin khác