借助DeepSeek与SVG代码,轻松实现多峰图绘制的详尽实践指南。
核心要点:
1. DeepSeek工具在SVG图表制作中的核心应用
2. 多峰图SVG代码编写思路及参数微调技巧
3. 数据准备、过滤机制与坐标轴精准设定
这是近期探索AI辅助SVG可视化的小收获,整理成文,便于日后快速查用与复用。
最终效果展示

借助DeepSeek直接输出效果图的SVG代码,随后开展系统性参数调试

整体方法并不复杂:先让DeepSeek生成一个可运行的SVG基础模板,再依据实际数据特征和视觉需求,逐步优化各项参数。如果效果满意,即可实现批量化复用,提升工作效率。
原始数据准备

新建度量值与SVG模板
M.金额 = SUM('事实数据'[金额])SVG多峰分布图 =
VAR RowHeight = 400 // 图表整体高度(与图片高度对齐)
VAR FontSize = 12 // 文字大小
VAR TableWidth = 800 // 图表整体宽度
VAR VisibleRows = 1 // 仅显示单一图表区域(静态模式)
VAR TotalHeight = RowHeight // 总高度等同于图表高度
// 自定义配色体系
VAR BackgroundColor = "#f5f5f5" // 浅灰背景色
VAR PeakColor = "#ff69b4" // 峰值区域填充色(粉红)
VAR TextColor = "black" // 文字颜色
// 数据准备,假设数据表 '美妆数据' 包含 [类型] 与 [M.金额] 字段
VAR Data = ADDCOLUMNS(
SUMMARIZE(
'事实数据', // 请替换为实际数据表名
'事实数据'[类型], // 分类字段
"M.金额", [M.金额] // 对应的金额度量值
),
"RowIndex", RANKX(ALL('事实数据'), '事实数据'[类型], , ASC, Dense) // 为每条记录分配序号
)
// 过滤出有效数据记录
VAR ValidData = FILTER(Data, NOT(ISBLANK([M.金额])))
VAR RowCount = COUNTROWS(ValidData) // 有效数据条目数
// 无数据时的提示文案
VAR EmptyMessage = IF(
RowCount = 0,
"暂无可用数据 ",
""
)
// X轴与Y轴坐标位置(静态定义)
VAR XAxisY = 350 // X轴纵向位置
VAR YAxisX = 50 // Y轴横向位置
VAR ChartWidth = TableWidth - YAxisX - 50 // 图表有效宽度(预留边距)
// 绘制坐标轴线
VAR Axes =
" " &
" "
// 依据实际数据动态生成各个峰值图形
VAR Peaks = CONCATENATEX(
ValidData,
VAR XPosition = YAxisX + ([RowIndex] - 1) * (ChartWidth / (RowCount + 1)) // 每个峰值在X轴上的位置
VAR PeakValue = [M.金额] // 峰值对应的金额数值
VAR Category = [类型] // 峰值对应的分类名称
RETURN
" fill='" & PeakColor & "' opacity='0.7' />" &
"" & PeakValue & " " &
"" & Category & " ",
UNICHAR(10)
)
// 组合最终SVG结构
RETURN "data:image/svg+xml;utf8, width='" & TableWidth & "'
height='" & TotalHeight & "'
viewBox='0 0 " & TableWidth & " " & TotalHeight & "'
style='background:" & BackgroundColor & ";font-family:Segoe UI'>
" & Axes & "
" & Peaks & "
" & EmptyMessage & "
"代码中融入了几项关键设计:
1. 颜色、尺寸等参数均抽象为变量,便于后续统一调整与维护。
2. 数据为空时自动显示“暂无可用数据”,避免空白页面带来的困惑。
3. 峰值曲线采用贝塞尔曲线(C指令)绘制,相较于直线连接,视觉效果更加圆润自然。
新建卡片图,并将图像URL设置为上述SVG代码即可嵌入使用

简而言之,SVG制作不再是难以逾越的技术门槛。只要拥有数据和足够的耐心,结合AI工具的辅助,从初步生成、参数调试到最终嵌入报表,整个工作流程都能高效完成。多峰图仅是其中一个应用案例,即便是更换数据结构或调整配色方案,也能轻松演变出丰富多样的可视化形式。多尝试几次,总能找到最贴合自身需求的呈现方式。
