前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Power BI 环形图条形图组合

Power BI 环形图条形图组合

作者头像
wujunmin
发布于 2025-04-10 03:14:38
发布于 2025-04-10 03:14:38
8800
代码可运行
举报
文章被收录于专栏:wujunminwujunmin
运行总次数:0
代码可运行

效果如下图所示,条形图用来展示绝对值指标,环形图展示指标和目标对比的进度。

实现方式是SVG/HTML组合。HTML Content视觉对象如下拖拽字段:

图表度量值为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
M.P.环形图条形图 = 
VAR MaxSales = MAXX(ALLSELECTED('店铺资料'[城市]), [M.销售业绩])
VAR SalesPercentage = [M.销售业绩] / MaxSales * 100
VAR AchievementRate = [M.业绩达成率] 
VAR CityName = SELECTEDVALUE('店铺资料'[城市])
VAR SalesFormatted = FORMAT([M.销售业绩], "#,#")
VAR DonutChart = 
"<svg width='50' height='50' viewBox='0 0 42 42'>
    <circle cx='21' cy='21' r='15' fill='none' stroke='lightgrey' stroke-width='4'/>
    <circle cx='21' cy='21' r='15' fill='none' stroke='#2196F3' stroke-width='4' 
            stroke-linecap='round' stroke-dasharray='" & AchievementRate * 100 & ",100' transform='rotate(-90 21 21)'/>
    <text x='21' y='26' font-family='Arial' font-size='10'  text-anchor='middle' fill='#333'>" & 
        FORMAT(AchievementRate, "0%") & "</text>
</svg>"
--公众号wujunmin
VAR BarChart = 
"<div style='display: flex; align-items: center; width: 100%; gap: 10px;'>
    <div style='flex-shrink: 0;'>" & DonutChart & "</div>
    <div style='flex-grow: 1; position: relative;'>
        <div style='height: 30px; background: #f0f0f0; border-radius: 15px; overflow: hidden;'>
            <div style='height: 100%; width: " & SalesPercentage & "%; background: linear-gradient(90deg, #2196F3, #64B5F6); 
                        border-radius: 15px 0 0 15px; display: flex; align-items: center; padding-left: 15px; 
                        color: white; font-family: Arial; font-weight: bold; font-size: 15px;'>
                " & CityName & " " & SalesFormatted & "
            </div>
        </div>
    </div>
</div>"
RETURN BarChart

度量值中的前五个var换成你模型中的数据即可复用。把度量值扔给DeepSeek可以随意修改样式:

这种SVG+HTML组合图的实现方案其实不够简洁。更优的方案内置表格使用纯SVG,表格可以新增列,因此图表可以不停地横向扩充。

