Chart Renderer Open — 图表 渲染器 Open

图表 渲染器 Open

A modular, registry-driven 图表 生成器 for AI 代理s. Produces self-contAIned HTML pages with styled 图表s and tables — no backend required.

De签名 philosophy: Only load the CSS/JS/docs for 图表 types actually used, minimizing 令牌 waste. All in格式化ion is statically readable with no hover dependency.

AvAIlable 图表 Types type Name Description heatmap Matrix Heatmap Table Multi-row x multi-column numeric matrix with color-coded cells, change arrows, and trend badges layered Tiered Category Cards Three-tier color-coded cards (green/blue/red) for categorizing items by performance level direction Recommendation Cards Dual-column cards with auto-matched icons and color themes line Multi-series Line 图表 图表.js multi-line 图表 with optional data labels dualAxis Dual-axis Line 图表 图表.js dual Y-axis: primary series (area fill) + secondary series (dashed line) table Styled Table 清理 white-background table with auto-coloring for ↑/↓ prefixed cells text Text Block Colored callout blocks: 成功 (green) / 警告 (yellow) / danger (red)

Full data 格式化 specs are in templates/types/{type}.md — read on demand.

Execution Steps Step 1: Determine required types

Based on the user's 请求, select the needed 图表 types from the table above.

Step 2: Read on demand Read 技能s/图表-渲染器-open/templates/registry.json for file m应用ings Read 技能s/图表-渲染器-open/templates/图表_page.html for the page skeleton Read 技能s/图表-渲染器-open/templates/types/core.css for 分享d styles For each needed type, read its .md file for data 格式化, its .css and .js for rendering code When multiple types 分享 a file (e.g., line and dualAxis 分享 图表.css/图表.js), do not re-read Step 3: Assemble data

Build the CFG and SECTIONS data structures per the .md 格式化 specs.

Data injection uses JSON. The skeleton template loads data via