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

Tạo các loại biểu đồ

Trang này mô tả cách phát triển loại biểu đồ của riêng bạn và cung cấp loại biểu đồ đó cho người dùng.

Thẻ Đối tượng người xem

Trang này giả định rằng bạn đã đọc trang Sử dụng biểu đồ. Hướng dẫn này cũng giả định rằng bạn đã quen thuộc với JavaScript và lập trình hướng đối tượng. Có nhiều hướng dẫn về JavaScript có sẵn trên web.

Tạo biểu đồ

Các biểu đồ được hiển thị với người dùng thông qua thư viện JavaScript mà bạn tạo. Dưới đây là các bước tạo thư viện biểu đồ:

Chọn một không gian tên cho mã của bạn. Các trang khác sẽ lưu trữ mã của bạn; bạn nên cố gắng tránh xung đột khi đặt tên.
Triển khai đối tượng biểu đồ. Triển khai một đối tượng JavaScript cho thấy những nội dung sau:
- Một hàm khởi tạo,
- Phương thức draw() để vẽ đối tượng của bạn bên trong phần tử DOM được chuyển đến hàm khởi tạo,
- Mọi phương thức tiêu chuẩn không bắt buộc khác để ứng dụng sử dụng, chẳng hạn như getSelection() và
- Mọi phương thức tuỳ chỉnh mà bạn muốn hiển thị cho khách hàng của mình.
[Không bắt buộc] Triển khai mọi sự kiện mà bạn muốn kích hoạt để ứng dụng nắm bắt.
Viết tài liệu cho biểu đồ. Nếu bạn không ghi lại video đó, mọi người có thể sẽ không nhúng được tệp đó.
Đăng biểu đồ của bạn trong Thư viện biểu đồ.

Mẹo

Bạn có thể tải các định nghĩa về phương thức và lớp API goog.visualization xuống để bật tính năng tự động hoàn thành trong IDE (trình soạn thảo mã). Tải tệp xuống từ http://www.google.com/uds/modules/gviz/gviz-api.js rồi lưu tệp đó vào dự án của bạn. Hầu hết IDE sẽ tự động lập chỉ mục và bật tính năng tự động hoàn thành, mặc dù IDE của bạn có thể khác. Xin lưu ý rằng không phải lúc nào tệp cũng được cập nhật. Hãy xem các trang tham khảo để biết tài liệu tham khảo API mới nhất.

Chọn một Không gian tên

Biểu đồ của bạn có thể được nhúng trên một trang lưu trữ các biểu đồ khác hoặc JavaScript không liên quan khác. Để tránh xung đột khi đặt tên với mã hoặc tên lớp CSS khác, bạn nên chọn một không gian tên duy nhất cho mã biểu đồ của mình. Một lựa chọn phù hợp cho một không gian tên là URL mà bạn sẽ dùng để lưu trữ tập lệnh của mình (trừ WWW và mọi phần mở rộng). Ví dụ: nếu biểu đồ của bạn sẽ được đăng tại www.example.com, bạn sẽ sử dụng example làm không gian tên duy nhất của mình. Bạn có thể thêm các hậu tố bổ sung, phân tách bằng dấu . Mark, để phân nhóm thêm biểu đồ của bạn (tất cả các biểu đồ của Google đều có không gian tên google.visualization). Hãy sử dụng đối tượng không gian tên của bạn để lưu trữ đối tượng biểu đồ, cũng như bất kỳ biến toàn cục nào mà bạn có thể cần.

Dưới đây là ví dụ về cách tạo đối tượng không gian tên để giữ lớp biểu đồ có tên là MyTable, cũng như bất kỳ biến toàn cục nào cần thiết:

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

Tránh xung đột CSS

Nếu bạn sử dụng CSS, hãy đảm bảo không viết những quy tắc CSS có thể ảnh hưởng đến các biểu đồ khác trên trang. Ví dụ: bạn tuyệt đối không nên sử dụng một quy tắc như td {color: blue;} vì quy tắc này sẽ ảnh hưởng đến mọi phần tử <td> khác trên trang chứ không chỉ trong biểu đồ của bạn. Một cách để khắc phục vấn đề này là đóng toàn bộ biểu đồ trong <div> bằng tên lớp, đồng thời chỉ áp dụng tất cả các quy tắc CSS cho các phần tử là thành phần con của một phần tử có tên lớp đó. Ví dụ: Quy tắc CSS sau đây sẽ chỉ ảnh hưởng đến các phần tử <td> có phần tử có tên lớp "example" là đối tượng cấp trên.

td.example {color: blue;}

Sau đó, bạn có thể gói biểu đồ trong một <div> bằng :

<div class="example">
  ...
</div>

Triển khai biểu đồ

Bạn sẽ cần triển khai biểu đồ dưới dạng một đối tượng JavaScript hiển thị các phương thức tiêu chuẩn được mô tả trong Phần tham khảo. Hai phương thức bắt buộc là hàm khởi tạo và phương thức Draw(). Bạn cũng có thể hiển thị cho người dùng mọi phương thức bổ sung phù hợp với biểu đồ của mình. Chỉ cần nhớ rằng dễ sử dụng hơn là tốt hơn.

