DataTables và DataView

Trang này thảo luận về cách trình bày dữ liệu nội bộ mà biểu đồ sử dụng, các lớp DataTable và DataView dùng để truyền dữ liệu vào biểu đồ cũng như các cách tạo thực thể và điền sẵn DataTable.

Nội dung

1. Cách trình bày dữ liệu trong biểu đồ
2. Biểu đồ của tôi sử dụng giản đồ bảng nào?
3. DataTables và DataView
4. Tạo và điền sẵn DataTable
   1. Tạo một DataTable mới, sau đó gọi addColumn()/addRows()/addRow()/setCell()
   2. arrayToDataTable()
   3. Trình khởi chạy giá trị cố định JavaScript
   4. Gửi truy vấn nguồn dữ liệu
5. dataTableToCsv()
6. Thông tin khác

Cách trình bày dữ liệu trong biểu đồ

Tất cả biểu đồ đều lưu trữ dữ liệu trong một bảng. Dưới đây là bản trình bày được đơn giản hoá về bảng dữ liệu hai cột được điền sẵn:

chỉ mục: 0 loại: chuỗi nhãn: "Việc cần làm"	chỉ mục: 1 loại: số nhãn: "Số giờ mỗi ngày"
"Nơi làm việc"	11
"Ăn"	2
"Đường đi làm"	2
"Xem TV"	2
"Ngủ"	7

Dữ liệu được lưu trữ trong các ô được tham chiếu dưới dạng (hàng, cột), trong đó hàng là chỉ mục hàng dựa trên giá trị 0 và cột là chỉ mục cột dựa trên số 0 hoặc mã nhận dạng duy nhất mà bạn có thể chỉ định.

Dưới đây là danh sách đầy đủ hơn về các phần tử và thuộc tính được hỗ trợ của bảng; hãy xem phần Định dạng tham số cố định JavaScript của Hàm khởi tạo để biết thêm thông tin chi tiết:

• Bảng – Một mảng gồm các cột và hàng, cùng với một bản đồ không bắt buộc gồm các cặp tên/giá trị tuỳ ý mà bạn có thể chỉ định. Thuộc tính cấp bảng hiện không được biểu đồ sử dụng.
• Cột – Mỗi cột hỗ trợ một loại dữ liệu bắt buộc, cùng với một nhãn chuỗi, mã nhận dạng, mẫu và thành phần liên kết thuộc tính tên/giá trị tuỳ ý. Nhãn là một chuỗi thân thiện với người dùng có thể hiển thị qua biểu đồ; mã nhận dạng là một giá trị nhận dạng không bắt buộc có thể dùng thay cho chỉ mục cột. Một cột có thể được tham chiếu trong mã bằng chỉ mục dựa trên 0 hoặc bằng mã nhận dạng không bắt buộc. Hãy xem DataTable.addColumn() để biết danh sách các loại dữ liệu được hỗ trợ.
• Hàng – Hàng là một mảng gồm các ô cùng với một bản đồ không bắt buộc gồm các cặp tên/giá trị tuỳ ý mà bạn có thể chỉ định.
• Ô – Mỗi ô là một đối tượng chứa một giá trị thực tế của loại cột, cùng với một phiên bản tùy chọn được định dạng chuỗi của giá trị mà bạn cung cấp. Ví dụ: một cột số có thể được gán giá trị 7 và giá trị được định dạng là "7". Nếu bạn cung cấp giá trị được định dạng, biểu đồ sẽ sử dụng giá trị thực tế để tính toán và hiển thị, nhưng có thể hiển thị giá trị được định dạng khi thích hợp, chẳng hạn như khi người dùng di chuột qua một điểm. Mỗi ô cũng có một bản đồ tuỳ chọn chứa các cặp tên/giá trị tuỳ ý.

Biểu đồ của tôi sử dụng giản đồ bảng nào?

Các biểu đồ khác nhau sử dụng bảng ở các định dạng khác nhau: ví dụ: biểu đồ hình tròn yêu cầu bảng gồm hai cột, trong đó có cột chuỗi và cột số, trong đó mỗi hàng mô tả một lát cắt, cột đầu tiên là nhãn lát cắt và cột thứ hai là giá trị lát cắt. Tuy nhiên, biểu đồ tán xạ dự kiến sẽ có một bảng bao gồm 2 cột số, trong đó mỗi hàng là một điểm, còn hai cột là giá trị X và Y của điểm đó. Đọc tài liệu về biểu đồ để tìm hiểu xem biểu đồ yêu cầu định dạng dữ liệu nào.

DataTables và DataView

Bảng dữ liệu biểu đồ được biểu thị trong JavaScript bằng đối tượng DataTable hoặc đối tượng DataView. Trong một số trường hợp, bạn có thể thấy giá trị cố định JavaScript hoặc phiên bản JSON của DataTable được sử dụng, chẳng hạn như khi dữ liệu được gửi qua Internet bằng Nguồn dữ liệu của công cụ biểu đồ hoặc dưới dạng giá trị đầu vào có thể có cho ChartWrapper.

DataTable được dùng để tạo bảng dữ liệu gốc. DataView là một lớp tiện lợi cung cấp chế độ xem chỉ có thể đọc của DataTable, với các phương thức để ẩn hoặc sắp xếp lại các hàng hoặc cột một cách nhanh chóng mà không cần sửa đổi dữ liệu gốc và được liên kết. Dưới đây là thông tin so sánh ngắn gọn về 2 lớp:

