# @bitbaum/chartkit 中文文档

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

版本：0\.7\.0
npm 元数据更新时间：2026-10-29T18:37:33.988Z
中文译文更新时间：2026-11-08T04:33:42.433Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：183 kB，44 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2026-10-26T09:30:52.340Z
- 最新版本发布：2026-10-29T18:37:33.574Z
- 近 30 天下载量：4431（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

每个产品都有一个图表: 由符号驱动的SVG图表,在服务器上渲染出,读作表格,从不剪去标签——行,排行,共享栏,火花线,计分器,时间线,stat牌.

## 安装

```sh
npm install @bitbaum/chartkit
```

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

## README

# 图表

**每个位站产品都有一个图表.** 一条线, 排名栏, 共享栏, a 闪光线、计分器、时间线和一行数字——从服务器上绘制 从应用程序自己的标志, 每个都有一个表 后面没有标签 片段,重叠或收缩——所以一个被制成的固定件一次到达了每个产品.

为什么它存在:在2026-10-23年,车主说可视化是"超级" 和“它的包” 是什么让我们特别。" Substrata有一张手卷的行图,什么都没有 其他产品则无。 这是现在唯一活的地方. (颜色和类型来自 [`design-tokens`](https://github.com/bitbaum/design-tokens)· ; chartkit是图画. )

## 安装

```sh
pnpm add @bitbaum/chartkit@^0.7.0
```

安装 npm 的释放, 既不是承诺, 也不是分支, 原因就是聊天 README给出:一个成像范围就是让固定到达每个产品.

## 使用

```tsx
import { LineChart, BarChart, ColumnChart, ShareBars, Sparkline, Meter, Timeline, StatTiles } from "@bitbaum/chartkit/react";
import "@bitbaum/chartkit/styles.css";

<LineChart
  series={[{ id: "backlog", label: "Backlog", points: [{ x: "2025-Q1", y: 29, href: "…" }] }]}
  unit="GW"
  caption="GE Vernova Gas Power equipment backlog, GW, by quarter."
  yFrom="zero"                       // or "data"; left out, zero only when the data sits near it
  height={208}                       // CSS px; the width is the container's
/>
<LineChart                           // a year of daily closes: a clean line with a light fill
  series={[{ id: "close", label: "Close", points: closes }]}
  unit="USD"
  yFrom="data"
  markers="auto"                     // "all" (default) | "none" | "ends" | "auto"
  area                               // faint fill under the line, in the series' token colour
  caption="NVIDIA daily closes, USD, last 12 months."
/>
<BarChart rows={[{ label: "China", value: 900000, share: 0.99, estimated: true }, { label: "Other", value: null }]} unit="kg" caption="…" highlight="China" />
<ShareBars rows={[{ label: "BlackRock", share: 0.074 }]} other={0.926} otherLabel="Others, each below 5%" caption="…" />
<ColumnChart series={[{ id: "rev", label: "Revenue", points: [{ x: "FY2024", y: 61 }, { x: "FY2025", y: -4, href: "…" }] }]} unit="USD bn" caption="…" />
<Sparkline points={points} label="Backlog over six quarters" />
<Sparkline                           // a null breaks the line; a tone colours that point's dot
  points={[{ x: "2026-10-01", y: 4, tone: "positive" }, { x: "2026-10-02", y: null }, { x: "2026-10-03", y: 1, tone: "negative" }]}
  label="Mood over three days: one good, one unrecorded, one bad"
/>
<Meter value={12} max={12} label="Severity" href="/methods/severity" />
<Meter value={3} max={10} label="Risk" tone="negative" showValue={false} />  // the caller prints "3/10"
<Timeline events={[{ date: "2026-07-17", label: "…", tone: "down", href: "…" }]} caption="…" />
<StatTiles tiles={[{ label: "Bottlenecks mapped", value: 33, href: "/bottlenecks" }]} />
```

`x` 是一个 ISO 周期 (`2025`, (中文(简体) ), `2025-Q2`, (中文(简体) ), `2025-03`, (中文(简体) ), `2025-03-31`)或数字. 若干系列共用一轴——没有第二Y轴,永远不会有; 两种不同规模的度量衡是两个图表. `BarChart` 默认排行 (最大的第一,没有最后的数字) 不管他们到达的顺序,画一个 `null` 以"..."和"..."来估计. `ShareBars` 其余名称 `otherLabel` (left out,"Other")——说出剩下的是什么,从不赤裸 "其他87%". `ColumnChart` 按给定顺序绘制左到右的周期 (财政标签没有被重新排序),数个系列并列,损失低于 零行,表中缺少一个数字作为无列和"-". 每一点 `LineChart` 和每一事件 页:1 `Timeline` 当它有一个锚时 `href`及其价值、期限和 键盘和键盘焦点.