这里我把它分享出来是为了拓展可能性,有一天也许会在另外的场景发挥它的用处。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-04-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 wujunmin 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Power BI数据+工作计划推送到手机
现在依据数据好坏为门店制定下一步工作计划。例如,点击宁波市江南路这一行,弹出对话框:
wujunmin
2025/04/30
550
Power BI数据+工作计划推送到手机
霓虹灯数字时钟(可复制源代码)
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3c0nu17s7yck8
半夜喝可乐
2024/09/30
860
霓虹灯数字时钟(可复制源代码)
Power BI SVG、HTML、Deneb圆角条形图对比
wujunmin
2025/05/04
780
Power BI SVG、HTML、Deneb圆角条形图对比
销售排行榜这么做:Power BI绝对值和占比组合图
偶然间在网上看到一个研发费用图表,同时显示了各大公司的研发花费以及研发费用占营收的比例。个人认为这个图表非常实用,可以广泛应用于零售业各环节。比如,店铺销售排行榜和对公司的整体业绩贡献,产品销售排行榜和毛利贡献……
wujunmin
2022/05/19
1.5K0
销售排行榜这么做:Power BI绝对值和占比组合图
Power BI 卡片图平滑轮播
这里使用DAX+HTML实现,轮播原理为CSS动画,假设展示三个指标,度量值如下:
wujunmin
2025/04/29
610
Power BI 卡片图平滑轮播
Power BI 图表空心化
本公众号已经分享了超过百种DAX+SVG自定义的图表,本文介绍如何将自定义图表空心化。所谓空心图表是指没有填充颜色,仅有边框颜色的图表。下图展示了条形图的空心效果:
wujunmin
2022/12/13
1.1K0
Power BI 图表空心化
Power BI表格高级交互:分页浏览
当行数较多时,Power BI内置表格只能滚动条向下浏览。借助HTML,我们可以实现分页浏览。下图右下角显示了页码,点击任意数字即可跳转:
wujunmin
2025/04/02
700
Power BI表格高级交互:分页浏览
Power BI 标签倾斜式卡片图
主流的卡片图标签横平竖直,视觉疲劳。借助SVG,我们可以使用DAX绘制图表,轻松实现倾斜样式的卡片图,下图的左侧和右侧对城市标签进行了倾斜:
wujunmin
2025/02/10
960
Power BI 标签倾斜式卡片图
Power BI原生图表自定义填充图案
以上所有效果不依赖任何第三方视觉对象,完全使用Power BI内置图表生成,交互功能一个不少(比如工具提示),数据标签,条件格式也完全支持。这是怎么办到的?
wujunmin
2022/12/13
1.1K0
Power BI原生图表自定义填充图案
股市震荡,Power BI这么展示
图表中的卡片和柱形图都很常规,最下方的百分比堆积条形图有点特色。Power BI使用DAX可以轻松模拟,以下是我模拟的四种样式:
wujunmin
2025/04/09
860
股市震荡,Power BI这么展示
Power BI 模拟网易居中条形图
在网易数读看到一个条形图,如下图右侧所示,特点有:类别标签居中,条形居中,带有背景阴影,条形和阴影均为圆角。
wujunmin
2022/12/13
5500
Power BI 模拟网易居中条形图
Power BI同期对比这么看
同期对比常规状态下可以使用簇状条形图/柱形图,以下是Power BI内置图表的效果。
wujunmin
2022/05/19
1.6K0
Power BI同期对比这么看
Power BI 模拟VisActor子弹进度图
之前介绍过VisActor可视化库,本文开始第一个模仿:子弹图,效果如下图所示,条形为实际值,红色的图标像一个图钉,为目标值:
wujunmin
2024/01/24
2350
Power BI 模拟VisActor子弹进度图
Power BI 豪华动态业绩杜邦分析
杜邦分析法(DuPont analysis)是一种分析企业财务状况的方法,得名于美国杜邦公司。该思路可以应用于销售业绩分析。如下图模拟杜邦分析图对门店零售业务的业绩进行分解(参考:黄成明老师的《数据化管理》)
wujunmin
2025/03/18
1070
Power BI 豪华动态业绩杜邦分析
Power BI 一行度量值绘制条形图
我这两年一直鼓吹DAX驱动可视化,有些人觉得实施有点繁琐,那么今天请大家欣赏一个简单到极致的作品:一行度量值绘制条形图。
wujunmin
2025/02/10
700
Power BI 一行度量值绘制条形图
Power BI两两对比这样做
源自知识星球星友遇到的一个对比问题,本文使用一个度量值实现元素间两两对比,主要用来和优秀对标。示例是零售店铺之间的差异。
wujunmin
2022/07/13
1.3K0
Power BI两两对比这样做
Power BI图表虚线化
上一节讲了如何将图表空心化(Power BI 图表空心化),本节继续这个话题,将图表虚线化。虚线化,顾名思义,就是把图表的线条改为虚线。下图是气泡条件格式虚线后的样子:
wujunmin
2022/12/13
2K0
Power BI图表虚线化
Power BI 表格矩阵椭圆突出重点数据
Power BI表格效果如下图所示,将特别好或者特别差的数据使用椭圆框选出来。如何实现?
wujunmin
2022/12/13
4930
Power BI 表格矩阵椭圆突出重点数据
Power BI多指标排名寻找业绩机会点
一个店铺的一个指标数值通常没有价值,价值在比较中产生。我们常常通过指标排名来发现店铺优劣势。在表格中,一个指标一列,10个指标则新建10列进行排名。
wujunmin
2021/09/07
4760
Power BI模拟麦肯锡哑铃图表现差异
麦肯锡McKinsey Insights APP展示了一种直观表现差异的哑铃图,如下图所示。
wujunmin
2022/12/13
4810
Power BI模拟麦肯锡哑铃图表现差异
相关推荐
Power BI数据+工作计划推送到手机
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验