# @bezda/rhp 中文文档

规范地址：https://npmcn.com/package/%40bezda/rhp/

版本：2\.2\.0
npm 元数据更新时间：2026-10-27T21:11:43.223Z
中文译文更新时间：2026-11-08T11:18:50.156Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bezda/rhp
原文对照：https://npmcn.com/package/%40bezda/rhp/?lang=original
项目主页：https://rhp.vercel.app/
源码仓库：https://github.com/bezda-team/rhp

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

- 包体积（解压后）：608 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：solid-js ^1\.9\.0
- 首次发布：2023-10-30T19:10:17.888Z
- 最新版本发布：2026-10-27T21:11:43.018Z
- 近 30 天下载量：1792（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 8 个）

## 中文简介

rhp (反应性 html 地块): 地块作为叠叠相片,用从 HTML 元素和 CSS 中取出 SolidJS 来构建

## 安装

```sh
npm install @bezda/rhp
```

也可以使用：`pnpm add @bezda/rhp`、`yarn add @bezda/rhp`、`bun add @bezda/rhp`

## README

[https://github.com/user-attachments/assets/a2a87543-8e15-4739-aa47-8b4f75fa4c3c 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/user-attachments/assets/a2a87543-8e15-4739-aa47-8b4f75fa4c3c)

# rhp:活性html图

rhp 从 CSS 所放置的 HTML 元素中构建图表, 并带有 [固态JS](https://www.solidjs.com/),而不是把它们拖入 SVG 或画布. 你形容一个 **斜线**,用于一行数据的模板,来自几个 **块** (Bar, Dot, Tick, Label, Cell, Place, Area and Line),和rhp为每行画出一格并让每行保持一分一分的位置. 当一个值发生变化时,只读到它再次运行的内容,而一个块只写变化的 CSS 变量.

**指南、参考书目和实况图表库: [https://rhp.vercel.app (中文(简体) )](https://rhp.vercel.app/)**

## 安装

```sh
npm install @bezda/rhp
```

Solid是唯一的对等依赖,没有样式表可以导入:rhp在第一个图表出现时会添加它的 CSS. A Solid App's built (Vite, SolidStart, Astro) 将rhp的源头与该应用一起编译. 在其它任何地方,软件包都会选择一个现成的构件:一个用于浏览器,另一个用于节点,德诺和在服务器上绘制图表的工人.

-   **无构建步骤 :** 导入 `@bezda/rhp/standalone` 从一个CDN,一个包含Solid的模块(36 kB gzipped); [安装](https://rhp.vercel.app/start/install/#in-a-plain-html-page) 显示整个页面.
-   **反应 :** `@bezda/rhp-react`输入 [`react/`](https://npmcn.com/package/%40bezda/rhp/react/),将 Rhp 图表变成反应组件.

## 示例

条形图,作为固态应用程序 `App.jsx` (单位:千美元)[安装](https://rhp.vercel.app/start/install/#in-a-new-project) 启动新应用程序 :

```jsx
import { Chart, Plot, Bar, Label, slat } from "@bezda/rhp";

const Fruit = slat({ thickness: 32, room: { start: 80, end: 40 } }, (d) => (
  <div>
    <Label edge="start">{d.name}</Label>
    <Bar to={d.sold} />
    <Label at={d.sold}>{d.sold}</Label>
  </div>
));

export default function App() {
  return (
    <Chart scale={[0, 30]}>
      <Plot name={["Apples", "Bananas", "Cherries"]} sold={[12, 18, 7]}>{Fruit}</Plot>
    </Chart>
  );
}
```

绘图图的每个道克都是一列数据,每个分层将其行的值读取为: `d.name` 财务报告和审定财务报表 `d.sold`。 。 。 . [你的第一个图表](https://rhp.vercel.app/start/first-chart/) 一步一步地建立起来.

对于一个巨大的散块地块,实验 [`ManyDots`](https://npmcn.com/package/%40bezda/rhp/examples/manydots/README.md) 收藏使每个点的平版 HTML 点不使用 slat 或 Solid 计算. 它支持共享的造型,分类类,以及每个点的颜色,大小和形状. 明确选择,或保留 `Dot` 用于单个块和自定义的分层内容.

## 很高兴知道

-   图表是没有阴影根的平地 DOM : `querySelector`测试库和您的页面事件听众都工作.
-   斯拉特的CSS只达到自己的斯拉特,而页面的CSS无法改变图的布局. 写着 `noCssGuard` 离开保护范围,绘制得更快,因为CSS只保留其内容; `noCssGuard()` 用于页面上的每一张图表.
-   `slat(settings, fn)` 返回新函数, slat 类型,然后离开 `fn` 因此,一个函数可以使多个不同设置的slat类型. 给我点什么 `slat()` 返回 : `fn` 本身没有设置.

## 使用 AI 代理绘制图表

rhp与特工Skill和检查器相伴而来,所以从未见过rhp的AI编码代理可以一次进行rhp图.

-   **技术** (单位:千美元)[`skills/rhp/`](https://npmcn.com/package/%40bezda/rhp/skills/rhp/))教代理人如何构建图表,给它测试的图表页取自技术,并让它检查自己的工作. `npx skills add bezda-team/rhp` 将其安装到克洛德代码,代码,光标,副驾驶,双子座CLI等代理中.
-   **检查器** (单位:千美元)[`mcp/`](https://npmcn.com/package/%40bezda/rhp/mcp/))在浏览器中以桌面和电话宽度制作一个图表,并报告读者会打到什么,每个都有一个固定: `npx -y @bezda/rhp-mcp check chart.html`。没有参数,它是一个MCP服务器,有相同的检查.
-   **克劳德代码** 安装两个 `/plugin marketplace add bezda-team/rhp`,则 `/plugin install rhp@rhp`。 。 。 .

[以 AI 构建](https://rhp.vercel.app/ai/) 网站上有每个工具的设置和聊天应用的提示.

## 包裹里有什么

| 文件 |  |
| --- | --- |
| `dist/index.js` | 浏览器构建, 一个 ES 模块, 将 Solid 保留给应用程序 |
| `dist/server.js` | 服务器相同 |
| `dist/source/` | 源代码,用于 Solid app的自建设备(即 `solid` 出口条件) |
| `dist/standalone.js` | rhp 和 Solid 在一个模块中,用于没有构建步骤的页面 |
| `dist/rhp.css` | rhp 样式表,用于链接它本身的一页(`linkedCss()`(中文(简体) ) |
| `dist/rhp-no-css-guard.css` | 同样的没有警卫, 对于这样一个页 也呼叫 `noCssGuard()` |
| `dist/posters.css` | 画廊的海报外观,为 `<Poster>` (可选) |

## 发展

你需要22号节点或晚点.

```sh
npm install
npx playwright install    # the browsers the tests run in
npm run build             # dist/
npm test                  # builds the test pages and checks them in Chromium
```

|  |  |
| --- | --- |
| `npm run build` | 写入 `dist/` |
| `npm test` | 检查类型 `tsc`,然后用 Playwright 的 Chromium 测试页面. `BROWSER=webkit` 或者说 `BROWSER=firefox` 运行在引擎中; CI运行所有三个在每次拉取请求和运行 `master`。 。 。 . |
| `npm run gallery` | `examples/gallery/out/slat-gallery.html`,一页图 测试也检查 |
| `bench/` | rhp 对其它11个图表库:见 [`bench/README.md`](https://npmcn.com/package/%40bezda/rhp/bench/README.md) |
| `bench/ab/` | rhp 对自己不利(对 `master`),测量后,答案会停留在正在使用的机器上: [`bench/ab/README.md`](https://npmcn.com/package/%40bezda/rhp/bench/ab/README.md) |

代码 :

|  |  |
| --- | --- |
| `src/plot.jsx` | 图表、绘图、缩放、轴和主题 |
| `src/blocks.jsx` | 块 |
| `src/manydots.jsx`, (中文(简体) ), `src/manydots.css` | 实验散装 HTML 散装集及其窄几何规则 |
| `src/style.js` | cSS如何进入页面 : `slat()`, (中文(简体) ), `restyle()`定义 slat 的 CSS 和 CSS 的服务器 |
| `src/rhp.css` | 核心支助系统; `guard.css` (将页面的 CSS 保留在图表之外、 保留在 `noCssGuard`),以及 `gutters.css` 财务报告和审定财务报表 `cross.css`,当图表首次需要时添加 |
| `src/frame.js`, (中文(简体) ), `src/animate.js` | 当修改被写入时, JS 版本的时钟 |
| `src/data.js`, (中文(简体) ), `src/shape.js` | 数据助手和 `shape()` |
| `src/poster.jsx`, (中文(简体) ), `src/posters.css` | 海报及其外观 |
| `test/run.mjs` | 每一次检查,包括从服务器上抽取并在浏览器中接管的应用程序,以及从rhp源头构建的Vite应用程序 |

AI工具箱有自己的检查: `npm install` 财务报告和审定财务报表 `npm test` 内 `mcp/` 对照一组断开的图表、画廊的示例和每种配方运行检查器 `skills/rhp/recipes/`。 。 。 .

## 捐款

欢迎错误报告、提问和调取请求 [GitHub 图像](https://github.com/bezda-team/rhp)。 。 。 .

-   **错误 :** 打开一个显示它的最小图表(一个HTML文件是最好的),它发生的浏览器,以及你期望看到的东西.
-   **变化:** 打开拉动请求对 `master`。 。 。 . 运行 `npm test` 在你打开它之前 `npm test` 内 `mcp/` 当你改变技能, 食谱或检查器. CI在Chrimium,WebKit和Firefox对每个牵引请求进行相同的测试.
-   **一个固定** 用一个没有失败的检查最容易接受: 测试页面 `test/`,或一个断开的图表 `mcp/test/broken/` 检查机.
-   **食谱或技能的改变** 保持检查器干净 : `node mcp/bin/rhp-mcp.js check <file>` 报告技能检查宽度没有出错和警告.
-   写代码的方式 它周围的代码.

## 历史

版本2是重写 v1 ("react html glot"), 三包中的 React 库; v1 的代码在 [`v1` 分支](https://github.com/bezda-team/rhp/tree/v1)。 。 。 .

## 许可证

麻省理工学院,看 [自由主义](https://npmcn.com/package/%40bezda/rhp/LICENSE)。 。 。 . 有些文件来自其他地方,并保留自己的执照: [(简体中文)](https://npmcn.com/package/%40bezda/rhp/CREDITS.md)。 。 。 .

## 常见问题

### @bezda/rhp 是什么？

rhp \(反应性 html 地块\): 地块作为叠叠相片,用从 HTML 元素和 CSS 中取出 SolidJS 来构建

### 如何安装 @bezda/rhp？

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

### @bezda/rhp 支持 TypeScript 吗？

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

### @bezda/rhp 支持 ESM 还是 CommonJS？

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

### @bezda/rhp 可以商用吗？

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

### @bezda/rhp 的下载量有多少？

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

### @bezda/rhp 还在维护吗？

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