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

rhp:活性html图

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

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

安装

npm install @bezda/rhp

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

• 无构建步骤 : 导入 @bezda/rhp/standalone 从一个CDN,一个包含Solid的模块(36 kB gzipped); 安装 显示整个页面.
• 反应 : @bezda/rhp-react输入 react/,将 Rhp 图表变成反应组件.

示例

条形图,作为固态应用程序 App.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。 。 。 . 你的第一个图表 一步一步地建立起来.

对于一个巨大的散块地块,实验 ManyDots 收藏使每个点的平版 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/)教代理人如何构建图表,给它测试的图表页取自技术,并让它检查自己的工作. npx skills add bezda-team/rhp 将其安装到克洛德代码,代码,光标,副驾驶,双子座CLI等代理中.
• 检查器 (单位:千美元)mcp/)在浏览器中以桌面和电话宽度制作一个图表,并报告读者会打到什么,每个都有一个固定: npx -y @bezda/rhp-mcp check chart.html。没有参数,它是一个MCP服务器,有相同的检查.
• 克劳德代码 安装两个 /plugin marketplace add bezda-team/rhp,则 /plugin install rhp@rhp。 。 。 .

以 AI 构建 网站上有每个工具的设置和聊天应用的提示.

包裹里有什么

发展

你需要22号节点或晚点.

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

代码 :

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

捐款

欢迎错误报告、提问和调取请求 GitHub 图像。 。 。 .

• 错误 : 打开一个显示它的最小图表(一个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 分支。 。 。 .

许可证

麻省理工学院,看 自由主义。 。 。 . 有些文件来自其他地方,并保留自己的执照: (简体中文)。 。 。 .