DeepSeek赋能SVG实践—多峰图展示

这也是最近使用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,
    "暂无数据",
    ""
)

// X 轴和 Y 轴坐标（静态定义）
VAR XAxisY = 350  // X 轴位置
VAR YAxisX = 50   // Y 轴位置
VAR ChartWidth = TableWidth - YAxisX - 50  // 图表宽度（留出边距）

// 绘制 X 轴和 Y 轴
VAR Axes = 
    "" & 
    ""

// 绘制高峰（基于数据动态生成）
VAR Peaks = CONCATENATEX(
    ValidData,
    VAR XPosition = YAxisX + ([RowIndex] - 1) * (ChartWidth / (RowCount + 1))  // 每个高峰的 X 位置
    VAR PeakValue = [M.金额]  // M.金额
    VAR Category = [类型]  // 类型
    RETURN 
        "
                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" />" & 
        "" & PeakValue & "" & 
        "" & Category & "",
    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 & "
    <!-- 装饰性边框 -->    
    
</svg>"

新建卡片图，设置图像URL为这段SVG代码即可

SVG再也不是一个很难的东西了~可以自己多多尝试