游乐游手机版
首页/AI热点日报/热点详情

DeepSeek结合SVG实现多峰图展示实践

类型:热点整理2026-06-01
利用DeepSeek先生成可运行的SVG多峰图模板,再根据实际数据与视觉需求逐项调整参数。颜色、尺寸等设为变量便于统一修改,数据为空时显示提示,峰值曲线采用贝塞尔曲线提升平滑度,最终嵌入报表卡片图即可复用。

借助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工具的辅助,从初步生成、参数调试到最终嵌入报表,整个工作流程都能高效完成。多峰图仅是其中一个应用案例,即便是更换数据结构或调整配色方案,也能轻松演变出丰富多样的可视化形式。多尝试几次,总能找到最贴合自身需求的呈现方式。

来源:https://www.53ai.com/news/neirongchuangzuo/2025032841238.html

相关热点

继续查看同栏目近期热点。

延伸阅读

补充最近整理过的热点入口。