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 đồ và các cách tạo bản sao và điền DataTable.
Nội dung
- Cách dữ liệu được biểu thị trong biểu đồ
- Biểu đồ của tôi sử dụng giản đồ bảng nào?
- Bảng dữ liệu và Chế độ xem dữ liệu
- Tạo và điền vào Bảng dữ liệu
- dataTableToCsv()
- Thêm thông tin
Cách dữ liệu được trình bày trong biểu đồ
Tất cả biểu đồ đều lưu trữ dữ liệu trong một bảng. Dưới đây là cách trình bày đơn giản của bảng dữ liệu được điền sẵn hai cột:
chỉ mục: 0 |
chỉ mục: 1 loại: số nhãn: "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 0 và cột là chỉ mục cột dựa trên 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 các phần tử và thuộc tính được hỗ trợ của bảng; xem Định dạng thông số cố định JavaScript của hàm khởi tạo để biết thêm chi tiết:
- Bảng – Một mảng các cột và hàng, cùng với một bản đồ tùy ý gồm các cặp tên/giá trị tùy ý mà bạn có thể chỉ định. Biểu đồ hiện không sử dụng thuộc tính cấp bảng.
- Cột – Mỗi cột hỗ trợ một loại dữ liệu bắt buộc, kèm theo nhãn, mã, mẫu và bản đồ tùy ý cho các 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 và có thể hiển thị trong biểu đồ; mã nhận dạng là một giá trị nhận dạng không bắt buộc mà bạn có thể dùng thay cho một 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 theo 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 ô, cộng với bản đồ tùy chọn của các cặp giá trị/tên tùy ý mà bạn có thể chỉ định.
- Ô – Mỗi ô là một đối tượng chứa giá trị thực của loại cột, cộng với phiên bản định dạng chuỗi không bắt buộc 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 "bảy".
Biểu đồ của tôi sử dụng giản đồ bảng nào?
Nhiều biểu đồ sử dụng bảng ở nhiều định dạng: ví dụ: biểu đồ hình tròn yêu cầu bảng hai cột có một cột và cột số, trong đó mỗi hàng mô tả một lát cắt và 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 hai cột số, trong đó mỗi hàng là một điểm và hai cột là giá trị X và Y của điểm. Hãy đọc tài liệu của biểu đồ để tìm hiểu xem công cụ này cần định dạng dữ liệu nào.
DataTables và DataView
Bảng dữ liệu trên biểu đồ được biểu thị bằng JavaScript dưới dạ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 phiên bản JavaScript hoặc JSON của Dữ liệu đượ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 thuận tiện
cung cấp chế độ xem DataTable chỉ có thể đọc, với các phương thức để ẩn
hoặc sắp xếp lại nhanh các hàng hoặc cột mà không cần sửa đổi dữ liệu gốc, được liên kết. Dưới đây là phần so sánh ngắn gọn giữa hai lớp:
| Bảng dữ liệu | Xem dữ liệu |
|---|---|
| Đọc/Ghi | Chỉ có thể đọc |
| Có thể tạo trống rồi điền vào | Là tham chiếu đến một DataTable hiện có. Không thể điền từ đầu; phải được tạo bản sao có 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 một DataTable hiện có và không tiêu tốn dung lượng. |
| Có thể thêm/chỉnh sửa/xóa hàng, cột và dữ liệu, đồng thời mọi thay đổi đều diễn ra liên tục. | 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 thành phần hiển thị |
| Là dữ liệu nguồn; không chứa tham chiếu | Tệp 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 thành phần 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ột đã tính toán | Hỗ trợ các cột đã tính toán, là các cột có giá trị được tính nhanh bằng cách kết hợp hoặc thao tác các cột khác. |
| Không ẩn hàng hoặc cột | Có thể ẩn hoặc hiển thị những cột đã chọn |
Tạo và điền vào DataTable
Có một số cách để tạo và điền vào một Bảng dữ liệu:
- Tạo một DataTable mới, sau đó gọi addColumn()/addRows()/addRow()/setCell()
- mảngToDataTable()
- Trình khởi chạy giá trị cố định JavaScript
- Gửi truy vấn nguồn dữ liệu
DataTable trống + addColumn()/addRows()/addRow()/setCell()
Các bước:
- Tạo thực thể cho
DataTablemới - Thêm cột
- Thêm một hoặc nhiều hàng (không bắt buộc điền dữ liệu). Bạn có thể thêm các hàng trống và điền chúng vào lúc khác. Bạn cũng có thể thêm hoặc xoá hàng bổ sung hoặc chỉnh sửa từng giá trị ô.
Ư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 xảy ra lỗi chính tả hơn so với phương thức giá trị cố định JSON.
Nhược điểm:
- Không hữu ích như tạo một chuỗi ký tự JSON để truyền vào hàm khởi tạo DataTable khi tạo trang trên máy chủ web theo phương thức lập trình.
- Phụ thuộc vào tốc độ của trình duyệt và có thể chậm hơn các chuỗi ký tự JSON với bảng lớn hơn (khoảng hơn 1.000 ô).
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));
mảngToDataTable()
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 trong trình duyệt.
- Bạn có thể chỉ định rõ ràng loại dữ liệu của mỗi cột hoặc cho phép Google Biểu đồ suy luận loại dữ liệu từ dữ liệu được truyền vào.
- Để chỉ định rõ ràng loại dữ liệu của 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 đồ suy luận loại dữ liệu, hãy sử dụng chuỗi cho nhãn cột.
- Để chỉ định rõ ràng loại dữ liệu của cột, hãy chỉ định một đối tượng trong hàng tiêu đề bằng thuộc tính
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 chạy Literal JavaScript
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 và có thể thêm dữ liệu nếu muốn.
Ư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 thức khác cho các bảng lớn hơn (khoảng hơn 1.000 ô)
Nhược điểm:
- Cú pháp rất khó lấy đúng và dễ mắc lỗi chính tả.
- Mã không đọc được nhiều.
- Tương tự nhưng không giống hệt 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 một truy vấn đến một Nguồn dữ liệu của công cụ biểu đồ, câu trả lời thành công là một thực thể của DataTable. Bạn có thể sao chép, sửa đổi hoặc sao chép DataTable được trả về này vào DataView giống như với 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()
Hàm google.visualization.dataTableToCsv(dữ liệu) của hàm trợ giúp sẽ trả về một chuỗi CSV có dữ liệu từ bảng dữ liệu.
Giá trị đầu vào cho hàm này có thể là một DataTable hoặc một DataView.
Hàm này sử dụng các giá trị đã định dạng của ô. Các phòng thí nghiệm cột bị bỏ qua.
Các ký tự đặc biệt như "," và "\n" được thoát bằng cách sử dụng 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 cho Công cụ biểu đồ
- Cú pháp giá trị cố định JavaScript của DataTable
- Tài liệu tham khảo về
DataTable - Tài liệu tham khảo về
DataView - Tài liệu tham khảo về
arrayToDataTable()