# @chartgpu/chartgpu 中文文档

规范地址：https://npmcn.com/package/%40chartgpu/chartgpu/

版本：0\.4\.0
npm 元数据更新时间：2026-08-03T11:25:19.292Z
中文译文更新时间：2026-11-09T11:04:20.850Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chartgpu/chartgpu
原文对照：https://npmcn.com/package/%40chartgpu/chartgpu/?lang=original
项目主页：https://github.com/chartgpu/chartgpu#readme
源码仓库：https://github.com/chartgpu/chartgpu

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：136 MB，483 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-02-11T14:59:16.156Z
- 最新版本发布：2026-08-03T11:25:19.129Z
- 近 30 天下载量：4173（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

高性能 WebGPU 绘图库

## 安装

```sh
npm install @chartgpu/chartgpu
```

也可以使用：`pnpm add @chartgpu/chartgpu`、`yarn add @chartgpu/chartgpu`、`bun add @chartgpu/chartgpu`

## README

![ChartGPU](https://npmcn.com/package/%40chartgpu/chartgpu/docs/assets/chartgpu.png)

WebGPU 图表库用于大型数据集,实时流线,多图仪表板,和3D系列. 麻省理工学院有执照 0 npm 运行时依赖性 .

[![npm](https://img.shields.io/npm/v/@chartgpu/chartgpu)](https://www.npmjs.com/package/@chartgpu/chartgpu) [![tests](https://img.shields.io/github/actions/workflow/status/chartgpu/chartgpu/tests.yml?branch=main&label=tests)](https://github.com/chartgpu/chartgpu/actions/workflows/tests.yml) [![MIT](https://img.shields.io/badge/license-MIT-yellow)](https://github.com/chartgpu/chartgpu/blob/main/LICENSE) [![docs](https://img.shields.io/badge/docs-getting%20started-blue)](https://chartgpu.io/docs/getting-started/) [![demo](https://img.shields.io/badge/demo-chartgpu.io-brightgreen)](https://chartgpu.io/) [![Featured in Awesome WebGPU](https://awesome.re/mentioned-badge.svg)](https://github.com/mikbry/awesome-webgpu)

[现场演示](https://chartgpu.io/) • 妇女 [文档](https://chartgpu.io/docs/) • 妇女 [API 密码](https://chartgpu.io/docs/api/) • 妇女 [实例](https://npmcn.com/package/%40chartgpu/chartgpu/examples/)

* * *

## 概览

图表GPU使图表与 **网络GPU** (不是Canvas2D或WebGL). 其目的是:

-   密集时间序列和数百万分系列
-   不断更新( E)`appendData` 具有可选环容量)
-   共用设备多图仪表板
-   2D 系列加 `cartesian3d` (单位:千美元)`pointCloud3d`, (中文(简体) ), `surface3d`(中文(简体) )

有一个 **没有WebGL/ Canvas 回落**。不支持的浏览器必须被主机应用程序打开.

* * *

## 演示

![ChartGPU demo](https://raw.githubusercontent.com/chartgpu/chartgpu/main/docs/assets/chart-gpu-demo.gif)

流出多图壁( 共享 GPU 设备) :

![Streaming multi-chart dashboard](https://npmcn.com/package/%40chartgpu/chartgpu/docs/assets/streaming-dashboard-example.png)

[流线仪表板](https://chartgpu.io/docs/streaming-dashboards/) • 妇女 [多图烹饪本](https://npmcn.com/package/%40chartgpu/chartgpu/docs/guides/multichart-dashboard-cookbook.md) • 妇女 [现场实例](https://chartgpu.io/#examples)

| 散点密度 | 烛台/ OHLC | 说明 |
| --- | --- | --- |
| ![Scatter density](https://npmcn.com/package/%40chartgpu/chartgpu/docs/assets/scatter-plot-density-chart-1million-points-example.png) | ![Candlestick](https://npmcn.com/package/%40chartgpu/chartgpu/docs/assets/candle-stick-example.png) | ![Annotations](https://npmcn.com/package/%40chartgpu/chartgpu/docs/assets/annotations.png) |

* * *

## 安装

```bash
npm install @chartgpu/chartgpu
```

也作为无范围出版 `chartgpu` (同为版本行. 反应绑定 : [`chartgpu-react`](https://github.com/ChartGPU/chartgpu-react) (单位:千美元)`npm i chartgpu-react @chartgpu/chartgpu`) (中文(简体) ).

### 最小示例

```ts
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可访问浏览器(参见 [浏览器支持](https://npmcn.com/package/%40chartgpu/chartgpu/#readme-browser-support)) (中文(简体) ).

* * *

## 特征

-   **流线** —— 说 `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 运行时依赖性。 麻省理工学院商业嵌入许可证.

结构注释 : [文献/档案](https://npmcn.com/package/%40chartgpu/chartgpu/docs/ARCHITECTURE.md). 业绩指南: [图gpu.io/docs/性能](https://chartgpu.io/docs/performance/). 他们: [图表gpu.io/文件/主题](https://chartgpu.io/docs/theming/)。 。 。 .

* * *

## 系列类型

完整选项 : [API — 选项](https://chartgpu.io/docs/api/options/)。 。 。 .

| 类别 | 类型/ 模式 | 文档 |
| --- | --- | --- |
| 笛卡尔 | `line`, (中文(简体) ), `area`, (中文(简体) ), `bar`, (中文(简体) ), `scatter`, (中文(简体) ), `pie` | [线条](https://chartgpu.io/docs/series/line/) • 妇女 [散开](https://chartgpu.io/docs/series/scatter/) |
| 财务 | `candlestick`, (中文(简体) ), `ohlc` | [烛台](https://chartgpu.io/docs/series/candlestick/) |
| 科学 | `heatmap`, (中文(简体) ), `band`, (中文(简体) ), `errorBar`, (中文(简体) ), `impulse` | [热映射](https://chartgpu.io/docs/series/heatmap/) |
| 备选案文 | 相上行/相下行 相上相下相上相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相下相相下相下相下相下相下相下相上相下相下相相上相相下相相下相下相下相下相上相下相下相下相下相下相下相下相下相下相下相相相下相下相相下相相下相下相相下相下相相下相下相相下相下相下相下相相相相相相相相相相相相 `mode: 'density'` | [图表](https://chartgpu.io/docs/charting/) |
| 三维 | `pointCloud3d`, (中文(简体) ), `surface3d` | [三维 API](https://chartgpu.io/docs/api/3d/) |

* * *

## 多图( 共享设备)

对于一页上的三个或三个以上的图表,创建一个单一的适配器/设备/管道缓存并将其传递到每个 `ChartGPU.create`。图表不会销毁处置上的共享设备.

```ts
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
```

食谱 : [多图烹饪本](https://npmcn.com/package/%40chartgpu/chartgpu/docs/guides/multichart-dashboard-cookbook.md) • 妇女 [流线仪表板](https://chartgpu.io/docs/streaming-dashboards/)。 。 。 .

* * *

## 浏览器支持

仅限WebGPU. 无 WebGL 路径 .

| 浏览器 | 支助 |
| --- | --- |
| 颜色/边缘 | 113+ (英语) |
| 萨法里 | 18岁以上 |
| 火花 | Windows 114+; macOS 145+; Linux 不完整 — 见 [gpuweb 状态](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status) |

检测 `navigator.gpu` 在创建图表之前。 不要将一个不支持的用户留在空白的画布上, 没有UI.

如果您需要 Canvas/SVG 或双重WebGL+WebGPU 后端,请使用一个库来运送这些后退.

* * *

## 文档

| 资源 | 说明 |
| --- | --- |
| [Docs 枢机](https://chartgpu.io/docs/) | 指南和系列文件 |
| [开始](https://chartgpu.io/docs/getting-started/) | 安装和第一个图表 |
| [API 参考](https://chartgpu.io/docs/api/) | `create`,选项,流出,交互,3D |
| [图表](https://chartgpu.io/docs/charting/) | 系列、轴、互动 |
| [流线仪表板](https://chartgpu.io/docs/streaming-dashboards/) | 多图共享设备 |
| [说明](https://chartgpu.io/docs/annotations/) | 线条、标记、标签 |
| [业绩](https://chartgpu.io/docs/performance/) | 密度、采样、GPU共享 |
| [他们](https://chartgpu.io/docs/theming/) | 暗/ 轻/ 自定义 |
| [建筑](https://npmcn.com/package/%40chartgpu/chartgpu/docs/ARCHITECTURE.md) | 渲染路径( repo) |
| [内部](https://npmcn.com/package/%40chartgpu/chartgpu/docs/api/INTERNALS.md) | 贡献者 |
| [`examples/`](https://npmcn.com/package/%40chartgpu/chartgpu/examples/) | 本地维特样本 |

```bash
npm install
npm run dev
# open the examples URL printed by the dev server
```

* * *

## 捐款

见 [捐款额](https://npmcn.com/package/%40chartgpu/chartgpu/CONTRIBUTING.md) 财务报告和审定财务报表 [文献/档案](https://npmcn.com/package/%40chartgpu/chartgpu/docs/ARCHITECTURE.md)。 。 。 .

## 许可证

[麻省理工学院](https://npmcn.com/package/%40chartgpu/chartgpu/LICENSE). 免费供商业使用。 没有 npm 运行时间依赖性 .

## 常见问题

### @chartgpu/chartgpu 是什么？

高性能 WebGPU 绘图库

### 如何安装 @chartgpu/chartgpu？

在项目目录运行 npm install @chartgpu/chartgpu，或使用 pnpm add / yarn add / bun add。

### @chartgpu/chartgpu 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @chartgpu/chartgpu 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @chartgpu/chartgpu 可以商用吗？

@chartgpu/chartgpu 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chartgpu/chartgpu 的下载量有多少？

根据 npm 官方下载统计，@chartgpu/chartgpu 在 2026/10/10 – 2026/11/08 这 30 天内被下载 4,173 次，日均约 139 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chartgpu/chartgpu 还在维护吗？

最新版本 0\.4\.0 发布于 2026/08/03（3 个月前）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/02/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。