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

推荐语

使用DeepSeek和SVG代码实现多峰图绘制的详细实践指南。

核心内容：
1. DeepSeek工具在SVG作图中的应用
2. 多峰图SVG代码编写和参数调整
3. 数据准备、过滤和轴坐标设置

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

这也是最近使用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再也不是一个很难的东西了~可以自己多多尝试