# @chatwoot/viz 中文文档

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

版本：0\.1\.6
npm 元数据更新时间：2026-09-23T10:36:39.007Z
中文译文更新时间：2026-11-09T11:30:27.839Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：101 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=24\.4\.1
- 运行依赖：0 个
- peer 依赖：vue ^3\.5\.0
- 首次发布：2026-08-13T08:17:31.489Z
- 最新版本发布：2026-09-23T10:36:38.834Z
- 近 30 天下载量：100347（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

Chatwoot 的微小 Vue 图表组件

## 安装

```sh
npm install @chatwoot/viz
```

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

## README

# @chatwoot/viz (英语)

用于Vue 3.5+的小型,响应性的图表组件. 为 Chatwoot 所建,可访问的交互,丰富的 HTML 工具提示,没有运行时间图依赖性.

## 安装

```sh
pnpm add @chatwoot/viz
```

导入样式表一次, 然后导入所需的图表 :

```js
import '@chatwoot/viz/style.css'
```

```vue
<script setup>
import { LineChart } from '@chatwoot/viz'

const data = {
  categories: ['Week 1', 'Week 2', 'Week 3'],
  series: [{ id: 'resolved', label: 'Resolved', data: [12, 29, 23] }],
}
</script>

<template>
  <LineChart :data="data" aria-label="Resolved conversations by week" />
</template>
```

## 文档

-   [概览和发展](https://npmcn.com/package/%40chatwoot/viz/playground/docs/index.md)
-   [条形图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/bar.md)
-   [甜点图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/donut.md)
-   [热图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/heatmap.md)
-   [行图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/line.md)
-   [百分比图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/percentage.md)
-   [三键图](https://npmcn.com/package/%40chatwoot/viz/playground/docs/sankey.md)

## 代理技能

安装 [`chatwoot-viz` 技能](https://npmcn.com/package/%40chatwoot/viz/skills/chatwoot-viz/SKILL.md) 教授一个 兼容编码代理如何选择、配置、主题和测试这些图表 :

```sh
npx skills add chatwoot/viz --skill chatwoot-viz
```

## 游戏场

```sh
pnpm install
pnpm dev
```

打开 `/` 用于图表画廊或 `/bar`, (中文(简体) ), `/donut`, (中文(简体) ), `/heatmap`, (中文(简体) ), `/line`, (中文(简体) ), `/percentage`,以及 `/sankey` 可编辑的故事.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40chatwoot/viz/LICENSE)

## 常见问题

### @chatwoot/viz 是什么？

Chatwoot 的微小 Vue 图表组件

### 如何安装 @chatwoot/viz？

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

### @chatwoot/viz 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/chatwoot\_\_viz 是否存在。

### @chatwoot/viz 支持 ESM 还是 CommonJS？

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

### @chatwoot/viz 需要什么版本的 Node\.js？

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

### @chatwoot/viz 可以商用吗？

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

### @chatwoot/viz 的下载量有多少？

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

### @chatwoot/viz 还在维护吗？

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