Phạm vi biểu đồ động google sheet

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ánJoe75150John87174Sam48Kathy56112Arnold612Sarah52104Timmy2550Rachel98196Jared52104George2040Dave86172Jeffrey1224

Chú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
    }
  }
}

3

Bắ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

https://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
    }
  }
}

4

Thuộ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àng

Giố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
    }
  }
}

3

Khi 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
    }
  }
}

2

Dữ 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. 73

Chú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
    }
  }
}

8

Chú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 đồ thanh

Nế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

Bạn có thể định dạng biểu đồ trong Google Trang tính theo điều kiện không?

Google Trang tính có mảng động không?

Bạn có thể tạo biểu đồ tương tác trên Google Trang tính không?