ChartGPU – Thư viện biểu đồ hiệu năng cao dựa trên WebGPU (render 1M điểm ở 60fps)

 (github.com/ChartGPU)
14 điểm bởi GN⁺ 2026-01-22 | 1 bình luận | Chia sẻ qua WhatsApp
  • Là thư viện biểu đồ mã nguồn mở sử dụng WebGPU để render mượt mà các tập dữ liệu quy mô lớn
  • Được viết bằng TypeScript, hỗ trợ nhiều loại series như đường, vùng, cột, phân tán, tròn, nến
  • Tích hợp sẵn các tính năng tương tác như tô sáng khi hover, tooltip, crosshair, cử chỉ zoom, preset giao diện
  • Có thể dùng dễ dàng trong môi trường React thông qua gói tích hợp React (chartgpu-react)
  • Render tăng tốc bằng WebGPU mang lại hiệu năng khoảng 60 khung hình/giây, là công cụ phù hợp cho trực quan hóa dữ liệu quy mô lớn

Tổng quan

  • ChartGPU là thư viện render biểu đồ hiệu năng cao dựa trên WebGPU, có thể trực quan hóa mượt mà lượng dữ liệu lớn
    • Được phát triển bằng TypeScript và phát hành theo giấy phép MIT
    • Có thể cài đặt bằng lệnh npm install chartgpu

Tính năng chính

  • Duy trì FPS cao trên các tập dữ liệu lớn nhờ render tăng tốc bằng WebGPU
  • Hỗ trợ nhiều loại biểu đồ: line, area, bar, scatter, pie, candlestick
  • Tích hợp sẵn tính năng tương tác: hover highlight, tooltip, crosshair
  • Hỗ trợ cập nhật dữ liệu dạng streaming (appendData(...))
  • Cung cấp tính năng zoom trục X (bao gồm cử chỉ và UI thanh trượt)
  • Hỗ trợ preset giao diện (dark / light) và giao diện tùy chỉnh

Kiến trúc

  • ChartGPU.create(...) quản lý canvas và vòng đời WebGPU, còn việc điều phối render do Render Coordinator đảm nhiệm
  • Cấu trúc bên trong gồm các lớp như sau
    • WebGPU Core: khởi tạo GPU adapter và device, cấu hình canvas
    • Render Coordinator: quản lý layout, scale, tải dữ liệu lên, render pass
    • GPU Renderers: renderer cho từng loại biểu đồ như Grid, Area, Bar, Scatter, Line, Pie, Candlestick
    • Shaders (WGSL): gồm các tệp shader tương ứng với từng renderer
    • Chart Sync: cung cấp tính năng đồng bộ crosshair giữa nhiều biểu đồ

Tích hợp React

  • Cung cấp gói React chartgpu-react
  • Cài đặt: npm install chartgpu-react

Hỗ trợ trình duyệt

  • Cần trình duyệt đã bật WebGPU
    • Hỗ trợ Chrome 113+, Edge 113+, Safari 18+
    • Firefox hiện đang trong quá trình phát triển

Bài viết liên quan

