Trang này được dịch bởi Cloud Translation API.

Tải thư viện

Trang này trình bày cách tải các thư viện của Google Chart.

Tải thư viện cơ bản

Trừ một vài trường hợp ngoại lệ, tất cả các trang web có Google Biểu đồ phải bao gồm các dòng sau trong <head> của trang web:

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

Dòng đầu tiên của ví dụ này tải chính trình tải. Bạn chỉ có thể tải trình tải một lần bất kể bạn định vẽ bao nhiêu biểu đồ. Sau khi tải trình tải, bạn có thể gọi hàm google.charts.load một hoặc nhiều lần để tải gói cho các loại biểu đồ cụ thể.

Đối số đầu tiên của google.charts.load là số hoặc tên phiên bản, dưới dạng một chuỗi. Nếu bạn chỉ định 'current', thì bản phát hành chính thức mới nhất của Google Biểu đồ sẽ được tải. Nếu bạn muốn dùng thử đề xuất cho bản phát hành tiếp theo, hãy sử dụng 'upcoming'. Nhìn chung, sẽ có rất ít khác biệt giữa 2 và 2 hình thức này hoàn toàn giống nhau, trừ phi có bản phát hành mới đang được triển khai. Một lý do phổ biến để sử dụng upcoming là bạn muốn kiểm thử một loại biểu đồ hoặc tính năng mới mà Google sắp phát hành trong một hoặc hai tháng tới. (Chúng tôi sẽ công bố các bản phát hành sắp tới trên diễn đàn và bạn nên dùng thử khi có thông báo để đảm bảo mọi thay đổi đối với biểu đồ của bạn đều được chấp nhận.)

