用 WebGPU 驱动的前端图表库，声称 50M 数据点 60 帧流畅渲染

传统前端图表库在面对大规模数据时，通常会遇到性能瓶颈：Canvas 2D 或 SVG 的渲染逻辑跑在 CPU 上，数据量一旦上涨到百万级别，帧率下降、交互卡顿就会成为绕不开的问题。

ChartGPU 尝试从另一个方向解决这个问题——把渲染任务交给 GPU。它是一个基于 WebGPU 的开源 TypeScript 图表库，自称"最快的开源图表库"，官方给出的基准数据是：3500 万数据点约 72 FPS，500 万根 K 线图实时更新超过 100 FPS。

WebGPU 是浏览器的新一代图形 API（可以理解为允许网页直接调用显卡能力的标准），目前已在 Chrome 113+、Edge 113+、Safari 18+ 和 Firefox（Windows 114+、Mac 145+）中得到支持。ChartGPU 建立在这个基础上，将大量原本在 CPU 侧完成的数据处理和绘制计算转移到 GPU，从而获得更高的吞吐能力。

支持哪些图表类型

ChartGPU 目前支持六种图表类型：折线图、面积图、柱状图、散点图、饼图和 K 线图（candlestick）。

其中值得单独提到的是散点密度图（scatter density）。当散点数量达到百万级别时，普通的散点图会因为点位重叠而失去信息密度，ChartGPU 提供了一个 mode: 'density' 配置，将密集区域以热力图方式呈现，可以在 100 万以上数据点的场景下直观识别分布规律。

此外，库内置了以下交互能力：

  • 悬停高亮与 Tooltip：鼠标悬停时展示对应数据点的详细信息
  • 十字准线（Crosshair）：跟随鼠标移动，辅助定位
  • X 轴缩放：支持可选的滑动条 UI，用于快速浏览长时间序列数据
  • 注释系统：支持在图表上添加参考线、点标记和文字注释，并提供撤销/重做操作

流式数据更新

对于金融行情、监控指标等实时场景，ChartGPU 提供了 appendData() 方法，支持在不重新渲染整张图的前提下追加新数据。该方法接受 TypedArray 格式的数据（例如 Float64Array），减少了频繁 GC 的压力。

// 向已有图表追加新数据点
chart.appendData('series-0', new Float64Array([timestamp, value]));

多图表共享 GPU 资源

在需要同时展示多个图表的 Dashboard 场景中，每个图表单独初始化 WebGPU 设备会带来不必要的资源开销。ChartGPU 支持多个图表实例共享同一个 GPU 设备和 Pipeline 缓存，从而在密集布局下也能维持较低的资源占用。

安装与使用

安装方式

npm install chartgpu

React 项目可以使用专属绑定包：

npm install chartgpu-react

前提条件：需要浏览器支持 WebGPU。目前主流版本的 Chrome、Edge 和 Safari 已默认启用，Firefox 需确认版本号。

基础用法

创建一个带有明确宽高的 HTML 容器（不设置尺寸会导致渲染异常），然后调用 ChartGPU.create() 初始化图表：

import { ChartGPU } from 'chartgpu';
 
const container = document.getElementById('chart')!;
 
// create() 是异步方法，需要 await
const chart = await ChartGPU.create(container, {
  series: [
    {
      type: 'line',
      data: [
        [0, 1],
        [1, 3],
        [2, 2],
      ],
    },
  ],
});

对应的 HTML 容器示例：

<div id="chart" style="width: 800px; height: 400px;"></div>

K 线图（适用于行情数据）

const chart = await ChartGPU.create(container, {
  series: [
    {
      type: 'candlestick',
      data: [
        // [timestamp, open, high, low, close]
        [1700000000000, 100, 110, 95, 105],
        [1700003600000, 105, 115, 100, 108],
      ],
    },
  ],
});

散点密度图（适用于大规模点云）

const chart = await ChartGPU.create(container, {
  series: [
    {
      type: 'scatter',
      mode: 'density',   // 开启密度热力图模式
      data: largeDataArray,
    },
  ],
});

页面卸载时的清理

WebGPU 资源需要手动释放，建议在页面卸载时调用 dispose()：

window.addEventListener('unload', () => {
  chart.dispose();
});

在 React 中使用

import { ChartGPUReact } from 'chartgpu-react';
 
function App() {
  return (
    <ChartGPUReact
      style={{ width: '800px', height: '400px' }}
      options={{
        series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
      }}
    />
  );
}

与常见图表库的差异

ChartGPU 和 ECharts、Chart.js 等库的核心差异在于渲染层：

  • ECharts / Chart.js：基于 Canvas 2D 或 SVG，渲染逻辑在 CPU 执行，适合中等数据量（通常在几万条以内）的通用场景
  • ChartGPU：基于 WebGPU，数据处理和绘制计算在 GPU 执行，在百万至千万级数据点时才能体现出明显的性能差距

换句话说，如果你的图表数据量不大，ChartGPU 相比成熟库并没有显著优势，反而需要考虑 WebGPU 的浏览器兼容限制（老版本浏览器不支持）。它更适合的场景是：金融行情图表（百万级 K 线）、实时监控大盘（持续追加数据）、科学数据可视化（百万级散点分析）。

写在最后

ChartGPU 的方向是把浏览器端的图表渲染推到 GPU，这在技术路线上是有意义的——WebGPU 本身就是为了让 Web 应用能更充分地利用现代硬件而设计的。从官方给出的基准数据来看，在极端数据量下它的表现是有参考价值的。

不过实际接入时需要注意几点：WebGPU 目前仍处于推广阶段，企业内网环境或老设备的兼容问题需要评估；库本身文档还在完善中，复杂定制场景可能需要阅读源码。

如果你的项目正好面临前端图表的性能瓶颈，ChartGPU 值得作为候选方案进行调研。项目提供了 25 个以上的交互示例，可以在本地跑起来直接验证性能表现。

GitHub 项目地址：https://github.com/ChartGPU/ChartGPU (opens in a new tab)