一个日期 `LineChart` 选择它的滴答,无论它有多少长度: 一个星期的数据,星期一一个月,几个月一年,几年几十年 最多5个,最短的一步 仍然给出3, 第一个标签和 每个新年的第一个年份命名该年。 轴从不空出: a 内部没有步骤的滴答被标记在它的两端.

`ColumnChart` 打印每个周期的标签。 当还有更多的时间 比剧情有空间, 每秒(第三,...)标签步骤后退,所以 在电话里,每年在电话上 桌面。 该步骤计划在服务器上为图宽和 用于轴上容器查询(无测量,无效果) 图表后面的表格仍然保留着每个时期。 只有一个标签比 整个情节被缩短了.

`markers` 表示一个值的哪个值 `LineChart` 带点 : `all` (默认, 和以前一样); `none` 单行; `ends` 只有每个系列的最后 数值; `auto` 每集最高60分,没有超过100分——每日250分 结为250颗珠是一串珍珠,而不是一串价格线. 一个值 他们的圆点仍然藏在那里:它的目标是一个全高的带子 平面图案(条状花砖,所以线上任何地方都能找到指针或指针) 来显示它的点,一个发线 光标和值。 图表后面的表格无论用哪种方式都具有价值. `area` 在该系列的每行下增加一个光填充 `--ck-series-*` 颜色——从不写字.

`Meter` 带 `tone` —— 说 `accent` (默认), `neutral`, (中文(简体) ), `positive`, (中文(简体) ), `warning` 或者说 `negative`每个 `--ck-*` 标志——和 `showValue={false}` 改为 当调用者已经打印出图时, 单独绘制音轨; 值 留在计数器的作用中`aria-valuenow`),名称和 `title`A级 `Sparkline` 点可能是 `y: null`,它打破了线 而不是绘制 零(两个空白之间的一个值是一个点),并可能带有 `tone` (单位:千美元)`positive`, (中文(简体) ), `warning`, (中文(简体) ), `negative`, (中文(简体) ), `neutral`颜色是它的点。 颜色 永远不是唯一的标志,在火花里说 `label` 这话是什么意思.

## 每个图表保证

