# @aparte/plugin-chartjs 中文文档

规范地址：https://npmcn.com/package/%40aparte/plugin-chartjs/

版本：1\.0\.2
npm 元数据更新时间：2026-11-08T11:09:01.938Z
中文译文更新时间：2026-11-08T05:31:52.668Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40aparte/plugin-chartjs
原文对照：https://npmcn.com/package/%40aparte/plugin-chartjs/?lang=original
项目主页：https://apartejs.dev/guides/charts/
源码仓库：https://github.com/apartejs/aparte

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

- 包体积（解压后）：165 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- peer 依赖：chart\.js \>=4\.4\.0 \<5\.0\.0，@aparte/core \>=1\.0\.2 \<2\.0\.0
- 首次发布：2026-10-31T19:08:32.414Z
- 最新版本发布：2026-11-08T11:09:01.572Z
- 近 30 天下载量：1893（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

通过 Chart.js 来表示区别的图表——一个 Chart.js 配置一个模型写作,或者一个工具返回,在它流出时绘制.

## 安装

```sh
npm install @aparte/plugin-chartjs
```

也可以使用：`pnpm add @aparte/plugin-chartjs`、`yarn add @aparte/plugin-chartjs`、`bun add @aparte/plugin-chartjs`

## README

# @ aparte/ 插图图

图表 [独立](https://github.com/apartejs/aparte) 通过 [图.js](https://www.chartjs.org/)。 。 。 . 模型中的图.js配置 ` ```chartjs ` 栅栏,或工具返回,是 绘制为图表 —— 因为它流出, 哪个 Markdown 提供者安装, 或者没有 .

![A Chart.js line chart drawn from a fence, in an aparté chat](https://apartejs.dev/shots/chartjs.png)

```bash
npm install @aparte/plugin-chartjs @aparte/core chart.js
```

```ts
import { setupChartjs } from '@aparte/plugin-chartjs';

setupChartjs();
```

`@aparte/core` 财务报告和审定财务报表 `chart.js` (4.4或以后,以下为5个) **同行依赖关系**。图.js是 在第一个图表上加载,不是在之前,一个图表只有在接近屏幕时才被绘制出来, 所以重开长话短说.

## 栅栏

尸体是Chart.js自己的配置, `{ type, data, options }`作为JSON——一个模特儿可以 学习。 两者 ` ```chartjs ` 财务报告和审定财务报表 ` ```chart.js ` 绘制(`CHARTJS_LANGUAGES`) (中文(简体) ).

````md
```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{ "label": "Sales", "data": [12, 19, 7] }]
  },
  "options": { "plugins": { "title": { "display": true, "text": "Sales by month" } } }
}
```
````

虽然答复流出,但该图表是从JSON的到来部分重新绘制的,最多是 每300 ms, 只有当到达时, 才能改变图表—— 所以它的线条或分点显示为 是模特儿写的 在它的第一点之前,它是一个安静的盒子,这个盒子的体积与图表的大小相同。 一次 栅栏关闭, 一个不是图表的身体 显示一个注释及其来源.

## 返回图表的工具

将结果为 Chart.js 配置的工具命名, 并绘制图表取而代之 行数:其 `structuredContent`,否则其文本读作JSON. 一个静静的盒子在呼叫运行时显示; 拒绝或失败的电话则显示一行.

```ts
setupChartjs({ tool: ['plot_sales', /^chart_/] });
```

返回自己的数据而不是图表的工具需要 `map` -结果和呼叫 输入,一个图.js 配置

```ts
setupChartjs({
  tool: 'get_revenue',
  map: (result, input) => {
    const rows = result as Array<{ month: string; total: number }>;
    return {
      type: 'line',
      data: {
        labels: rows.map((r) => r.month),
        datasets: [{ label: String(input.region ?? 'Revenue'), data: rows.map((r) => r.total) }],
      },
    };
  },
});
```

## 聊天的样子

如果一个配置不包含它们, 图表会占用聊天的符号: text in `--aparte-text`键 选项和标题 `--aparte-text-muted`中,网格和轴线 `--aparte-border`,工具提示打开 `--aparte-surface-1`,聊天的字体,和透明的背景。 每个配置集的值 自己赢了。 轻型/暗式开关(`data-aparte-theme`,或系统的颜色方案) 重新主题 每个图表都放在原地,不再绘制.

无自有颜色的数据集被其系列所取色: `--aparte-primary` 首先,然后是一个 一组固定的八块花被选择在光和暗上读取(蓝、橙、水、黄、红花等), 绿色 紫色 红色 `SERIES_HUES`) (中文(简体) ). 放弃了可以选取的主音 接下来每个 系列是第一个明显区别于它之前的, 在正常的视觉和下 模拟出蛋白质氨酸和去子氨酸. 在已变音的文字中绘制出上一行字串 颜色而不是回收的: 分组此类序列( “ 其他” ) . `seriesPalette(primary)` 返回该列表.

相同的主题是一个纯粹的函数,所以您可以检查一个配置——或者一个主题来查看您的图表 拥有——没有DOM:

```ts
import { themeChartjsConfig, seriesPalette } from '@aparte/plugin-chartjs';

const config = { type: 'bar', data: { labels: ['Jan', 'Feb'], datasets: [{ data: [12, 19] }] } };
const themed = themeChartjsConfig(config, {
  text: '#241f2b', muted: '#6d6479', border: '#e5ddce', surface: '#fffdf8',
  background: '#f6f2ea', primary: '#b07d33', fontFamily: 'Inter, sans-serif',
});
seriesPalette('#b07d33'); // ['#b07d33', '#2a78d6', '#199e70', …]
```

`ChartjsTokens` 是第二个论点的形状.

## 大小

一张图填满了气泡的宽度,直到 `40rem`,高度为 `18rem`设置高度与 `height` 选项,或者插件在自定义属性上的 CSS 读取 :

```css
.aparte-chartjs {
  --aparte-chartjs-height: 22rem;
  --aparte-chartjs-max-width: 48rem;
}
```

设定的配置 `aspectRatio` (持有时间为1:4至4:1)或 `maintainAspectRatio: true` 作为 它的宽度是很高的 插件将每个图表与框架本身相匹配, 并有一个 `ResizeObserver` 并公布图表`chart.destroy()`一旦它离开了 页: 1 `responsive` 模式每张图表将整个文档设置一个观察员并保留一个 图表从页面取出,直到被销毁。 稍后会收到消息的图表(列表) 虚拟化其行,重开对话)一旦有大小就再次被绘制 最后32人被释放 被监视着 一个写着 `responsive: false` 保持大小 Chart.js给它.

## 无障碍

一个图表是 `figure` - 形状和 `@aparte/plugin-echarts` 图表——以其名称命名 (单位:千美元)`options.plugins.title.text`),其他聊天语言中的"Chart". 在其中,画布是 `role="img"` 它的数据是同名的,在画布旁,可视地隐藏着它作为一个表格的数据——a 每个标签行,每个有数据的数据集一列——用于屏幕阅读器. (不在画布里作为 倒闭内容:图像的孩子是呈现性的,所以屏幕阅读器永远无法到达 桌子那边。 ) 表格以50个数据集列和10 000个单元格停止,无论配置要求如何; a 最后一行,也隐藏,当它只列出部分数据时。 下 `prefers-reduced-motion`, (中文(简体) ), 没有动画。 仍然到达的海图从不出现,除非其 配置要求动画——没有动画循环永远: `loop` 从每个 动画一个配置集.

它以十种语言从语言中取出默认读取的词; 设置其中任何一种 `extendLocale()`数字 :

```ts
aparteGlobalConfig.extendLocale({
  chartjsChart: 'Figure',                          // the name of a chart with no title
  chartjsError: 'This chart could not be drawn.',  // the note over a fence that is not a chart
  chartjsUnavailable: 'Chart not available',       // a chart tool refused or failed
  chartjsSeries: 'Series {n}',                     // a table column for a dataset with no label
  chartjsTableCut: 'Only part of the data is listed.', // the table's last line, when it is cut
});
```

## 警卫

配置来自一个模型或工具,因此被视为不可信数据:

-   **里面什么都没有变成HTML.** Chart.js在画布上绘制标题,标签和工具提示. 这个 配置到页面标记一次, 因为图上的属性的逃出值 元素(一个栅栏手心标记,而非节点标记),数据表按每个值写入 逃脱了.
-   **没有代码可以到达.** JSON 没有函数, 所以没有回调、 可脚本选项或工具提示 `external` 处理器可以被通过——在其中,图.js呼唤它发现的东西,在每一个盘旋上,a 替换字符串:工具提示 `external`, (中文(简体) ), `filter`, (中文(简体) ), `itemSort` 财务报告和审定财务报表 `callbacks`,则 图例标签' `generateLabels`, (中文(简体) ), `filter` 财务报告和审定财务报表 `sort`工具提示 `position` 其他 `average` 或者说 `nearest`。这个配置本身 `plugins` 列表已全部删除 : 图.js 运行 条目的钩子,而来自JSON的条目是一个没有功能的对象,所以列表可以做到 没有,也没有移交。 插件的选项 _你们_ 登记 (单位:千美元)`options.plugins.legend`, (中文(简体) ), `.title`, (中文(简体) ), `.tooltip`)保留.
-   **没有图像 没有请求.** A 类 `pointStyle` 绘制为图像时 `HTMLImageElement` 或者画布,只有代码才能制作 关键词图.js要求 对象(`toString`, (中文(简体) ), `valueOf`)被删除,如同 `__proto__`, (中文(简体) ), `prototype` 财务报告和审定财务报表 `constructor`。 。 。 .
-   **浏览器无法分配到任何东西 .** `options.devicePixelRatio` 被丢弃, `options.aspectRatio` 以 1: 4– 4:1 为标准 `ticks.count` 财务报告和审定财务报表 `ticks.maxTicksLimit` 改为 100 (图.js 使勾点数量与 `count` 说,一张图表最多可携带5000个点 最多5000个标签和5000个数据集(`maxPoints` 将所有三个都限制在内)——和一个地方 `Intl` 拒绝被丢弃,而不是被丢弃到每一滴.

一个配置图.js仍然拒绝——一个类型是您的 `Chart` 未注册, 时间尺度为无 日期适配器——显示音符,并在控制台上警告一次.

## 选项

`setupChartjs(options?, config?)` 带 `ChartjsOptions`数字 :

| 选项 | 默认 |  |
| --- | --- | --- |
| `progressive` | `true` | `false` 栅栏关闭后绘制图表 |
| `height` | `'18rem'` | 图表的高度,作为 CSS 长度 |
| `tool` | —— 说 | 将结果绘制为图表的工具:名称、RegExp或列表 |
| `map` | —— 说 | `(result, input) => config`,用于返回自身数据的工具 |
| `maxPoints` | `5000` | 图表可能携带的最多数据点,所有数据集并存——和最多的标签和数据集 |

`readChartConfig(value)` 是读取器使用两种路径: 已复制并无害化的配置 以上,或 `null` 当它不是一个图.js可以绘制. `ChartjsConfig` 是它的类型.

## 两个切入点

`@aparte/plugin-chartjs` 进口 `chart.js/auto` ——每个已注册的图表类型,比例和插件—— 在第一个图表。 只能用你的海图 把这些部分登记在海图上 `Chart` 并把它交给通过 进口没有从 `chart.js`数字 :

```ts
import {
  Chart, BarController, LineController, BarElement, LineElement, PointElement,
  CategoryScale, LinearScale, Legend, Title, Tooltip,
} from 'chart.js';
import { setupChartjsWith } from '@aparte/plugin-chartjs/core';

Chart.register(
  BarController, LineController, BarElement, LineElement, PointElement,
  CategoryScale, LinearScale, Legend, Title, Tooltip,
);
setupChartjsWith(Chart, { tool: 'plot_sales' });
```

`setupChartjsWith` 拿着 `Chart` 类,或 a `ChartjsLoader` 函数返回承诺 它的,或载着它的一个舱室的`() => import('chart.js/auto')`) (中文(简体) ). 任何构造像 `ChartjsConstructor` 并返回 a `ChartjsChart` (单位:千美元)`options`, (中文(简体) ), `data`, (中文(简体) ), `update`, (中文(简体) ), `resize`, (中文(简体) ), `destroy`会的。 您没有注册的类型的图表显示注释。 两个函数返回 a 处置者对制作者不进行登记,并释放所绘制的每一张图表.

插件从不触碰 `Chart.defaults`: 页面上的其他图表不是聊天的, 所以每个 图表会用它自己的配置来查看聊天.

仅限无害环境管理.

## 常见问题

### @aparte/plugin-chartjs 是什么？

通过 Chart\.js 来表示区别的图表——一个 Chart\.js 配置一个模型写作,或者一个工具返回,在它流出时绘制\.

### 如何安装 @aparte/plugin-chartjs？

在项目目录运行 npm install @aparte/plugin-chartjs，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：chart\.js（\>=4\.4\.0 \<5\.0\.0）、@aparte/core（\>=1\.0\.2 \<2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aparte/plugin-chartjs 支持 TypeScript 吗？

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

### @aparte/plugin-chartjs 支持 ESM 还是 CommonJS？

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

### @aparte/plugin-chartjs 需要什么版本的 Node\.js？

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

### @aparte/plugin-chartjs 可以商用吗？

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

### @aparte/plugin-chartjs 的下载量有多少？

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

### @aparte/plugin-chartjs 还在维护吗？

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