WebGPU 图表库用于大型数据集,实时流线,多图仪表板,和3D系列. 麻省理工学院有执照 0 npm 运行时依赖性 .
现场演示 • 妇女 文档 • 妇女 API 密码 • 妇女 实例
概览
图表GPU使图表与 网络GPU (不是Canvas2D或WebGL). 其目的是:
- 密集时间序列和数百万分系列
- 不断更新( E)
appendData具有可选环容量) - 共用设备多图仪表板
- 2D 系列加
cartesian3d(单位:千美元)pointCloud3d, (中文(简体) ),surface3d(中文(简体) )
有一个 没有WebGL/ Canvas 回落。不支持的浏览器必须被主机应用程序打开.
演示
流出多图壁( 共享 GPU 设备) :
| 散点密度 | 烛台/ OHLC | 说明 |
|---|---|---|
 |  |  |
安装
npm install @chartgpu/chartgpu
也作为无范围出版 chartgpu (同为版本行. 反应绑定 : chartgpu-react (单位:千美元)npm i chartgpu-react @chartgpu/chartgpu) (中文(简体) ).
最小示例
import { ChartGPU } from '@chartgpu/chartgpu';
const el = document.getElementById('chart')!;
const chart = await ChartGPU.create(el, {
series: [{
type: 'line',
data: {
x: new Float64Array([0, 1, 2]),
y: new Float64Array([1, 3, 2]),
},
}],
});
// Prefer column-shaped x/y at scale; object/[x,y] tuples are fine for small demos
const x = new Float64Array([3, 4, 5]);
const y = new Float64Array([2.5, 2.1, 2.8]);
chart.appendData(0, { x, y }, { maxPoints: 50_000 });
需要WebGPU可访问浏览器(参见 浏览器支持) (中文(简体) ).
特征
- 流线 —— 说
appendData可选maxPoints环 (FIFO). 加热图和3D表面使用专用更新API(updateHeatmap, (中文(简体) ),updateSurface3D) 而不是全部选项重写每个勾选 . - 取样 —— CPU上的 LTTB / min / 最大; 符合条件的行系列可以在GPU上运行被毁灭. Nulls 创建缺口; 可选
connectNulls。 。 。 .performance.lod数字 :auto|strict。 。 。 . - 多图 - 分享一个
GPUDevice(建议3) 通过缩放同步connectCharts。 。 。 . - 互动 ——"缩放","平","多轴Y"等尺度,"暗"/"轻"/"定制"等主题,"说明".
- 三维 —— 说
coordinateSystem: 'cartesian3d'与pointCloud3d财务报告和审定财务报表surface3d。 。 。 . - 依赖关系 零 npm 运行时依赖性。 麻省理工学院商业嵌入许可证.
结构注释 : 文献/档案. 业绩指南: 图gpu.io/docs/性能. 他们: 图表gpu.io/文件/主题。 。 。 .
系列类型
完整选项 : API — 选项。 。 。 .
| 类别 | 类型/ 模式 | 文档 |
|---|---|---|
| 笛卡尔 | line, (中文(简体) ), area, (中文(简体) ), bar, (中文(简体) ), scatter, (中文(简体) ), pie | 线条 • 妇女 散开 |
| 财务 | candlestick, (中文(简体) ), ohlc | 烛台 |
| 科学 | heatmap, (中文(简体) ), band, (中文(简体) ), errorBar, (中文(简体) ), impulse | 热映射 |
| 备选案文 | 相上行/相下行 相上相下相上相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相相下相下相下相下相下相下相上相下相下相相上相相下相相下相下相下相下相上相下相下相下相下相下相下相下相下相下相下相相相下相下相相下相相下相下相相下相下相相下相下相相下相下相下相下相相相相相相相相相相相相 mode: 'density' | 图表 |
| 三维 | pointCloud3d, (中文(简体) ), surface3d | 三维 API |
多图( 共享设备)
对于一页上的三个或三个以上的图表,创建一个单一的适配器/设备/管道缓存并将其传递到每个 ChartGPU.create。图表不会销毁处置上的共享设备.
import { ChartGPU, createPipelineCache, connectCharts } from '@chartgpu/chartgpu';
if (!navigator.gpu) {
throw new Error('WebGPU not available');
}
const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
if (!adapter) throw new Error('No GPU adapter');
const device = await adapter.requestDevice();
const pipelineCache = createPipelineCache(device);
const ctx = { adapter, device, pipelineCache };
const a = await ChartGPU.create(document.getElementById('a')!, {
series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);
const b = await ChartGPU.create(document.getElementById('b')!, {
series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);
const c = await ChartGPU.create(document.getElementById('c')!, {
series: [{ type: 'line', data: { x: new Float64Array([0]), y: new Float64Array([0]) } }],
}, ctx);
connectCharts([a, b, c], { syncZoom: true });
// Optional: setRenderMode('external') + renderFrame() for a single app rAF loop
浏览器支持
仅限WebGPU. 无 WebGL 路径 .
| 浏览器 | 支助 |
|---|---|
| 颜色/边缘 | 113+ (英语) |
| 萨法里 | 18岁以上 |
| 火花 | Windows 114+; macOS 145+; Linux 不完整 — 见 gpuweb 状态 |
检测 navigator.gpu 在创建图表之前。 不要将一个不支持的用户留在空白的画布上, 没有UI.
如果您需要 Canvas/SVG 或双重WebGL+WebGPU 后端,请使用一个库来运送这些后退.
文档
| 资源 | 说明 |
|---|---|
| Docs 枢机 | 指南和系列文件 |
| 开始 | 安装和第一个图表 |
| API 参考 | create,选项,流出,交互,3D |
| 图表 | 系列、轴、互动 |
| 流线仪表板 | 多图共享设备 |
| 说明 | 线条、标记、标签 |
| 业绩 | 密度、采样、GPU共享 |
| 他们 | 暗/ 轻/ 自定义 |
| 建筑 | 渲染路径( repo) |
| 内部 | 贡献者 |
examples/ | 本地维特样本 |
npm install
npm run dev
# open the examples URL printed by the dev server
捐款
见 捐款额 财务报告和审定财务报表 文献/档案。 。 。 .
许可证
麻省理工学院. 免费供商业使用。 没有 npm 运行时间依赖性 .