-   **它使在服务器上.** 纯SVG和HTML,没有效果,没有测量. 画是伸到盒子上的 SVG (`preserveAspectRatio="none"`, (中文(简体) ), 每个标签都是HTML的,以折叠的比例表示, 所以一个320px的地块 和1440px的一样.
-   **任何事物都无法通过指针实现.** 每个图表都是 `<figure class="ck-chart">` 带有其标题和可视化的隐藏 `<table>` 会 议 日 程 和 议 程 相同值;装饰部分为 `aria-hidden`锚不是.
-   **没有标签夹或重叠.** 长名略去椭圆并 将全文带入 `title`;取而代之的是,柱子的长度很短,所以一年 或 月从不剪接; 条标签的列最少; 时间线事件 水沟的宽度和它的宽度一样 人数最多. `@bitbaum/chartkit/audit` 测量它(下).
-   **颜色和类型仅来自 `--ck-*` 变量**,默认为 设计托盘并可以设置一次 `:root`数字 : `--ck-ink`, (中文(简体) ), `--ck-ink-muted`, (中文(简体) ), `--ck-line`, (中文(简体) ), `--ck-bg`, (中文(简体) ), `--ck-accent`, (中文(简体) ), `--ck-up`, (中文(简体) ), `--ck-down`, (中文(简体) ), `--ck-series-1` . `-6`, (中文(简体) ), `--ck-font`, (中文(简体) ), `--ck-mono`序列按指数排列,永远不会 循环 第一次之后每个都有一线和一线 所以设定 在单色主题和打印中幸存下来。 前缀与 chalkkit 共享 目的: `--ck-line`, (中文(简体) ), `--ck-accent`, (中文(简体) ), `--ck-bg`, (中文(简体) ), `--ck-font` 财务报告和审定财务报表 `--ck-mono` 意思是两者都一样,所以一个应用 以他们聊天为主题 其图. 光明和黑暗都以象征形式存在.

## 审计

```ts
import { CHART_DEFECTS_SOURCE } from "@bitbaum/chartkit/audit";
const defects = await page.evaluate(`(${CHART_DEFECTS_SOURCE})(document.body)`);
if (defects.length) throw new Error(defects.join("\n"));
```

`findChartDefects(root)` 在页面中运行并返回每张图表 文本,其框会留下其图表,或与其它文本重叠在同一文本中 图表,每行一行。 阅读 CSS 没有找到这些; 写出这些单词 以真实宽度表示真实字体. `test/browser.mjs` 运行它过 以320、390和1280px在光和暗处演示,并首先刻意显示 破碎的图,以证明大门可能失败.

## 开发

```sh
pnpm install
pnpm run verify       # format:check, lint, typecheck, build, test, test:browser
pnpm run demo         # builds demo/dist; open demo/index.html
```

`test:browser` 需要铬: `pnpm exec playwright install chromium`,或设置 `CHROMIUM_PATH`。 。 。 . `dist/` 承诺如此 `github:` 安装不需要构建 步骤; `pnpm run check:dist` 说它是否匹配源.

对于比例,通过整体 `max`数字 : `<BarChart rows={[{ label: "Share", value: 1.6 }]} max={100} unit="%" caption="Share of the whole" />` 画一分一分一分 无 `max`栏杆相对最大的一行 尺度总是被扩展来适应更大的值;无效的或非正的最大值会倒回最大的一行. 可访问表格保留了原始值.

## App 语言

`LineChart`, (中文(简体) ), `ColumnChart` 财务报告和审定财务报表 `Timeline` 接受明确的BCP 47 `locale` (例如: `de-CH`;数字、日期、轴、工具提示和可访问的表格使用. 日期在协调世界时格式化,所以服务器时区不能移动一个报告日期. Omiting the locale 保留了现有的英语输出. 通过翻译 从应用程序的字典中 `periodLabel` 在线上/列上, `preliminaryLabel` 在行图上,和 `tableLabels: { date, event, effect }` 关于时间表。 这些标签为英语, 除非提供: 一种语言格式 数据,它不猜测产品复制.

```tsx
<LineChart series={series} caption="Umsatz" locale="de-CH"
  periodLabel="Zeitraum" preliminaryLabel="vorläufig" />
```

## 参考间隔、堆放和比例

`LineChart` 接受 `referenceBands={[{ from: 10, to: 20, label: "Expected interval" }]}`。 。 。 . 应用程序拥有间隔、标签和单位;图表扩展其尺度以包括 以文本的形式显示并披露准确的间隔。 无效/ 逆行失败 而不是沉默地呈现不同的间隔。 这是一个显示功能, 不是临床范围或医疗建议的来源.

`ColumnChart stacked` 从零向上和向下堆放正数. 轴包括累积总数;表格保留每个原始值, 包括缺失和零之间的区别。 默认值仍然分组.

`DoughnutChart` 带 `rows: { label, value, href? }[]`, (中文(简体) ), `caption`, (中文(简体) ), `unit?`, (中文(简体) ), `locale?`, (中文(简体) ), `labelHeading?` 财务报告和审定财务报表 `valueHeading?`它使成比例的戒指, 链接到传奇和精确值的可访问表。 价值必须是有限的,并且 非阴性。 空/ 零总画没有被发明的股份 。 颜色使用应用 符号; 传说链接仍然可以不依赖于切片而到达键盘 .

用于正则缩放,使用 `order="input"` 以保留行序列。 可选 横行 `tone` 数值(`positive`, (中文(简体) ), `warning`, (中文(简体) ), `negative`) 比较使用主题颜色 而不是硬编码的调色板 色调优先于突出颜色; 保留 有意义的文字标签,所以颜色从来不是唯一的表示.

`BarChart` 还接受 `locale` 用于可视化和可取数字格式, 财务报告和审定财务报表 `labels` (单位:千美元)`row`, (中文(简体) ), `value`, (中文(简体) ), `share`, (中文(简体) ), `note`, (中文(简体) ), `estimated`表格标题 并估计文本。 默认保存已存在的英文排名图表 。 对a 满意分配,通过总数 `max`,正文行并翻译 缩放标签;然后每个栏显示其在所有回复中的份额.

## 常见问题

### @bitbaum/chartkit 是什么？

每个产品都有一个图表: 由符号驱动的SVG图表,在服务器上渲染出,读作表格,从不剪去标签——行,排行,共享栏,火花线,计分器,时间线,stat牌\.

### 如何安装 @bitbaum/chartkit？

在项目目录运行 npm install @bitbaum/chartkit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bitbaum/chartkit 支持 TypeScript 吗？

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

### @bitbaum/chartkit 支持 ESM 还是 CommonJS？

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

### @bitbaum/chartkit 需要什么版本的 Node\.js？

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

### @bitbaum/chartkit 可以商用吗？

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

### @bitbaum/chartkit 的下载量有多少？

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

### @bitbaum/chartkit 还在维护吗？

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