Trong kỷ nguyên dữ liệu, việc chuyển đổi số liệu thô thành hình ảnh trực quan chất lượng cao — mà không cần triển khai hệ thống phức tạp — đang trở thành yêu cầu thiết yếu. QuickChart là một thư viện mã nguồn mở nhẹ, cung cấp dịch vụ tạo biểu đồ và mã QR dưới dạng ảnh tĩnh thông qua giao diện HTTP đơn giản, dựa hoàn toàn trên URL.

Nguyên lý hoạt động: Từ cấu hình JSON đến ảnh PNG/JPEG chỉ trong một yêu cầu

QuickChart loại bỏ nhu cầu chạy môi trường JavaScript phía máy chủ hoặc nhúng thư viện Chart.js vào ứng dụng. Thay vào đó, người dùng gửi cấu hình biểu đồ (dưới dạng JSON được mã hóa URL) tới endpoint công khai — ví dụ https://quickchart.io/chart?c={...} — và nhận về ảnh trực tiếp. Cơ chế này đảm bảo tính stateless, dễ tích hợp với bất kỳ nền tảng nào: email, PDF, hệ thống báo cáo tự động, hay thậm chí là thẻ NFC có mã QR nhúng.

Tính năng nổi bật

• Hỗ trợ đa phiên bản Chart.js: Tương thích với Chart.js v2.x, v3.x và v4.x — cho phép tái sử dụng cấu hình biểu đồ hiện có mà không cần điều chỉnh.
• Mở rộng chức năng qua plugin: Kích hoạt các tiện ích như nhãn dữ liệu (chartjs-plugin-datalabels), chú giải tương tác, hoặc biểu đồ dạng vòng đo lường (chartjs-gauge) bằng cách thêm tùy chọn vào cấu hình.
• API mã QR linh hoạt: Tạo mã QR với nội dung tùy chỉnh, kích thước, mức độ sửa lỗi (L/M/Q/H), màu nền và màu mã — tất cả đều kiểm soát qua query parameters.
• Tối ưu hóa đầu ra: Tự động điều chỉnh độ phân giải, tỷ lệ khung hình và nén ảnh để cân bằng giữa chất lượng hiển thị và kích thước tệp.

Ví dụ minh họa: Biểu đồ so sánh doanh thu theo kênh

Dưới đây là cấu hình JSON được mã hóa URL để tạo biểu đồ cột hai chuỗi dữ liệu:

https://quickchart.io/chart?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Q1%22%2C%22Q2%22%2C%22Q3%22%2C%22Q4%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22E-commerce%22%2C%22data%22%3A%5B120%2C150%2C180%2C210%5D%2C%22backgroundColor%22%3A%22%234CAF50%22%7D%2C%7B%22label%22%3A%22Retail%22%2C%22data%22%3A%5B80%2C100%2C130%2C160%5D%2C%22backgroundColor%22%3A%22%232196F3%22%7D%5D%7D%2C%22options%22%3A%7B%22responsive%22%3Afalse%2C%22plugins%22%3A%7B%22datalabels%22%3A%7B%22display%22%3Atrue%2C%22color%22%3A%22%23333%22%7D%7D%7D%7D

Để dễ đọc, đây là phiên bản JSON gốc (không mã hóa):

{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
      {
        "label": "E-commerce",
        "data": [120, 150, 180, 210],
        "backgroundColor": "#4CAF50"
      },
      {
        "label": "Retail",
        "data": [80, 100, 130, 160],
        "backgroundColor": "#2196F3"
      }
    ]
  },
  "options": {
    "responsive": false,
    "plugins": {
      "datalabels": {
        "display": true,
        "color": "#333"
      }
    }
  }
}

Tích hợp mã QR trong vài giây

Để tạo mã QR chứa liên kết trang sản phẩm, sử dụng:

https://quickchart.io/qr?text=https%3A%2F%2Fexample.com%2Fproduct-123&size=300&ecLevel=H&bgColor=ffffff&fgColor=2c3e50

Tham số hỗ trợ bao gồm: text (nội dung mã hóa), size (độ dài cạnh tính bằng pixel), ecLevel (mức độ sửa lỗi), và màu nền/mã.

Triển khai riêng tư bằng Docker

Với yêu cầu kiểm soát dữ liệu nội bộ, bạn có thể triển khai instance riêng bằng lệnh sau:

git clone https://gitcode.com/gh_mirrors/qu/quickchart
cd quickchart
docker build -t my-quickchart .
docker run -d -p 3000:3400 --name qc-instance my-quickchart

Sau khi chạy, API sẽ khả dụng tại http://localhost:3000. Cấu hình tùy chỉnh (như giới hạn kích thước ảnh hoặc danh sách domain được phép gọi) có thể thiết lập qua biến môi trường.

Bản quyền và giấy phép

Dự án được phát hành dưới giấy phép AGPL-3.0. Điều này cho phép sử dụng miễn phí trong cả môi trường cá nhân và doanh nghiệp, với điều kiện nếu bạn sửa đổi và phân phối lại mã nguồn, thì phải công khai phần mã đã thay đổi.