canvas-design

star 4

工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。

railwise-cn By railwise-cn schedule Updated 3/2/2026

name: canvas-design description: 工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。

适用场景

  • 监测时序趋势折线图(沉降、位移、轴力随时间变化)
  • 基坑断面剖面示意图
  • 测点布置示意图
  • 多测点对比柱状图
  • 预警等级分布饼图/环形图
  • 报告中需要插入的任何工程图表

可用工具

chart_generator(SVG 趋势图生成)

系统内置的图表工具,专为监测时序数据设计。

参数说明:

参数 类型 说明
data 数组 时序数据,每条含 point_id/date/value
title 字符串 图表标题
alertThreshold 数字 报警阈值,显示为红色水平虚线
outputPath 字符串 SVG 输出路径

输出:800×400px SVG 文件,含多测点折线、图例、网格线和报警线。

图表设计规范

配色方案

趋势图使用以下 10 色系列区分不同测点:

#2563eb  蓝色(第1条线)
#dc2626  红色(第2条线)
#16a34a  绿色(第3条线)
#ca8a04  黄色(第4条线)
#9333ea  紫色(第5条线)
#0891b2  青色(第6条线)
#e11d48  玫红色(第7条线)
#65a30d  黄绿色(第8条线)
#c026d3  品红色(第9条线)
#ea580c  橙色(第10条线)

报警线固定为:#dc2626 红色虚线(stroke-dasharray: 6,4)

坐标轴规范

元素 规范
X 轴 日期或期次编号,间隔显示避免重叠(超过10个日期时旋转45°)
Y 轴 监测值,单位标注在轴标题中(如"累计变化量 (mm)")
网格线 浅灰色(#e5e7eb),水平网格线为主
刻度 自动计算合理间距,避免小数位过多

图表标题规范

格式:[监测项目] + [时间范围/描述]

示例:

  • 地表沉降监测趋势图(2025年1月-3月)
  • DB-01~DB-05 累计沉降量变化曲线
  • 第三道支撑轴力监测趋势图
  • 深层水平位移剖面图(CX-02,第15期)

图例

  • 位置:图表上方或右侧,不遮挡数据区域
  • 格式:线段颜色 + 测点编号
  • 当测点超过 6 个时,分两行显示

典型图表场景

沉降趋势图

调用 chart_generator,传入:
data: [
  { point_id: "DB-01", date: "2025-01-15", value: -2.3 },
  { point_id: "DB-01", date: "2025-01-22", value: -4.1 },
  ...
  { point_id: "DB-02", date: "2025-01-15", value: -1.8 },
  ...
]
title: "地表沉降监测趋势图"
alertThreshold: -30
outputPath: "./沉降趋势图.svg"

注意:沉降值通常为负数(向下为正),图表 Y 轴应体现方向性。

多期对比(需自行构造 SVG)

chart_generator 不满足需求时(如需要柱状图、剖面图),可直接编写 SVG 代码:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
  <!-- 标题 -->
  <text x="400" y="30" text-anchor="middle" font-size="16" font-weight="600">图表标题</text>
  <!-- 坐标系 -->
  <!-- 数据绑定 -->
</svg>

手写 SVG 时遵循以下规范:

  • viewBox 统一为 0 0 800 400(与 chart_generator 一致)
  • 字体使用 font-family="PingFang SC, Microsoft YaHei, sans-serif"
  • 数值文字使用 font-variant-numeric: tabular-nums

测斜仪深层位移剖面图

这类图表 chart_generator 不直接支持,需构造 SVG:

X 轴:位移量(mm),正方向为远离基坑方向
Y 轴:深度(m),从上到下递增(地面在顶部)
数据线:各期位移剖面,用不同颜色区分
标注:管口标高、地面标高、支撑位置(水平虚线标注)

报告中使用图表的规范

  1. 每张图必须有图号和图名:图 X-X [图名]
  2. 图表下方注明数据来源期次和日期
  3. SVG 输出后告知用户文件路径,用户可在 Word 中手动插入
  4. 一份日报通常包含 1-2 张趋势图,月报/总结报告包含 5-10 张
  5. 图表与正文分析必须对应——图中标注的异常点在正文中必须有解释

注意事项

  • chart_generator 输出纯 SVG 文件,可在浏览器直接打开预览
  • SVG 可无损缩放,适合打印;建议在报告中以 50%-75% 宽度插入
  • 超过 10 条测点线时图表会变得拥挤,建议分组出图(如按断面分)
  • 时序数据日期跨度超过 6 个月时,X 轴建议按月显示而非按日
  • 颜色选择需考虑黑白打印场景——重要的报警线使用虚线+标签双重标识
Install via CLI
npx skills add https://github.com/railwise-cn/RAILWISE-CLI --skill canvas-design
Repository Details
star Stars 4
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator