Loading [MathJax]/jax/output/CommonHTML/config.js
部署DeepSeek模型,进群交流最in玩法!
立即加群
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Power BI 环形图条形图组合

Power BI 环形图条形图组合

作者头像
wujunmin
发布于 2025-04-10 03:14:38
发布于 2025-04-10 03:14:38
12200
代码可运行
举报
文章被收录于专栏: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/06/26
00
Power BI 柱形环形组合图表
Power BI SVG、HTML、Deneb圆角条形图对比
wujunmin
2025/05/04
1120
Power BI SVG、HTML、Deneb圆角条形图对比
Power BI高级交互:比较两元素的差异
把度量值中的维度和指标替换为你模型中的数据,放入HTML Content视觉对象使用。
wujunmin
2025/04/04
1260
Power BI高级交互:比较两元素的差异
Power BI两两对比这样做
源自知识星球星友遇到的一个对比问题,本文使用一个度量值实现元素间两两对比,主要用来和优秀对标。示例是零售店铺之间的差异。
wujunmin
2022/07/13
1.3K0
Power BI两两对比这样做
Power BI 模拟网易居中条形图
在网易数读看到一个条形图,如下图右侧所示,特点有:类别标签居中,条形居中,带有背景阴影,条形和阴影均为圆角。
wujunmin
2022/12/13
5600
Power BI 模拟网易居中条形图
Power BI原生图表自定义填充图案
以上所有效果不依赖任何第三方视觉对象,完全使用Power BI内置图表生成,交互功能一个不少(比如工具提示),数据标签,条件格式也完全支持。这是怎么办到的?
wujunmin
2022/12/13
1.1K0
Power BI原生图表自定义填充图案
Power BI子弹图与折线组合
试想这样一个业务情景:有很多店铺需要展示每月业绩达成状况,又需要同时展示趋势。在Power BI矩阵中子弹图和折线组合是一种实现方式,DAX和SVG结合可以轻松实现。
wujunmin
2023/11/14
3750
Power BI子弹图与折线组合
Power BI 模拟AI跑分常用的图表
来源https://api-docs.deepseek.com/zh-cn/news/news250528
wujunmin
2025/06/21
320
Power BI 模拟AI跑分常用的图表
Power BI 图表空心化
本公众号已经分享了超过百种DAX+SVG自定义的图表,本文介绍如何将自定义图表空心化。所谓空心图表是指没有填充颜色,仅有边框颜色的图表。下图展示了条形图的空心效果:
wujunmin
2022/12/13
1.1K0
Power BI 图表空心化
Power BI数据+工作计划推送到手机
现在依据数据好坏为门店制定下一步工作计划。例如,点击宁波市江南路这一行,弹出对话框:
wujunmin
2025/04/30
620
Power BI数据+工作计划推送到手机
Power BI 按钮切片器制作居中条形图
现在使用DAX结合SVG/HTML设计图表时,几乎不用考虑样式问题,只需要实现基础的架构,好不好看交给AI改造就行了。把以上代码发给AI改造了一种华丽效果:
wujunmin
2025/06/16
620
Power BI 按钮切片器制作居中条形图
Power BI 切片器添加气泡图
wujunmin
2025/06/08
420
Power BI 切片器添加气泡图
Power BI图表虚线化
上一节讲了如何将图表空心化(Power BI 图表空心化),本节继续这个话题,将图表虚线化。虚线化,顾名思义,就是把图表的线条改为虚线。下图是气泡条件格式虚线后的样子:
wujunmin
2022/12/13
2K0
Power BI图表虚线化
Power BI 一行度量值绘制条形图
我这两年一直鼓吹DAX驱动可视化,有些人觉得实施有点繁琐,那么今天请大家欣赏一个简单到极致的作品:一行度量值绘制条形图。
wujunmin
2025/02/10
990
Power BI 一行度量值绘制条形图
从子弹图对比Power BI自定义图表的不同方式
SQLBI前几天出了一篇长文,对子弹图进行了深入的讲解。文章中有一个配图,体现了目前主流(不是全部)的自定义图表方式。借由这篇文章,我们可以对比下不同方式的优劣势。
wujunmin
2025/02/10
1770
从子弹图对比Power BI自定义图表的不同方式
Power BI 模拟VisActor子弹进度图
之前介绍过VisActor可视化库,本文开始第一个模仿:子弹图,效果如下图所示,条形为实际值,红色的图标像一个图钉,为目标值:
wujunmin
2024/01/24
2410
Power BI 模拟VisActor子弹进度图
Power BI 条形图动画标注异常
前期分享了如何在Power BI表格矩阵绘制条形图(参考:Power BI/Excel 表格条形图添加均值辅助线),加上动画可以进一步突出异常值,下方将业绩未达成的条形加上了闪烁效果。
wujunmin
2023/09/05
2810
Power BI 条形图动画标注异常
Power BI 卡片图平滑轮播
这里使用DAX+HTML实现,轮播原理为CSS动画,假设展示三个指标,度量值如下:
wujunmin
2025/04/29
780
Power BI 卡片图平滑轮播
霓虹灯数字时钟(可复制源代码)
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3c0nu17s7yck8
半夜喝可乐
2024/09/30
1000
霓虹灯数字时钟(可复制源代码)
Power BI模拟麦肯锡哑铃图表现差异
麦肯锡McKinsey Insights APP展示了一种直观表现差异的哑铃图,如下图所示。
wujunmin
2022/12/13
4940
Power BI模拟麦肯锡哑铃图表现差异
相关推荐
Power BI 柱形环形组合图表
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验