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

Tạo 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 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 đồ. Nó 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 trên web.

Tạo biểu đồ

Người dùng sẽ thấy các biểu đồ 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 vùng chứa tên cho mã. 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 tên.
Triển khai đối tượng trong biểu đồ. Triển khai một đối tượng JavaScript để hiển thị các nội dung sau:
- 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 truyền đến hàm khởi tạo,
- Bất kỳ phương thức chuẩn nào khác (không bắt buộ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.
[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 đồ của bạn. Nếu bạn không ghi chép lại, có thể mọi người sẽ không nhúng được nội dung đó.
Đăng biểu đồ của bạn trong Thư viện biểu đồ.

Thông tin hữu ích

Bạn có thể tải các định nghĩa về lớp và phương thức của API goog.visualization để 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 và lưu tệp vào dự án. Hầu hết các IDE sẽ tự động lập chỉ mục và cho phép tự động hoàn thành, mặc dù IDE có thể khác nhau. Xin lưu ý rằng tệp này không phải lúc nào cũng cập nhật. Hãy xem các trang tham chiếu để biết thông tin tham khảo mới nhất về API.

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

Bạn có thể nhúng biểu đồ trên một trang lưu trữ các biểu đồ khác hoặc các JavaScript khác không liên quan. Để tránh việc đặt tên xung đột với các mã khác hoặc tên lớp CSS, bạn nên chọn một vùng chứa tên duy nhất cho mã biểu đồ của mình. Một lựa chọn phù hợp cho không gian tên là URL mà bạn sẽ dùng để lưu trữ tập lệnh (trừ WWW và mọi tiện ích). 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 vùng chứa tên duy nhất. Bạn có thể thêm hậu tố bổ sung, phân tách bằng dấu . để nhóm các biểu đồ lại với nhau (tất 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 để lưu trữ đối tượng biểu đồ, cũng như mọi biến toàn cục mà bạn có thể cần.

Dưới đây là ví dụ về cách tạo đối tượng vùng chứa tên để giữ một lớp biểu đồ có tên là MyTable, cũng như mọi biến toàn cục 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 các quy tắc CSS có thể ảnh hưởng đến các biểu đồ khác trên trang. Ví dụ: bạn không nên dùng 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, không chỉ trong biểu đồ của bạn. Có một cách để khắc phục điều này là đính kèm toàn bộ biểu đồ trong <div> với tên lớp và đảm bảo tất cả các quy tắc CSS chỉ áp dụng cho các phần tử là phần tử con của phần tử có tên lớp đó. Ví dụ: quy tắc CSS sau đây sẽ chỉ ảnh hưởng đến phần tử <td> có phần tử có tên lớp là "example" làm đối tượng cấp trên.

td.example {color: blue;}

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

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

Triển khai biểu đồ

Bạn cần triển khai biểu đồ của mình 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 Mục tham chiếu. 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 bạn. Hãy nhớ là càng dễ sử dụng càng tốt.

Hàm khởi tạo

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

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 hai tham số:

Một DataTable chứa dữ liệu cần hiển thị.
Một bản đồ tùy chọn về các tùy chọn tên/giá trị cho biểu đồ của bạn. Tên và loại giá trị của các lựa chọn do bạn xác định cho biểu đồ cụ thể của mình. Ví dụ: trong ví dụ về Biểu đồ Xin chào bên dưới, biểu đồ hỗ trợ một tuỳ chọn có tên "showLineNumber" với một giá trị thuộc loại Boolean. Bạn nên hỗ trợ giá trị mặc định cho mỗi tùy chọn, trong trường hợp người dùng không chuyển giá trị cho một tùy chọn cụ thể. Tham số này 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êm thông tin).

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

Xin chào!

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à sau đâ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 đồ trong một trang web

Để sử dụng biểu đồ trước, hãy lưu biểu đồ này trong tệp .js có thể truy cập từ trình duyệt của bạn. Sau đó, hãy lưu đoạn 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 của bạn

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

Tài liệu Biểu đồ của bạn

Nếu không ghi lại đúng biểu đồ của mình, bạn có thể sẽ không nhận được nhiều người dùng. Nhớ ghi lại các tài liệu sau:

Mô tả tất cả các phương thức bạn hỗ trợ. Phương thức draw() là phổ biến đối với tất cả biểu đồ, nhưng mỗi biểu đồ có thể hỗ trợ các phương thức bổ sung riêng. (Bạn có thể không cần ghi lại hàm khởi tạo, trừ phi hàm đó có hành vi không 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ả tuỳ chọn mà phương thức draw() hỗ trợ. Thông tin này bao gồm tên của từng tùy chọn, loại giá trị dự kiến và giá trị mặc định của tùy chọn đó.
Mô tả tất cả sự kiện mà bạn kích hoạt. Điều này có nghĩa là tên và thuộc tính của từng sự kiện và 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 sử dụng trong câu lệnh <script> của ứng dụng khách và cung cấp URL cho tài liệu của bạn.
Đặt 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ủa bạn với các tuỳ chọn mà biểu đồ hỗ trợ, sự kiện và phương thức tuỳ chỉnh.
Mô tả rõ ràng chính sách dữ liệu của biểu đồ. Hầu hết các biểu đồ đề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 như để tạo hình ảnh của biểu đồ hoặc bản đồ. Nếu bạn gửi dữ liệu đến một máy chủ:
- Xác định rõ dữ liệu nào sẽ được gửi.
- Ghi lại thời gian dữ liệu sẽ đượ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. Ví dụ: Công ty XYZ, v.v.
- Chỉ định xem dữ liệu sẽ được ghi nhật ký và trong bao lâu.

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

Gửi biểu đồ cho Thư viện

Sau khi viết xong biểu đồ, hãy gửi biểu đồ đó để đăng trong phần "Biểu đồ bổ sung" thuộc thư viện của chúng tôi. Việc gửi biểu đồ có nghĩa là bạn sẽ phải ký thoả thuận với chúng tôi đồ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 các con trỏ đến 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 thực tế về JavaScript trên trang web của mình hoặc có thể để Google lưu trữ thư viện và tài liệu cho bạn. 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ẻ không hoạt động, 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 Ireland, 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 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 đề.

Bản địa hoá

Nếu dự kiến người dùng ở nhiều quốc gia sẽ dùng biểu đồ của mình, bạn nên thiết kế biểu đồ đó để bản địa hoá theo ngôn ngữ và nền văn hoá khác nhau. Bản địa hoá cơ bản nhất là dịch chuỗi văn bản chuẩn trong giao diện người dùng theo chế độ cài đặt của trình duyệt của người dùng. Một phương thức bản địa hoá nâng cao hơn là thay đổi các định dạng số tuỳ thuộc vào bản địa hoá, hoặc thậm chí 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 đưa nút "thay đổi ngôn ngữ" vào giao diện người dùng của biểu đồ, trong trường hợp bạn nhầm ngôn ngữ. Một cách phổ biến để phát hiện ngôn ngữ của trình duyệt là xem tiêu đề HTML Chấp nhận theo ngôn ngữ.