Hàm khởi tạo

Biểu đồ của bạn sẽ hiển thị một hàm khởi tạo duy nhất lấy một tham số duy nhất, phần tử DOM mà bạn sẽ vẽ biểu đồ vào đó. Thông thường, các biểu đồ lưu trữ bản sao cục bộ của phần tử này trong hàm khởi tạo để sử dụng sau này:

function example.MyTable(container) {
  this.container = container
}

Phương thức `draw()`

Lớp biểu đồ của bạn phải có một phương thức draw() được xác định trong nguyên mẫu của lớp biểu đồ. Phương thức draw() chấp nhận 2 thông số:

DataTable lưu giữ dữ liệu cần hiển thị.
Bản đồ tuỳ chọn chứa các lựa chọn tên/giá trị cho biểu đồ của bạn. Tên và loại giá trị của các tuỳ chọn là do bạn xác định cho biểu đồ cụ thể của mình. Ví dụ: trong ví dụ về Biểu đồ hình Hello dưới đây, biểu đồ hỗ trợ một tuỳ chọn có tên "showLineNumber" với giá trị thuộc loại Boolean. Bạn nên hỗ trợ giá trị mặc định cho mỗi tuỳ chọn, trong trường hợp người dùng không chuyển giá trị cho một tuỳ chọn cụ thể. Đây là tham số không bắt buộc, vì vậy, bạn cũng nên chuẩn bị để sử dụng tất cả các giá trị mặc định nếu người dùng không truyền tham số này (thông tin khác).

example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

Xin chào Biểu đồ!

Dưới đây là một biểu đồ đơn giản hiển thị dữ liệu DataTable dưới dạng bảng HTML:

Và đây là mã triển khai:

// Declare a unique namespace.
var example = {};

// Class constructor. Parameter container is a DOM elementon the client that
// that will contain the chart.
example.MyTable = function(container) {
  this.containerElement = container;
}

// Main drawing logic.
// Parameters:
//   data is data to display, type google.visualization.DataTable.
//   options is a name/value map of options. Our example takes one option.
example.MyTable.prototype.draw = function(data, options) {

  // Create an HTML table
  var showLineNumber = options.showLineNumber; // Boolean configuration option.

  var html = [];
  html.push('<table border="1">');

  // Header row
  html.push('<tr>');
  if (showLineNumber) {
    html.push('<th>Seq</th>');
  }
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
  }
  html.push('</tr>');

  for (var row = 0; row < data.getNumberOfRows(); row++) {
    html.push('<tr>');
    if (showLineNumber) {
      html.push('<td align="right">', (row + 1), '</td>');
    }

    for (var col = 0; col < data.getNumberOfColumns(); col++) {
      html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
      html.push(this.escapeHtml(data.getFormattedValue(row, col)));
      html.push('</td>');
    }
    html.push('</tr>');
  }
  html.push('</table>');

  this.containerElement.innerHTML = html.join('');
}

// Utility function to escape HTML special characters
example.MyTable.prototype.escapeHtml = function(text) {
  if (text == null)
    return '';
  return text.replace(/&/g, '&').replace(/</g, '<')
      .replace(/>/g, '>').replace(/"/g, '"');
}

Bao gồm biểu đồ của bạn trong một trang web

Để sử dụng biểu đồ trước đó, hãy lưu biểu đồ trong tệp .js có thể truy cập từ trình duyệt của bạn. Sau đó, lưu mã sau, thay đổi tham số nguồn <script> để trỏ đến tệp JavaScript của bạn:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="mytablevis.js"></script>
    <script type="text/javascript">
      google.charts.load("current");

      // Set callback to run when API is loaded
      google.charts.setOnLoadCallback(drawVisualization);

      // Called when the Chart API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Daily Hours');
        data.addRows(5);
        data.setCell(0, 0, 'Work');
        data.setCell(0, 1, 11);
        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new example.MyTable(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {showLineNumber: true});
       }
   </script>
  <title>MyTable example page</title></head>
  <body>
    <div id="mydiv"></div>
    <p>This page demonstrates hosting a table visualization.</p>
  </body>
</html>

Triển khai sự kiện

Nếu muốn biểu đồ của mình kích hoạt các sự kiện hữu ích (ví dụ: sự kiện bộ tính giờ hoặc sự kiện do người dùng khởi tạo, chẳng hạn như lượt nhấp), bạn cần gọi hàm google.visualization.events.trigger kèm theo thông tin chi tiết của sự kiện (tên, thuộc tính cần gửi, v.v.). Bạn có thể tìm thấy thông tin chi tiết trên trang Sự kiện. Bạn có thể hiển thị thông tin chi tiết về sự kiện cho ứng dụng khách bằng cách thêm thuộc tính vào đối tượng sự kiện hoặc bạn có thể hiển thị phương thức get...() thuộc một số loại trên biểu đồ và ứng dụng có thể gọi phương thức đó để lấy thông tin chi tiết về sự kiện. Trong cả hai trường hợp, hãy ghi lại kỹ các phương thức hoặc thuộc tính sự kiện.

Tài liệu hoá biểu đồ của bạn

Nếu bạn không ghi chép chính xác biểu đồ của mình, có thể bạn sẽ không có nhiều người dùng. Hãy nhớ ghi nhận những tài liệu sau đây:

Mô tả tất cả các phương thức mà bạn hỗ trợ. Phương thức draw() áp dụng chung cho tất cả các biểu đồ, nhưng mỗi biểu đồ có thể hỗ trợ các phương thức khác. (Có thể bạn không cần ghi lại hàm khởi tạo của mình, trừ phi hàm khởi tạo đó có hành vi không theo chuẩn.) Bạn có thể tìm thấy danh sách các phương thức dự kiến trên Trang tham khảo.
Mô tả tất cả các tuỳ chọn mà phương thức draw() của bạn hỗ trợ. Thông tin này bao gồm tên của từng tuỳ chọn, loại giá trị dự kiến và giá trị mặc định của tuỳ chọn đó.
Mô tả tất cả các sự kiện mà bạn kích hoạt. Đây là tên và thuộc tính của từng sự kiện, cũng như thời điểm mỗi sự kiện được kích hoạt.
Liệt kê URL của thư viện biểu đồ sẽ được dùng trong câu lệnh <script> của ứng dụng và cung cấp URL cho tài liệu của bạn.
Nhập tên đủ điều kiện cho biểu đồ của bạn.
Tạo các trang mẫu minh hoạ cách sử dụng biểu đồ cùng với các tuỳ chọn mà biểu đồ hỗ trợ, các sự kiện và phương thức tuỳ chỉnh của biểu đồ đó.
Mô tả rõ ràng chính sách về dữ liệu của biểu đồ. Hầu hết biểu đồ xử lý dữ liệu trong trình duyệt, nhưng một số biểu đồ có thể gửi dữ liệu đến máy chủ, chẳng hạn để tạo hình ảnh của biểu đồ hoặc bản đồ. Nếu bạn gửi dữ liệu đến máy chủ:
- Xác định rõ dữ liệu nào sẽ được gửi.
- Lưu ý khoảng thời gian dữ liệu được lưu trên máy chủ.
- Ghi lại những thực thể sẽ có quyền truy cập vào dữ liệu này. Ví dụ: Công ty XYZ, v.v.
- Chỉ định liệu dữ liệu có được ghi lại hay không và trong bao lâu.

Tài liệu của bạn sẽ được lưu trữ ở cùng một nơi với mã biểu đồ (xem phần Gửi biểu đồ của bạn vào thư viện bên dưới).

Gửi biểu đồ của bạn đến Thư viện

Sau khi bạn viết biểu đồ, hãy gửi biểu đồ đó để đăng trong mục "Biểu đồ bổ sung" của thư viện của chúng tôi. Nếu gửi biểu đồ, bạn sẽ phải ký một thoả thuận với chúng tôi, trong đó đồng ý không tạo phần mềm độc hại hoặc sử dụng dữ liệu người dùng sai mục đích. Thư viện này chỉ là danh sách con trỏ đến các biểu đồ mà chúng tôi đã tạo hoặc chúng tôi đã xem xét; bạn có thể chọn lưu trữ thư viện và tài liệu JavaScript thực tế trên trang web của mình hoặc bạn có thể để Google lưu trữ thư viện và tài liệu cho bạn. Hãy chỉ định xem bạn có muốn chúng tôi lưu trữ biểu đồ của bạn khi bạn đăng biểu đồ lên thư viện hay không.

Khắc phục sự cố

Nếu mã của bạn có vẻ như không hoạt động, 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 tinh mọt. Trên IE, bạn có thể sử dụng Trình gỡ lỗi Microsoft Script.
Tìm kiếm nhóm thảo luận về API Google Biểu đồ. Nếu bạn không tìm thấy bài đăng nào giải đáp 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 trang web minh hoạ vấn đề.

Bản địa hoá

Nếu muốn biểu đồ của bạn sẽ được người dùng ở nhiều quốc gia sử dụng, thì bạn nên thiết kế biểu đồ để bản địa hoá cho các ngôn ngữ và văn hoá khác nhau. Cách bản địa hoá cơ bản nhất là dịch các chuỗi văn bản chuẩn trong giao diện người dùng theo các chế độ cài đặt trình duyệt của người dùng. Một hình thức bản địa hoá nâng cao hơn là thay đổi định dạng số tuỳ thuộc vào nội dung bản địa hoá, hoặc thậm chí có thể là thiết kế giao diện người dùng. Nếu bạn quyết định bản địa hoá biểu đồ, hãy liệt kê các ngôn ngữ mà biểu đồ hỗ trợ trong tài liệu của bạn và cung cấp chế độ cài đặt mặc định cho ngôn ngữ thường dùng. Bạn cũng nên thêm nút "thay đổi ngôn ngữ" vào giao diện người dùng của biểu đồ phòng trường hợp bạn dùng sai ngôn ngữ. Cách phổ biến để phát hiện ngôn ngữ trình duyệt là xem tiêu đề HTML Accept-Language.