这也是最近使用AI工具进行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.金额] // 对应的M.金额
),
"RowIndex", RANKX(ALL('事实数据'), '事实数据'[类型], , ASC, Dense) // 为每一行分配排名
)
// 过滤有效数据
VAR ValidData = FILTER(Data, NOT(ISBLANK([M.金额])))
VAR RowCount = COUNTROWS(ValidData) // 实际行数
// 数据为空时的提示
VAR EmptyMessage = IF(
RowCount = 0,
"<text x='" & TableWidth/2 & "' y='" & TotalHeight/2 & "' font-size='" & FontSize & "' fill='gray' dominant-baseline='middle' text-anchor='middle'>暂无数据</text>",
""
)
// X 轴和 Y 轴坐标（静态定义）
VAR XAxisY = 350 // X 轴位置
VAR YAxisX = 50 // Y 轴位置
VAR ChartWidth = TableWidth - YAxisX - 50 // 图表宽度（留出边距）
// 绘制 X 轴和 Y 轴
VAR Axes =
"<line x1='" & YAxisX & "' y1='" & XAxisY & "' x2='" & TableWidth - 50 & "' y2='" & XAxisY & "' stroke='black' stroke-width='2' />" &
"<line x1='" & YAxisX & "' y1='50' x2='" & YAxisX & "' y2='" & XAxisY & "' stroke='black' stroke-width='2' />"
// 绘制高峰（基于数据动态生成）
VAR Peaks = CONCATENATEX(
ValidData,
VAR XPosition = YAxisX + ([RowIndex] - 1) * (ChartWidth / (RowCount + 1)) // 每个高峰的 X 位置
VAR PeakValue = [M.金额] // M.金额
VAR Category = [类型] // 类型
RETURN
"<path d='M " & XPosition & " " & XAxisY & "
C " & (XPosition + 50) & " " & (XAxisY - PeakValue * 4) & ",
" & (XPosition + 100) & " " & (XAxisY - PeakValue * 4) & ",
" & (XPosition + 150) & " " & XAxisY & "
L " & (XPosition + 150) & " " & XAxisY & "
L " & XPosition & " " & XAxisY & "'
fill='" & PeakColor & "' opacity='0.7' />" &
"<text x='" & (XPosition + 75) & "' y='" & (XAxisY - 30) & "' font-size='" & FontSize & "' fill='" & TextColor & "' dominant-baseline='middle' text-anchor='middle'>" & PeakValue & "</text>" &
"<text x='" & (XPosition + 75) & "' y='" & (XAxisY + 20) & "' font-size='" & FontSize & "' fill='" & TextColor & "' dominant-baseline='middle' text-anchor='middle'>" & Category & "</text>",
UNICHAR(10)
)
// 最终的 SVG 结构
RETURN "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
width='" & TableWidth & "'
height='" & TotalHeight & "'
viewBox='0 0 " & TableWidth & " " & TotalHeight & "'
style='background:" & BackgroundColor & ";font-family:Segoe UI'>
<!-- 坐标轴 -->
" & Axes & "
<!-- 高峰和标签 -->
" & Peaks & "
<!-- 数据为空时的提示 -->
" & EmptyMessage & "
<!-- 装饰性边框 -->
<rect width='100%' height='100%' fill='none' stroke='#555' stroke-width='1'/>
</svg>"新建卡片图，设置图像URL为这段SVG代码即可
SVG再也不是一个很难的东西了~可以自己多多尝试
