Instal·la
npx skillscat add hwy-game/metoai/chart-renderer Instal·la des del registre de SkillsCat.
SKILL.md
Chart.js 图表渲染
目标
把用户提供的数据整理成一次 render_chart 工具调用,让图表出现在当前 MessageList 消息下方。不要只输出 Markdown 表格来替代图表。
工具参数
必须传:
type:line、bar、pie、doughnut、polarArea、radar、scatter或bubbledata: 标准 Chart.js data 对象
可选传:
options: 标准 Chart.js options 对象title: 简短中文标题description: 一句话说明统计口径或时间范围height: 180 到 560 之间的数字,默认 300charts: 可选的图表数组,最多 4 个;使用charts时每一项都必须包含自己的type和data
优先使用一次 render_chart 调用中的 charts 数组生成多图表。单图表也可以继续直接传 type 和 data,以兼容旧调用。
如果用户同一轮需要多个图表,必须尽量合并到一次工具调用中,不要连续调用多次 render_chart。最多 4 个图表,超过 4 个时按用户最重要的指标合并或分批,并先说明限制。
布局规则
- 每个图表都占满整行宽度,单列自上而下排列,顺序即传入顺序
- 不要为了排版重复图表
- 多个指标需要分别展示时,使用一个
charts数组调用,不要连续调用工具
数据格式
分类图表使用:
{
"labels": ["一月", "二月", "三月"],
"datasets": [
{
"label": "销售额",
"data": [120, 180, 240],
"backgroundColor": "#2563eb",
"borderColor": "#2563eb"
}
]
}折线图和柱状图可以有多个 datasets。饼图和环形图通常使用一个 dataset:
{
"labels": ["华东", "华南", "华北"],
"datasets": [{
"label": "订单占比",
"data": [45, 30, 25],
"backgroundColor": ["#2563eb", "#16a34a", "#f59e0b"]
}]
}选择图表类型
- 时间趋势:
line - 分类对比:
bar - 构成占比:
doughnut或pie - 多维指标:
radar - 两个数值变量关系:
scatter - 三个数值变量关系:
bubble
约束
- 只传 JSON 可序列化值,不传函数、Date、undefined、DOM 节点或自定义类实例。
charts数量必须在 1 到 4 之间;每个图表都必须有合法的type和data。labels和datasets[].data的长度应一致;不要混用中文标签和缺失数据。- 数值缺失时使用
null,不要使用 NaN 或字符串数字。 - 工具调用失败时,读取返回的
error和retryable字段,立即修正参数并重试一次;不要结束当前任务。 - 多图表需求只调用一次工具,使用
charts数组,不要为每个图表分别调用工具。 - 如果用户没有提供足够数据,先说明缺少哪些字段,不要编造数值。