# comark-charts 中文文档

规范地址：https://npmcn.com/package/comark-charts/

版本：0\.9\.0
npm 元数据更新时间：2026-11-03T06:22:32.033Z
中文译文更新时间：2026-11-03T09:08:11.322Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/comark-charts
原文对照：https://npmcn.com/package/comark-charts/?lang=original
项目主页：https://comark-ui.onmax.me/charts
源码仓库：https://github.com/onmax/comark-ui

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

- 包体积（解压后）：134 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：6 个
- peer 依赖：vue \>=3\.5，react \>=18，comark ^0\.8\.0，svelte \>=5，@comark/html ^0\.8\.0
- 首次发布：2026-10-21T07:57:44.248Z
- 最新版本发布：2026-11-03T06:22:31.710Z
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

解析时绘制到SVG的Markdown表中的图表，复制为PNG或数据：条形图、堆叠条形图、线条、区域、散点图、哑铃图、瀑布图、饼图、甘特图和sandkeys。表格保留在页面中，因此人们可以看到图表和agen

## 安装

```sh
npm install comark-charts
```

也可以使用：`pnpm add comark-charts`、`yarn add comark-charts`、`bun add comark-charts`

## README

# comark-charts

[![npm version](https://comark-ui.onmax.me/badge.svg?source=npm-version&package=comark-charts&icon=npm)](https://npmx.dev/package/comark-charts) [![npm downloads](https://comark-ui.onmax.me/badge.svg?source=npm-downloads&package=comark-charts&period=month&icon=npm)](https://npmx.dev/package/comark-charts) [![license](https://comark-ui.onmax.me/badge.svg?label=license&value=MIT)](https://npmx.dev/package/comark-charts) [![docs](https://comark-ui.onmax.me/badge.svg?label=docs&value=comark-ui.onmax.me)](https://comark-ui.onmax.me/charts/)

来自Markdown表的图表，在解析时绘制为SVG，复制为PNG或数据。表格保持在图表下面，所以人们看到图表，代理读取数字。一个 [Comark](https://comark.dev/) HTML, Vue， React和Svelte插件。

```sh
pnpm add comark @comark/html comark-charts
```

```ts
import { createHtmlRenderer } from "@comark/html";
import charts, { components } from "comark-charts/html";

const render = createHtmlRenderer({ plugins: [charts()], components });
```

```md
::chart{type="line" title="Coffee cups and commits, per month (r = 0.99)"}
| month | coffee cups | commits |
| --- | --: | --: |
| 2026-04 | 820 | 610 |
| 2026-05 | 890 | 640 |
| 2026-06 | 905 | 652 |
::
```

中间放一张桌子 `::chart` 和 `::`：一个标题行，然后每个点一行。第一列是x，其他每一列都是一系列数字，由标题命名。

| 道具 | 它是做什么的 |
| --- | --- |
| `type` | `bar`， `stacked`， `line`， `area`， `scatter`， `dumbbell`， `waterfall`， `pie`， `gantt`,或 `sankey`。默认的 `bar`。 |
| `x` | 沿着x轴的列。默认为第一个。 |
| `y` | 要绘制的列，用逗号分隔。默认每列 `x`。 |
| `title` | 图表的标题，以及屏幕阅读器的名称。 |
| `labels` | 在图表的条形、步骤或圆点上打印数字。没有价值。 |
| `horizontal` | 将条形条侧转，用于文件路径等较长的名称。没有价值。 |

用a标记值 [comark-annotate](https://comark-ui.onmax.me/annotate/) 后表注释： `at` 按x值和命名行 `series` 它的列，并且渲染器在条、点或切片周围绘制标记。

```md
:::annotation{at="2026-05" series="commits" mark="circle" color="green"}
The espresso machine arrives.
:::
```

对于任何其他图表，请键入a [Vega-Lite](https://vega.github.io/vega-lite/) 在表后面指定 `vega-lite` 块;表格就是它的数据。这个 [文档](https://comark-ui.onmax.me/charts/#usage) 显示每种类型所期望的表。

插件增加了每一个问题 `meta.issues`，因此主机可以在发布文档之前拒绝该文档。每个问题都命名了自己的图表，并说明了如何修复它。

## 如何呈现

[弗林特](https://github.com/microsoft/flint-chart) 把桌子变成了Vega-Lite规格的房子主题，然后 [维加](https://vega.github.io/) 在解析时、在服务器上或在构建时将其绘制为SVG，因此浏览器不运行图表代码。 `comark-charts/vue`， `/react`, `/svelte` 放置相同的SVG；标记，由mark-annotate组成，只在 `@comark/html`。

该页包含一个 `figure.cch` 将标题、SVG和表格折叠成 **数据**． 文本、轴和网格遵循next UI或shadcn/ UI的变量和共享 `--comark-*` 标记，所以图表可以随着页面的暗模式切换。系列带 `--comark-chart-1` 来 `-6`，然后是next UI `--ui-chart-1` 来 `-6`，然后是shadcn/ui's `--chart-1` 来 `-6`． 规则放在 `comark` CSS层，所以任何简单的规则你自己的胜利；请看图表。” [主题页面](https://comark-ui.onmax.me/charts/#theme)。

mark-ui代理技能包括图表；安装时使用 `vp dlx skills add onmax/comark-ui`，或者将它捆绑到你自己的应用程序中 `comark-ui/skills/comark-ui/`。 `vp` 附带 [轻快地+](https://viteplus.dev/guide/global-cli);没有它, `pnpm dlx` 采用相同的参数。

## 常见问题

### comark-charts 是什么？

解析时绘制到SVG的Markdown表中的图表，复制为PNG或数据：条形图、堆叠条形图、线条、区域、散点图、哑铃图、瀑布图、饼图、甘特图和sandkeys。表格保留在页面中，因此人们可以看到图表和agen

### 如何安装 comark-charts？

在项目目录运行 npm install comark-charts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：comark（^0\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### comark-charts 支持 TypeScript 吗？

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

### comark-charts 支持 ESM 还是 CommonJS？

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

### comark-charts 需要什么版本的 Node\.js？

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

### comark-charts 可以商用吗？

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

### comark-charts 还在维护吗？

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