Power BI ----SVG(圆环图)

圆环图助力矩阵图


  SVG是什么鬼,在现在的Web世界中越来越凸显这一标准的优势。关于SVG,我们只需要知道一点就好 ---- SVG 意为可缩放矢量图形(Scalable Vector Graphics)。它是使用 XML 格式定义的图像。
  由此我们就可以知道SVG是可以通过文本来定义图形的。(XML也是文本,只不过是按照某种约定编写的文本,好让浏览器知道如何把文本解析成图形)

  关于SVG的各种图形代码,参考如下链接:SVG教程。今天这里讲解圆环图。

直接看下面实例图:
 在矩阵图中放置环形图,使得数据更直观

在这里插入图片描述

定义度量值

定义完成率度量值

销售额完成率 = 
	DIVIDE(
		CALCULATE(
			sum('目标数据'[月度销售额已完成])),
			CALCULATE(SUM('目标数据'[月度销售额目标])),
			0
		)

对度量值SVG话

圆环图 SVG = 
//定义变量 PercentValue,用于存储三天内发货率的百分比值。如果这个值大于 0.9999,就将其设为 0.9999,以避免出现满圆的情况。
VAR PercentValue = IF([销售额完成率] > 0.9999, 0.9999, [销售额完成率])
//定义变量 PercentA,用于将百分比值转换为角度值。
VAR PercentA = PercentValue * 360
//定义变量 CirclePercent,用于计算饼图中绿色部分的扇形的中心角度。
VAR CirclePercent = 180 - PercentA
//定义变量 ShortDistance,用于判断扇形是否大于半圆。
VAR ShortDistance = IF(CirclePercent < 0, 1,0)
//定义变量 Radians,用于将 CirclePercent 的角度值转换为弧度值。
VAR Radians = RADIANS(CirclePercent)
//定义变量 XArcEnd 和 YArcEnd,用于计算扇形的终点的坐标。
VAR XArcEnd = SIN(Radians)
VAR YArcEnd = COS(Radians)
//定义变量 Circle 和 Textvalue,用于生成饼图中的圆形和文本元素。
VAR Circle  = IF(PercentValue = 0.9999, "<circle cx='0' cy='0' r='0.8' fill= 'green' />", "<circle cx='0' cy='0' r='0.8' fill='white' />")
VAR Textvalue = IF(PercentValue = 0.9999, "<text x='0' y='0' font-size='0.6' font-weight='bold' alignment-baseline='middle' text-anchor='middle' fill='white'>✓</text>", "<text x='0' y='0' text-anchor='middle'  alignment-baseline='middle' font-size='0.6'>"&FORMAT(PercentValue,"0.0%")&"</text>")
//返回 SVG 图像
RETURN
IF([销售额完成率]>[时间进度],
    "data:image/svg+xml;utf8,<svg 
    xmlns='http://www.w3.org/2000/svg'
        viewBox='-1 -1 2 2'>
        <circle cx='0' cy='0' r='1' fill='lightgrey' />
        <path d='M 0 -1 A 1 1 0 " & ShortDistance & " 1 " & XArcEnd & " " & YArcEnd & "  L 0 0 z' fill='green'></path>"&
        Circle&Textvalue&"
        </svg>",
    "data:image/svg+xml;utf8,<svg 
    xmlns='http://www.w3.org/2000/svg'
        viewBox='-1 -1 2 2'>
        <circle cx='0' cy='0' r='1' fill='lightgrey' />
        <path d='M 0 -1 A 1 1 0 " & ShortDistance & " 1 " & XArcEnd & " " & YArcEnd & "  L 0 0 z' fill='red'></path>"&
        Circle&Textvalue&"
        </svg>")

这个度量值的数据类型要设置成图像URL,具体位置如下图

在这里插入图片描述

放置视觉对象


在这里插入图片描述

 其他细节和一般的视觉对象调整一致,不再赘述!

觉得图像太大可以在视觉对象图像大小进行调整。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-25 08:36:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-25 08:36:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-25 08:36:04       87 阅读
  4. Python语言-面向对象

    2024-03-25 08:36:04       96 阅读

热门阅读

  1. 【DevOps云实践】Azure Function中使用发布/订阅模式

    2024-03-25 08:36:04       42 阅读
  2. spring boot常见的面试题

    2024-03-25 08:36:04       39 阅读
  3. 解决 Jupyter Notebook 中没有显示想要的内核的问题

    2024-03-25 08:36:04       36 阅读
  4. C语言题目:字符提取(自定义函数)

    2024-03-25 08:36:04       41 阅读
  5. ipv4、ipv6、tcp、udp包结构以及字段解释

    2024-03-25 08:36:04       46 阅读
  6. 快速入门Kotlin③类与对象

    2024-03-25 08:36:04       44 阅读
  7. 如何理解React

    2024-03-25 08:36:04       47 阅读
  8. Linux命令-dig命令(域名查询工具)

    2024-03-25 08:36:04       40 阅读
  9. 利用K8S Statefulset搭建Etcd集群 - 本地存储

    2024-03-25 08:36:04       43 阅读
  10. 数据分析-概率分布

    2024-03-25 08:36:04       57 阅读