Power BI SVG、HTML、Deneb圆角条形图对比

wujunmin

发布于 2025-05-04 04:48:46

9600

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

这是在Power BI 使用三种不同的技术手段实现的圆角条形图：

首先是SVG，图表度量值如下：

条形图.SVG = 
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='300' height='30' >
    <path d='M10 15L" & 290 * [销售业绩] / MAXX ( ALLSELECTED ( '店铺资料'[城市] ), [销售业绩] ) & " 15' fill='none' stroke='deepskyblue' stroke-width='20' stroke-linecap='round'/>
    <text x='298' y= '22' font-size='18' text-anchor='end'>" & FORMAT ( [销售业绩], "#,#" ) & "</text>
</svg>"

把度量值标记为图像URL放入表格使用。

接着是HTML，图表度量值如下：

条形图.HTML = 
"<p style='font-size: 15px;background: deepskyblue;width: " & [销售业绩] / MAXX(ALLSELECTED('店铺资料'[城市]),[销售业绩]) * 100 & "%; border-radius: 15px;white-space: nowrap;'>" & SELECTEDVALUE('店铺资料'[城市]) &" " &FORMAT([销售业绩],"#,#") & "</p>"

度量值放入HTML Content视觉对象展示：

最后是Vega Lite：

{
  "data": {
    "name": "dataset"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true,
        "cornerRadius": 100,
        "cornerRadiusEnd": 100,
        "color": "lightgray",
        "size": 12
      },
      "encoding": {
        "x": {
          "field": "KPI"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadius": 100,
        "cornerRadiusEnd": 100,
        "color": "deepskyblue",
        "size": 12
      },
      "encoding": {
        "x": {
          "field": "KPI__highlight"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 5,
        "color": "black",
        "fontSize": 14 
      },
      "encoding": {
        "x": {
          "field": "KPI__highlight"
        },
        "y": {
          "field": "城市"
        },
        "text": {
          "field": "KPI__highlight",
          "format": ".0f"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "城市",
      "type": "nominal",
      "axis": {
        "title": null,
        "domain": false,  
        "ticks": false,   
        "labelFontSize": 14 
      },
      "sort": {
        "field": "KPI__highlight",
        "order": "descending"
      }
    },
    "x": {
      "type": "quantitative",
      "axis": null,
      "scale": {
        "nice": true
      }
    }
  },
  "config": {
    "axis": {
      "grid": false
    },
    "view": {
      "stroke": "transparent"
    }
  }
}