# @casoon/chartlet 中文文档

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

版本：0\.23\.0
npm 元数据更新时间：2026-10-29T12:23:30.629Z
中文译文更新时间：2026-11-09T13:06:50.094Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.7 MB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：0 个
- peer 依赖：astro \>=6\.0\.0
- 首次发布：2026-09-11T04:55:45.616Z
- 最新版本发布：2026-10-29T12:23:29.294Z
- 近 30 天下载量：2656（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 30 个）

## 中文简介

静态网站的构建时间 SVG 和 HTML 图表

## 安装

```sh
npm install @casoon/chartlet
```

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

## README

# @casoon/图

在 Astro 构建过程中构建静态,可访问的 SVG 或 HTML 图表 。 组件仅运行于 服务器和运入浏览器时没有图表 JavaScript .

软件包将编译的渲染器带入了WebAssembly,所以这是你安装的全部. 这需要 节点.js 22.12或更新.

```sh
npm install @casoon/chartlet
```

```astro
---
import Chart from '@casoon/chartlet/astro';
import chart from '../data/monthly-revenue.json';
---

<Chart id="monthly-revenue" spec={chart} />
```

`id` 在页面中必须是稳定和独特的。 它防止在下列情况下的可访问性ID相撞: 相同的规格被嵌入不止一次.

使用 `format="svg"` 仅用于图形或 `format="html"` 默认数字,标题, 源和数据表输出。 HTML 表格默认使用本地披露; 设置 `table="visible"` 以永久显示.

## 调色器 API

```js
import { renderChart } from '@casoon/chartlet';

const { content, warnings } = renderChart(spec, { format: 'svg', idPrefix: 'revenue' });
```

选项 : `format`, (中文(简体) ), `table`, (中文(简体) ), `idPrefix`, (中文(简体) ), `variant` (单位:千美元)`mobile` 使移动变体单独成为 SVG , (英语), `print` 图表为 SVG,带有PDF 和打印渲染器的字面颜色, `social` 图表 在1200×630画布上,用于打开图形图像, `strict` 财务报告和审定财务报表 `manifest` (单位:千美元)`true` 添加出处 `manifest` 图表 标准规格的SHA-256和 `content`,格式、变体、ID前缀和 警告,没有时间戳. `warnings` 持有 CLI 写入的行; 无效的规格 丢与 CLI 的信息。 输出与 `chartlet` CLI(英语:CLI).

`renderChartDetailed(spec, options)` 使用相同的参数,但不会丢入无效的 规格: 它返回 `{ ok, error?, warnings }` 与 `{ code, path, message }` 诊断, 加号 `content`, (中文(简体) ), `styleHashes` 财务报告和审定财务报表 `manifest` 当渲染成功时. `spec` 也许是JSON 语句.

`inspectChart(spec, { disable })` 运行 [检查](https://github.com/casoon/chartlet/blob/main/docs/guides/warnings-and-errors.md#inspections) 一种模型,不做它,因为 `chartlet inspect` 是否为: `{ ok: true, findings }` 与 `{ code, severity, path, message, hint }` 每项调查结果(`severity` 实值 `gap` 或者说 `hint`),或 `{ ok: false, error }` 无效的规格,不检查或未知类型 代码在 `disable`。 。 。 .

要使用已安装的 CLI 而不是 Web Assembly, 设置 `CHARTLET_BIN` 走向它的绝对路径 或通过 `binary`。 。 。 .

## 内容安全政策

内含图表样式 `<style>` 要素. `styleHashes` 列出他们的CSP来源 表达式 (`'sha256-…'`),按初次出现顺序排列 `style-src` 完全允许:

```js
const { content, styleHashes } = renderChart(spec, { idPrefix: 'revenue' });

headers.set('Content-Security-Policy', `style-src 'self' ${styleHashes.join(' ')}`);
```

Astro 在无引文的情况下采取散列:每页通过 `Astro.csp?.insertStyleHash(hash.slice(1, -1))`,或用于所有页 `security.csp.styleDirective.hashes`。 。 。 . `createRenderer` 返回同一字段.

## 互动模块

`@casoon/chartlet/interactive` 是一个不依赖图表的可选浏览器模块 执行 `hooks: true`: 有值(指针和键盘) 的横线, 系列切换, 滚动 电台和回放。 仅导入页面所用的特性 :

```js
import { enhance, crosshair, toggle } from '@casoon/chartlet/interactive';

enhance(document.querySelector('figure.chartlet-figure'), { crosshair, toggle });
```

它从数据表读取值,从几何学读取值 `data-*` 钩子,不需要内含脚本和 仅通过 CSSOM 设置样式。 见 [互动](https://github.com/casoon/chartlet/blob/main/docs/guides/interaction.md#optional-javascript)。 。 。 .

## 建筑建造器

`@casoon/chartlet/builder` 在代码中组装一个架构规格并返回为 普通对象用于 `renderChart`。ID是明确的或与 `id(...)`; 构件为 平面函数; `fanOut` 财务报告和审定财务报表 `fanIn` 用列表连接一个组件。 注射过两次 提及未申报的内容.

```js
import { architecture } from '@casoon/chartlet/builder';

const a = architecture();
const api = a.component('api', 'API');
const db = a.component('db', 'Orders', { kind: 'database' });
a.connect(api, db, { label: 'reads, writes' });
const spec = a.spec({ title: 'Orders' });
```

`flow()` 以同样的方式构建流程图,其中 `lane`, (中文(简体) ), `node`, (中文(简体) ), `group`同样的边缘呼叫, `mainPath` 财务报告和审定财务报表 `sameRank`。见 [Java 脚本运行时间](https://github.com/casoon/chartlet/blob/main/docs/guides/javascript.md#architecture-builder)。 。 。 .

## 云浮工人与维特

无法从字节编译 WebAssembly 的运行时间, 如工作字节, 导入模块并传递 给 `createRenderer` 从 `@casoon/chartlet/wasm`,它没有节点.js导入:

```js
import wasm from '@casoon/chartlet/chartlet.wasm';
import { createRenderer } from '@casoon/chartlet/wasm';

const { renderChart } = createRenderer(wasm);
```

在 Vite 浏览器的构建中, 从释放的 URL 中编译 :

```js
import wasmUrl from '@casoon/chartlet/chartlet.wasm?url';
import { createRenderer } from '@casoon/chartlet/wasm';

const { renderChart } = createRenderer(
  await WebAssembly.compileStreaming(fetch(wasmUrl)),
);
```

## 发展

`src/chartlet.wasm` 没有承诺. `npm run build:wasm` 盖起它 `wasm/` 货箱 仓库(目标) `wasm32-unknown-unknown`,优化为 `wasm-opt` 当它被安装的时候; `npm pack` 财务报告和审定财务报表 `npm publish` 先运行它.

## 常见问题

### @casoon/chartlet 是什么？

静态网站的构建时间 SVG 和 HTML 图表

### 如何安装 @casoon/chartlet？

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

### @casoon/chartlet 支持 TypeScript 吗？

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

### @casoon/chartlet 支持 ESM 还是 CommonJS？

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

### @casoon/chartlet 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @casoon/chartlet 可以商用吗？

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

### @casoon/chartlet 的下载量有多少？

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

### @casoon/chartlet 还在维护吗？

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