Power BI 一行度量值绘制条形图

wujunmin

发布于 2025-02-10 16:53:31

3300

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

我这两年一直鼓吹DAX驱动可视化，有些人觉得实施有点繁琐，那么今天请大家欣赏一个简单到极致的作品：一行度量值绘制条形图。

新建一个度量值：

M.P.条形图原型 = "<p style='background: tomato;width: 100%;'>wujunmin<p>"

以上是HTML 文本的一个基础写法，把度量值放入HTML Content视觉对象，得到：

度量值指定了文本的宽度和背景色，所以只需要改变宽度（width）值，既可以实现类似条形图的效果：

现在进入真实的场景，文本的背景色宽度按数据大小自动变化，文本的内容为维度名称。

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

在HTML Content视觉对象拖入上方的度量值和维度：

得到：

以上一行度量值实现了维度标签内嵌的条形图（只支持正数，负数需要写更多逻辑）。如果仅仅是这样的效果，内置条形图也很容易实现，这里使用DAX的好处是可以各种加细节。

现在加一个圆角参数border-radius：

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

得到：

圆角参数的四个角弧度可以不一致，度量值变为：

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

得到：