QuickChart có thể hiển thị hình ảnh biểu đồ dựa trên dữ liệu mới nhất từ bảng tính của bạn. Bài đăng này mô tả cách tích hợp Google Trang tính làm nguồn dữ liệu cho hình ảnh biểu đồ động
Các biểu đồ được hiển thị dưới dạng hình ảnh, nghĩa là chúng có thể nhúng vào các trang web, email, báo cáo và bất kỳ nơi nào khác. Dữ liệu mới nhất được lấy tự động - bạn không cần thay đổi cấu hình biểu đồ của mình để cập nhật dữ liệu biểu đồ
QuickChart lấy dữ liệu từ bảng tính và hiển thị hình ảnh biểu đồ có thể nhúng ở mọi nơi
Bước 1. Xây dựng trang tính
Tôi giả sử đã quen thuộc cơ bản với Biểu đồ. js và trình kết xuất QuickChart. Để tìm hiểu thêm về cách bắt đầu, hãy xem hướng dẫn Bắt đầu
Giả sử chúng ta có một bảng bảng tính trông như thế này
Tên Số lần sử dụng Thanh toánJoe75150John87174Sam48Kathy56112Arnold612Sarah52104Timmy2550Rachel98196Jared52104George2040Dave86172Jeffrey1224Chúng tôi muốn tạo một biểu đồ hiển thị các thanh
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
1 và {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
2 cho mỗi {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
3Bắt đầu bằng cách tạo Google Sheet và sao chép dữ liệu vào đó. Bạn cũng có thể tải bảng tính Excel lên Google. Ví dụ trên đã được chuyển vào Google Sheets tại đây
Tiếp theo, định cấu hình cài đặt chia sẻ để người ngoài có thể truy cập vào cài đặt đó. Để thực hiện việc này, hãy nhấp vào nút "Chia sẻ" màu xanh lục ở trên cùng bên phải, sau đó nhấp vào "Thay đổi thành bất kỳ ai có liên kết". Sau khi đặt chính xác, nó sẽ báo "Bất kỳ ai trên internet có liên kết này đều có thể xem"
Bước 2. Xây dựng biểu đồ
Hãy xem URL cho bảng tính của bạn. Nó trông giống như thế này
//docs.google.com/spreadsheets/d/1qBJlbi200GozsP8W4gBGZOxuwKSYmBiiTH8olwx26E8/edit#gid=0
Phần in đậm được gọi là ID tài liệu. Ghi lại ID tài liệu này
Tiếp theo, chúng tôi sẽ xây dựng Biểu đồ của chúng tôi. js và thêm plugin tùy chỉnh có tên là
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
4. Đây là một ví dụ{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
0 cho plugin biết nơi lấy dữ liệu. Các thuộc tính còn lại là tùy chọn. Sử dụng {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
1 hoặc {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
2 để ghi đè các giá trị trong cấu hình biểu đồ của bạnĐể thay thế cho
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
0, bạn có thể chỉ cần dán toàn bộ URL vào trang tính dưới dạng thuộc tính {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
4Thuộc tínhMô tảVí dụNotessheetUrlURL có thể chia sẻ của Google Trang tính{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
5Bắt buộc khi không đặt {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
0. Ghi đè {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
0 và {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
8docIdGoogle sheet ID{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
9Bắt buộc khi {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
4 không được đặtsheetName của trang tính hoặc chỉ mục dựa trên 0 của trang tính{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
31 hoặc {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
32Tùy chọn, mặc định là nhãn trang tính đầu tiênTên cộtXác định nhãn cho chuỗi dữ liệu của bạn{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
33Tùy chọn, mặc định là nhãn trong biểu đồ cấu hìnhCộtDanh sách tên cột . giới hạnSố hàng cần lấy từ sheet{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
36 cho 20 hàng đầu tiên, {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
37 cho 10 hàng cuối cùngNếu âm, sẽ tính từ dưới lên. Mặc định là không giới hạn số hàng. offsetSố hàng để dịch chuyển bảng bởi____138 để bỏ qua hàng đầu tiên. {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
39 để bỏ qua 5 hàng cuối cùng Nếu dương, chuyển hàng lên trên. Nếu âm, chuyển hàng xuống. Mặc định là 0filter. labelPredicate để lọc dữ liệu theo nhãn{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
20Trả về true để giữ hàng, trả về false để xóa hàngGiống như bất kỳ biểu đồ QuickChart nào khác, chúng tôi có thể đóng gói cấu hình này thành một chuỗi JSON và gửi nó đến điểm cuối QuickChart tại
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
21{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
3Khi bạn hiển thị URL ở trên trong thẻ hình ảnh, bạn sẽ thấy hình ảnh bên dưới
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
2Dữ liệu cho hình ảnh này được lấy tự động từ bảng tính
This image can be directly embedded in on a website, email, PDF, etc. using a standard
Dữ liệu cho hình ảnh này được lấy tự động từ bảng tính
Giống như trong ví dụ trước, hình ảnh này sẽ tự động phản ánh dữ liệu mới nhất trong bảng tính của bạn khi nó được tải
Tùy chỉnh chuỗi biểu đồ
Trong ví dụ này, chúng tôi sử dụng một "Nhiệt độ so với. Lượng mưa" và chia các bộ dữ liệu thành nhiều trục, biểu thị một trục có vạch và một trục có đường kẻ
Bảng tính trông như thế này [dữ liệu này nằm trên tab "Thời tiết" của Google Trang tính mẫu mà chúng tôi đã sử dụng ở trên]
NhãnNhiệt độLượng mưaJan33. 371. 5928 tháng 2. 756. 47Mar47. 583. 52Apr54. 4815. 32Mar74. 4915. 92Jun86. 2919. 69Jul83. 111. 2Aug88. 2919. 88Sep66. 064. 08Oct57. 796. 18Nov54. 5610. 7Dec45. 0512. 73Chúng tôi đặt cấu hình biểu đồ như vậy
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
8Chúng tôi được khen thưởng với biểu đồ sau
Dữ liệu cho hình ảnh này được lấy từ Google Trang tính và sau đó được vẽ biểu đồ trên nhiều trục Y
hạn chế
Như đã lưu ý ở trên, biểu đồ sẽ cập nhật tối đa 30 giây một lần
Người dùng phải làm mới trang hoặc tải lại hình ảnh để xem dữ liệu bảng tính mới nhất. Một số ứng dụng khách lưu trữ hình ảnh vào bộ đệm ẩn [ví dụ: GMail lưu trữ hình ảnh trong khoảng 48 giờ khi mở email]. Trong những trường hợp như vậy, biểu đồ có thể không cập nhật sau khi bộ nhớ đệm đã diễn ra
đọc thêm
Giao diện của biểu đồ hoàn toàn có thể tùy chỉnh bằng Biểu đồ. tài liệu js. Bạn cũng nên xem tài liệu QuickChart để biết thêm thông tin về các phím tắt và plugin
Để bắt đầu, hãy thử thay thế
{
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
26 bằng {
type: 'bar',
options: {
plugins: {
googleSheets: {
docId: '121DpBzwABbNB7JO3--dXGTI3CE2LL1WwPHXKCYDdsKM',
sheet: 'Sheet1',
labelColumn: 'Name',
dataColumns: ['Usage count', 'Payment'],
}
},
legend: {
display: false
}
}
}
27 trong các ví dụ trên để có biểu đồ đường thay vì biểu đồ thanhNếu bạn đang tìm kiếm các URL ngắn hơn, hãy xem tài liệu về trình rút ngắn URL
QuickChart là mã nguồn mở dành cho các cá nhân và tổ chức muốn tự lưu trữ. Hoặc, bạn có thể đăng ký QuickChart để tạo biểu đồ trên cơ sở hạ tầng của chúng tôi. Vui lòng liên hệ với bất kỳ câu hỏi nào
Giới thiệu về tác giả
Ian Webster là một kỹ sư phần mềm và là cựu nhân viên của Google có trụ sở tại San Mateo, California. Anh ấy đã giúp Google, NASA và các chính phủ trên khắp thế giới cải thiện đường truyền dữ liệu và hình ảnh hóa của họ. Vào năm 2018, Ian đã tạo QuickChart, một tập hợp các API nguồn mở hỗ trợ các nỗ lực trực quan hóa dữ liệu