1 bình luận

 
GN⁺ 2026-01-22
Ý kiến trên Hacker News

  • Tôi là maintainer của uPlot. Dự án này rất thú vị nên tôi sẽ xem kỹ hơn sớm
    Ấn tượng ban đầu sau khi xem nhanh bản demo 1M là,

    • việc lấy mẫu có nguy cơ loại bỏ các đỉnh quan trọng. uPlot không dùng lấy mẫu, nên để so sánh hiệu năng công bằng thì cần tắt nó đi. Xem thêm PR này
    • mức dùng CPU khi không làm gì vẫn khá cao. Trong khi đó, các giải pháp dựa trên canvas gần như không dùng CPU nếu dữ liệu hay scale không thay đổi. Có vẻ trong WebGPU cũng có thể xử lý bằng cách tạm dừng cập nhật
    • khi hiển thị nhiều biểu đồ trên một trang, Chrome giới hạn 16 GL context. Plotly vượt qua việc này bằng virtual-webgl
    • định dạng dữ liệu như [[0,1],[1,3],[2,2]] buộc phải tạo hàng triệu mảng nhỏ, nên tốt hơn là đổi sang cấu trúc dữ liệu dạng cột
      Tham khảo thêm, uPlot cũng có demo 2M data point
    • Cảm ơn vì đã dành thời gian xem, đồng thời nói rằng uPlot là nguồn cảm hứng lớn khi chứng minh biểu đồ trên trình duyệt không nhất thiết phải chậm
      Cả vấn đề lấy mẫu LTTB lẫn CPU khi idle đều là những góp ý xác đáng; lấy mẫu hiện đang bật mặc định trong demo, nhưng có thể so sánh công bằng bằng sampling: none. Tôi sẽ thêm một nút toggle vào UI.
      Vấn đề vòng lặp render vẫn tiếp tục chạy ngay cả khi đứng yên cũng có thể sửa được. Tôi dự định cải thiện để chỉ render khi dữ liệu thay đổi hoặc có tương tác
    • Tôi là tác giả ban đầu của Flot. Trước đây khi xử lý hàng triệu data point, tôi đã tự triển khai mip-mapping ở phía client
      Với line chart, nếu dùng lấy mẫu thích ứng dựa trên độ chênh lệch theo pixel giữa các điểm liền kề thì có thể bỏ phần lớn số điểm mà gần như không có khác biệt về mặt thị giác.
      Việc vẽ 1 triệu điểm lên một biểu đồ rộng 1000 pixel là không hiệu quả
    • Tôi tự hỏi liệu có thể dùng phân rã wavelet (wavelet decomposition) để chỉ giảm các thành phần tần số cao mà vẫn giữ được đỉnh hay không. Về mặt lý thuyết, cách này có vẻ hợp lý hơn lấy mẫu, nhưng tôi chưa tìm được tài liệu liên quan
    • Với tư cách là một người dùng rất nhiệt thành của uPlot, xin cảm ơn vì đã tạo ra một thư viện tuyệt vời
    • Trong nhiều dự án, để resample dữ liệu mà không làm mất đỉnh, tôi đã dùng cách vẽ kèm đồ thị vùng min-max. Cách này hoạt động khá tốt

  • Khi số data point rất lớn, tốt hơn là đếm số điểm mà mỗi pixel bao phủ rồi biểu diễn cường độ bằng độ sáng hoặc màu sắc
    Cách này tương tự digital phosphor trong điện tử. Xem ví dụ ở liên kết này

    • Gợi ý rất hay. Kiểu render dựa trên mật độ này rất hiệu quả với dữ liệu chồng lấp. Với compute shader của WebGPU, có thể binning point vào lưới, đếm theo từng ô rồi render theo cường độ.
      Đặc biệt hữu ích để làm lộ rõ cấu trúc cụm trong scatter plot. Tôi sẽ thêm vào danh sách ý tưởng
    • Đồng ý. Heatmap cường độ theo thang log rất phù hợp với các tập dữ liệu lớn (ví dụ: line chart với 10 nghìn chuỗi). Khi cần có thể drill-down vào chi tiết

  • Tôi đã hoàn tất bản vá mức dùng CPU khi idle.
    Tôi đã thêm toggle “Benchmark mode” vào ví dụ benchmark 1M, để vẫn giữ chức năng benchmark mà hệ thống hoạt động hiệu quả khi không có tương tác
    Việc FPS hiển thị là 0 cũng hoàn toàn bình thường — nếu không có gì để render thì sẽ không vẽ frame nào. Khi cần thì vẫn render ngay ở tốc độ tối đa
    Tôi rất xúc động trước phản hồi đầy nhiệt huyết từ cộng đồng

  • Tôi đang phát triển một công cụ phân tích Link Graph chạy trên trình duyệt (webvetted.com/workbench)
    Tôi cần trực quan hóa các đồ thị với hàng nghìn node/edge, nên nếu xử lý được 1M point thì sẽ rất hữu ích

    • Dự án trông rất hay, và ChartGPU hiện tập trung vào biểu đồ 2D (line, bar, scatter, v.v.)
      Tuy vậy, các mẫu render WebGPU cũng có thể áp dụng tốt cho trực quan hóa đồ thị. Trình render scatter đã xử lý được hàng nghìn instance, nên về mặt cấu trúc thì thêm edge cũng không quá khó
      Tôi đang hỏi ý kiến xem nên tích hợp tính năng đồ thị vào ChartGPU hay tách riêng thành thư viện GraphGPU
    • Hỏi về danh sách độ tin cậy của webvetted.com trên URL scanner của Gridinsoft
    • Đánh giá là rất hữu ích, và nói sẽ tích hợp ngay hôm nay
    • Với tư cách người dùng tiềm năng, góp ý rằng trên website còn thiếu một trang trình bày chi tiết hơn về tính năng sản phẩm. Cần tăng cường phần giới thiệu sản phẩm

  • Rất ấn tượng. Cảm thấy đây là một trong những demo ấn tượng nhất

  • Sẽ rất tốt nếu thêm chức năng vẽ line và band cho candlestick. Không chỉ đơn thuần là plot mà còn cần có khả năng làm nổi bật các point
    Trước đây tôi từng định tự làm thứ tương tự bằng WebGPU, nhưng dự án này khiến tôi muốn thử dùng ngay

  • Tôi là maintainer của TimeLine. Demo live streaming của ChartGPU (liên kết) không mượt như tôi kỳ vọng
    Để so sánh, demo này được làm bằng canvas 2D trên main thread lại chạy mượt hơn nhiều

  • Tôi phát hiện lỗi slider trong ví dụ 1M point (liên kết)
    Trong lúc kéo, slider không bám dưới con trỏ mà nhảy đi một khoảng ngoài dự kiến

    • Đây là lần thứ hai tôi nhận được báo cáo về cùng vấn đề này. Có vẻ là cùng nguyên nhân với lỗi scrollbar trên Mac M1
      Đây là vấn đề ánh xạ tọa độ của data zoom slider, tôi sẽ nâng mức ưu tiên để sửa

  • Xin chúc mừng, nhưng 1M point là mức bình thường trong lĩnh vực tài chính
    Engine render tôi đang phát triển hiện đã nâng hiệu năng từ 10 triệu point lên tới 100 triệu point
    Xem video demo

  • Plotly thực ra đã có thể xử lý hơn chục triệu point bằng WebGL từ nhiều năm trước
    Có khá nhiều thư viện với tính năng tương tự
    Xem demo hiệu năng