DataTable	DataView
Đọc/Ghi	Chỉ có thể đọc
Có thể tạo trống rồi điền sẵn	Là tệp tham chiếu đến một DataTable hiện có. Không thể điền dữ liệu từ đầu mà phải tạo thực thể bằng cách tham chiếu đến DataTable hiện có.
Dữ liệu chiếm không gian lưu trữ.	Dữ liệu tham chiếu đến DataTable hiện có và không sử dụng dung lượng.
Có thể thêm/chỉnh sửa/xoá các hàng, cột và dữ liệu, đồng thời mọi thay đổi đều có hiệu lực cố định.	Có thể sắp xếp hoặc lọc các hàng mà không cần sửa đổi dữ liệu cơ bản. Các hàng và cột có thể bị ẩn và hiển thị nhiều lần.
Có thể sao chép	Có thể trả về phiên bản DataTable của khung hiển thị
Là dữ liệu nguồn; không chứa tệp tham chiếu	Tham chiếu trực tiếp đến DataTable; mọi thay đổi trong dữ liệu DataTable sẽ được phản ánh ngay lập tức trong khung hiển thị.
Có thể được truyền vào biểu đồ dưới dạng nguồn dữ liệu	Có thể được truyền vào biểu đồ dưới dạng nguồn dữ liệu
Không hỗ trợ các cột đã tính	Hỗ trợ các cột đã tính toán, là những cột có giá trị được tính toán nhanh bằng cách kết hợp hoặc thao tác với các cột khác.
Không có hàng hoặc cột nào bị ẩn	Có thể ẩn hoặc hiện những cột đã chọn

Tạo và điền sẵn DataTable

Có một số cách tạo và điền sẵn DataTable:

• Tạo một DataTable mới, sau đó gọi addColumn()/addRows()/addRow()/setCell()
• arrayToDataTable()
• Trình khởi chạy giá trị cố định JavaScript
• Gửi truy vấn nguồn dữ liệu

DataTable + addColumn()/addRows()/addRow()/setCell() trống

Các bước:

1. Tạo thực thể cho DataTable mới
2. Thêm cột
3. Thêm một hoặc nhiều hàng, nếu muốn được điền sẵn dữ liệu. Bạn có thể thêm các hàng trống và điền vào sau. Bạn cũng có thể thêm hoặc xoá các hàng bổ sung hoặc chỉnh sửa giá trị của ô riêng lẻ.

Ưu điểm:

• Bạn có thể chỉ định loại dữ liệu và nhãn của từng cột.
• Phù hợp để tạo bảng trong trình duyệt và ít bị lỗi chính tả hơn so với phương thức JSON.

Nhược điểm:

• Không hữu ích như việc tạo chuỗi ký tự JSON để truyền vào hàm khởi tạo DataTable khi tạo trang theo phương thức lập trình trên máy chủ web.
• Tuỳ thuộc vào tốc độ của trình duyệt và có thể chậm hơn các chuỗi chữ JSON có bảng lớn hơn (khoảng 1.000 ô trở lên).

Ví dụ:

Dưới đây là một vài ví dụ về cách tạo cùng một bảng dữ liệu bằng cách sử dụng các biến thể khác nhau của kỹ thuật này:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

Hàm trợ giúp này tạo và điền sẵn DataTable bằng một lệnh gọi duy nhất.

Ưu điểm:

• Mã rất đơn giản và dễ đọc được thực thi trong trình duyệt.
• Bạn có thể chỉ định rõ loại dữ liệu của từng cột hoặc để Google Biểu đồ suy luận loại từ dữ liệu được truyền vào.
  • Để chỉ định rõ loại dữ liệu của một cột, hãy chỉ định một đối tượng trong hàng tiêu đề bằng thuộc tính type.
  • Để cho phép Google Biểu đồ dự đoán loại, hãy sử dụng một chuỗi cho nhãn cột.

Ví dụ:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.

var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

Trình khởi tạo JavaScript Literal

Bạn có thể truyền một đối tượng cố định JavaScript vào hàm khởi tạo bảng, xác định giản đồ bảng cũng như dữ liệu (không bắt buộc).

Ưu điểm:

• Hữu ích khi tạo dữ liệu trên máy chủ web của bạn.
• Xử lý nhanh hơn các phương pháp khác đối với các bảng lớn hơn (khoảng 1.000 ô trở lên)

Nhược điểm:

• Cú pháp phức tạp và dễ mắc lỗi chính tả.
• Mã không dễ đọc lắm.
• Tương tự nhưng không giống với JSON.

Ví dụ:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Gửi truy vấn nguồn dữ liệu

Khi bạn gửi truy vấn đến Nguồn dữ liệu của công cụ biểu đồ, câu trả lời thành công là một phiên bản DataTable. DataTable được trả về này có thể được sao chép, sửa đổi hoặc sao chép vào DataView giống như bất kỳ DataTable nào khác.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

google.visualization.dataTableToCsv(Dữ liệu) của hàm trợ giúp sẽ trả về một chuỗi CSV chứa dữ liệu từ bảng dữ liệu.

Dữ liệu đầu vào cho hàm này có thể là DataTable hoặc DataView.

Hàm này sử dụng giá trị được định dạng của các ô. Không gian làm việc của cột sẽ bị bỏ qua.

Các ký tự đặc biệt như "," và "\n" sẽ được thoát bằng các quy tắc thoát CSV chuẩn.

Mã sau đây sẽ hiển thị

Ramanujan,1729
Gauss,5050

trong bảng điều khiển JavaScript của trình duyệt:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

Thông tin khác

• Truy vấn nguồn dữ liệu của Công cụ biểu đồ
• Cú pháp cố định JavaScript của DataTable
• Tài liệu tham khảo về DataTable
• Tài liệu tham khảo về DataView
• Tham chiếu arrayToDataTable()