Ví dụ ở trên giả định bạn muốn hiển thị một corechart (thanh, cột, đường, vùng, vùng chia bậc, bong bóng, hình bánh, bánh vòng, kết hợp, hình nến, biểu đồ, tán xạ). Nếu bạn muốn có loại biểu đồ khác hoặc bổ sung, hãy thay thế hoặc thêm tên gói thích hợp cho corechart ở trên (ví dụ: {packages: ['corechart', 'table', 'sankey']}. Bạn có thể tìm thấy tên gói trong phần "Đang tải" của trang tài liệu của từng biểu đồ.

Ví dụ này cũng giả định rằng bạn có một hàm JavaScript có tên là drawChart được xác định ở đâu đó trong trang web của bạn. Bạn có thể tuỳ ý đặt tên cho hàm đó, nhưng hãy đảm bảo rằng hàm đó là duy nhất trên toàn hệ thống và được xác định trước khi bạn tham chiếu đến hàm đó trong lệnh gọi đến google.charts.setOnLoadCallback.

Lưu ý: Các phiên bản trước của Google Biểu đồ đã sử dụng mã khác với các phiên bản trên để tải thư viện. Để cập nhật các biểu đồ hiện có nhằm sử dụng mã mới, hãy xem phần Cập nhật mã trình tải thư viện.

Dưới đây là một ví dụ hoàn chỉnh về cách vẽ biểu đồ hình tròn bằng kỹ thuật tải cơ bản:

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

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

Thông tin về quá trình tải

Trước tiên, bạn phải tải chính trình tải này. Việc này được thực hiện trong một thẻ script riêng biệt có src="https://www.gstatic.com/charts/loader.js". Thẻ này có thể nằm trong head hoặc body của tài liệu, hoặc được chèn linh động vào tài liệu trong khi đang tải hoặc sau khi tải xong.

<script src="https://www.gstatic.com/charts/loader.js"></script>

Sau khi trình tải được tải, bạn có thể gọi google.charts.load. Vị trí bạn gọi lệnh này có thể nằm trong thẻ script trong head hoặc body của tài liệu. Bạn có thể gọi lệnh này khi tài liệu vẫn đang tải hoặc bất cứ lúc nào sau khi tải xong.

Kể từ phiên bản 45, bạn có thể gọi google.charts.load nhiều lần để tải các gói bổ sung. Tuy nhiên, cách này sẽ an toàn hơn nếu bạn có thể tránh thực hiện việc này. Bạn phải cung cấp cùng một số phiên bản và chế độ cài đặt ngôn ngữ cho mỗi lần tải.

Hiện bạn có thể sử dụng tham số URL JSAPI autoload cũ, nhưng giá trị của tham số này phải sử dụng định dạng JSON và mã hoá URL nghiêm ngặt. Trong JavaScript, bạn có thể mã hoá jsonObject bằng mã sau: encodeURIComponent(JSON.stringify(jsonObject)).

Hạn chế

Nếu đang sử dụng các phiên bản trước phiên bản 45, bạn sẽ có một vài giới hạn nhỏ nhưng quan trọng với cách tải Google Biểu đồ:

Bạn chỉ có thể gọi google.charts.load một lần. Tuy nhiên, bạn có thể liệt kê tất cả các gói mình cần trong một lệnh gọi, vì vậy, bạn không cần thực hiện các lệnh gọi riêng.
Nếu đang sử dụng ChartWrapper, bạn phải tải rõ ràng tất cả các gói mình cần, thay vì dựa vào ChartWrapper để tự động tải các gói đó cho bạn.
Đối với Geochart và Map Chart, bạn phải tải cả trình tải thư viện cũ và trình tải thư viện mới. Xin nhắc lại rằng thao tác này chỉ áp dụng cho các phiên bản trước phiên bản 45. Bạn không nên thực hiện thao tác này cho các phiên bản sau này.
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

Tải số hoặc tên phiên bản

Đối số đầu tiên của lệnh gọi google.charts.load là tên hoặc số phiên bản. Chỉ có hai tên phiên bản đặc biệt tại thời điểm này và một vài phiên bản bị treo.

hồ sơ thanh toán: Đây là phiên bản dành cho bản phát hành chính thức mới nhất. Bản phát hành này sẽ thay đổi mỗi khi chúng tôi ra mắt một bản phát hành mới. Lý tưởng là phiên bản này đã được kiểm thử tốt và không có lỗi, nhưng bạn nên chỉ định một phiên bản bị treo cụ thể khi đã hài lòng rằng phiên bản đó đang hoạt động.
sắp tới: Đây là bản phát hành tiếp theo trong quá trình thử nghiệm và trước khi trở thành bản phát hành chính thức. Vui lòng kiểm thử phiên bản này thường xuyên để biết sớm nhất có thể xem có vấn đề nào cần được giải quyết trước khi phiên bản này được phát hành chính thức hay không.

Khi chúng tôi phát hành các phiên bản mới của Google Biểu đồ, một số thay đổi lớn chẳng hạn như các loại biểu đồ hoàn toàn mới. Những thay đổi khác rất nhỏ, chẳng hạn như việc cải thiện giao diện hoặc hành vi của biểu đồ hiện có.

Nhiều người tạo Biểu đồ trên Google tinh chỉnh giao diện của biểu đồ cho đến khi đó là chính xác những gì họ muốn. Một số người sáng tạo có thể cảm thấy thoải mái hơn khi biết rằng biểu đồ của họ sẽ không bao giờ thay đổi, bất kể chúng tôi có cải thiện gì trong tương lai. Đối với những người dùng đó, chúng tôi hỗ trợ Google Biểu đồ đã được cố định.

Các phiên bản biểu đồ đóng băng được xác định theo số và được mô tả trong Bản phát hành chính thức của chúng tôi. Để tải một phiên bản bị treo, hãy thay thế current hoặc upcoming trong lệnh gọi google.charts.load bằng số phiên bản bị treo:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

Chúng tôi dự kiến rằng các phiên bản bị treo sẽ được sử dụng vô thời hạn, mặc dù chúng tôi có thể cho ngừng các phiên bản bị treo do vấn đề bảo mật. Thông thường, chúng tôi sẽ không hỗ trợ các phiên bản bị treo, ngoại trừ việc đề xuất bạn nâng cấp lên một phiên bản mới hơn.

Tải cài đặt

Tham số thứ hai trong lệnh gọi của google.charts.load là một đối tượng để chỉ định các chế độ cài đặt. Các thuộc tính sau được hỗ trợ cho chế độ cài đặt.

gói hàng

Một mảng gồm 0 hoặc nhiều gói. Mỗi gói được tải sẽ có mã cần thiết để hỗ trợ một tập hợp chức năng, thường là một loại biểu đồ. (Các gói) bạn cần tải được liệt kê trong tài liệu cho từng loại biểu đồ. Bạn có thể tránh chỉ định bất kỳ gói nào nếu sử dụng ChartWrapper để tự động tải những gói cần thiết.

language

Mã cho ngôn ngữ hoặc khu vực dùng để tuỳ chỉnh văn bản có thể là một phần của biểu đồ. Xem phần Ngôn ngữ để biết thêm chi tiết.

số gọi lại

Một hàm sẽ được gọi sau khi gói được tải. Ngoài ra, bạn có thể chỉ định hàm này bằng cách gọi google.charts.setOnLoadCallback như minh hoạ trong ví dụ trên. Hãy xem phần Callback để biết thêm thông tin chi tiết.

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

mapsApiKey

(v45) Chế độ cài đặt này cho phép bạn chỉ định khoá mà bạn có thể sử dụng với Geochart và Biểu đồ bản đồ. Bạn nên thực hiện việc này thay vì sử dụng hành vi mặc định, do đó đôi khi có thể khiến người dùng bị điều tiết dịch vụ. Tìm hiểu cách thiết lập khoá của riêng bạn để sử dụng dịch vụ "API JavaScript của Google Maps" tại đây: Lấy khoá/Xác thực. Mã của bạn sẽ có dạng như sau:

  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

safeMode

(v47) Khi bạn đặt thành true, tất cả các biểu đồ và chú thích tạo HTML từ dữ liệu do người dùng cung cấp sẽ dọn dẹp dữ liệu bằng cách loại bỏ các phần tử và thuộc tính không an toàn. Ngoài ra (phiên bản 49 trở lên), bạn có thể tải thư viện ở chế độ an toàn bằng cách sử dụng lối tắt chấp nhận cùng một chế độ cài đặt tải, nhưng luôn tải phiên bản "hiện tại":

  google.charts.safeLoad({ packages: ['corechart'] });

Ngôn ngữ

Ngôn ngữ được dùng để tuỳ chỉnh văn bản cho một quốc gia hoặc ngôn ngữ. Điều này ảnh hưởng đến việc định dạng các giá trị như đơn vị tiền tệ, ngày và số.

Theo mặc định, Google Biểu đồ được tải bằng ngôn ngữ "en". Bạn có thể ghi đè giá trị mặc định này bằng cách chỉ định rõ một ngôn ngữ trong phần cài đặt tải.

Để tải biểu đồ được định dạng cho một ngôn ngữ cụ thể, hãy sử dụng chế độ cài đặt language như sau:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

Truy cập đường liên kết này để xem ví dụ trực tiếp.

Số nhận cuộc gọi lại

Trước khi có thể sử dụng bất kỳ gói nào do google.charts.load tải, bạn phải đợi quá trình tải hoàn tất. Việc chỉ đợi tài liệu tải xong là chưa đủ. Vì có thể mất chút thời gian trước khi quá trình tải này hoàn tất, nên bạn cần đăng ký hàm callback. Có ba cách để thực hiện việc này. Chỉ định chế độ cài đặt callback trong lệnh gọi google.charts.load hoặc gọi setOnLoadCallback, truyền một hàm làm đối số, hoặc sử dụng Lời hứa được lệnh gọi google.charts.load trả về.

Xin lưu ý rằng đối với tất cả các cách này, bạn cần cung cấp định nghĩa hàm, thay vì gọi hàm. Định nghĩa hàm mà bạn cung cấp có thể là một hàm được đặt tên (nên bạn chỉ cần đặt tên) hoặc một hàm ẩn danh. Khi các gói tải xong, hàm callback này sẽ được gọi mà không có đối số. Trình tải cũng sẽ đợi tài liệu tải xong trước khi gọi lệnh gọi lại.

Nếu muốn vẽ nhiều biểu đồ, bạn có thể đăng ký nhiều hàm callback bằng cách sử dụng setOnLoadCallback hoặc có thể kết hợp các hàm đó thành một hàm. Tìm hiểu thêm về cách Vẽ nhiều biểu đồ trên một trang.

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

Gọi lại qua Promise

Một cách khác để đăng ký lệnh gọi lại là sử dụng Lời hứa được trả về từ lệnh gọi google.charts.load. Bạn có thể thực hiện việc này bằng cách thêm một lệnh gọi vào phương thức then() với mã có dạng như sau.

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

Một lợi ích của việc sử dụng Promise là bạn có thể dễ dàng vẽ thêm nhiều biểu đồ chỉ bằng cách tạo chuỗi nhiều lệnh gọi .then(anotherFunction) hơn. Việc sử dụng Promise cũng liên kết lệnh gọi lại với các gói cụ thể cần thiết cho lệnh gọi lại đó. Điều này rất quan trọng nếu bạn muốn tải thêm gói bằng một lệnh gọi khác của google.charts.load().

Cập nhật mã trình tải thư viện

Các phiên bản trước của Google Biểu đồ đã sử dụng mã khác để tải thư viện. Bảng dưới đây cho thấy mã trình tải thư viện cũ so với thư viện mới.

Mã trình tải thư viện cũ
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); </script>
Mã trình tải thư viện mới
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

Mã trình tải thư viện cũ

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>

Mã trình tải thư viện mới

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

Để cập nhật các biểu đồ hiện có của mình, bạn có thể thay thế mã trình tải thư viện cũ bằng mã mới. Tuy nhiên, hãy lưu ý các giới hạn về việc tải thư viện được mô tả ở trên.

Tiếp theo: Chuẩn bị dữ liệu