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,具体位置如下图

在这里插入图片描述

放置视觉对象


在这里插入图片描述

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/564606.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytorch 实现多层神经网络MLP(Pytorch 05)

一 多层感知机 最简单的深度网络称为多层感知机。多层感知机由 多层神经元 组成&#xff0c;每一层与它的上一层相连&#xff0c;从中接收输入&#xff1b;同时每一层也与它的下一层相连&#xff0c;影响当前层的神经元。 softmax 实现了 如何处理数据&#xff0c;如何将 输出…

vue3对openlayers使用(加高德,天地图图层)

OpenLayers认识 WebGIS四大框架&#xff1a; Leaflet、OpenLayers、Mapbox、Cesium OpenLayers 是一个强大的开源 JavaScript 地图库&#xff0c;专注于提供可嵌入网页的交互式地图体验。作为一款地理信息系统&#xff08;GIS&#xff09;的前端开发工具&#xff0c;OpenLaye…

[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费)

系列文章目录 [套路] el-table 多选属性实现单选效果[套路] 基于服务内存实现的中文拼音混合查询[套路] Bypass滑块验证码 目录 系列文章目录前言一、实现1.1 场景1.2 Window对象简介1.3 引入WangEditor1.4 页面配置 前言 公司使用freemarker的老旧SpringBootWeb后台项目, 前…

前端框架前置课(1)---AJAX阶段

1. AJAX入门 1.1 AJAX概念和axios使用 1.1.1 什么是AJAX? 1.1.2 怎么用AJAX? 引入axios.js 获取省份列表数据 1.2 认识URL 1.3 URL查询参数 1.4 常用请求方和数据提交 1.5 HTTP协议-报文 1.5.1 HTTP响应状态码 1.5.1.1 状态码&#xff1a;1XX&#xff08;信息&#xff09…

DCDC-Buck降压电路

DCDC DCDC转换器是输入、输出电压类型均为直流的一种开关电源&#xff1b;是一种在直流电路中将一个电压值的电能转换成另一个电压值的电能转换装置。 DCDC转换器可以将一个5.0V直流电压转换成1.5V/12.0V直流电压。 DCDC电源可分为三类&#xff1a;Buck降压型,Boost升压型,Buc…

小程序英文口语发音评测

一、英文口语评测需求 在全球化的今天&#xff0c;英语已经成为了世界上最重要的国际语言之一。无论是在国际商务、科技研究、教育还是日常生活中&#xff0c;英语都扮演着举足轻重的角色。因此&#xff0c;掌握英文口语的能力对于个人的职业发展、学术研究以及跨文化交流都具…

石子合并与果子合并:区间动态规划和贪心

果子合并是如何将一堆果子合并起来所消耗体力最少&#xff0c;石子合并也是将一堆石子合并起来质量最小&#xff0c;但不同的是 石子合并只能相邻的两个合并 。本篇通过讲解这两个相似例题&#xff0c;来学习区间dp与贪心。 目录 石子合并&#xff1a; 题目&#xff1a; 思路…

pta-洛希极限

科幻电影《流浪地球》中一个重要的情节是地球距离木星太近时&#xff0c;大气开始被木星吸走&#xff0c;而随着不断接近地木“刚体洛希极限”&#xff0c;地球面临被彻底撕碎的危险。但实际上&#xff0c;这个计算是错误的。 洛希极限&#xff08;Roche limit&#xff09;是一…

java面向对象编程基础

对象&#xff1a; java程序中的对象&#xff1a; 本质上是一种特殊的数据结构 对象是由类new出来的&#xff0c;有了类就可以创建对象 对象在计算机的执行原理&#xff1a; student s1new student();每次new student(),就是在堆内存中开辟一块内存区域代表一个学生对象s1变…

LangChain-Chatchat知识库对话

前言 上次我们完成了Chatchat的本地部署&#xff0c;使用了LLM对话的功能。这次我们尝试一下其他的功能&#xff0c;之前总是有报错没有跑通&#xff0c;这次处理了几个问题之后才跑通了知识库对话和文件对话。 知识库对话 原理: 首先我们看这个图可以明白&#xff0c;知识库…

go面向对象

继承 封装 多态 定义结构体 //定义老师的结构体 type Teacher struct {Name stringAge intSchool string }func main() {var t1 Teacherfmt.Println(t1)t1.Name "tom"t1.Age 20t1.School "school"fmt.Println(t1) } 结构体实例的创建 package ma…

数据结构(五)——树森林

5.4 树和森林 5.4.1 树的存储结构 树的存储1&#xff1a;双亲表示法 用数组顺序存储各结点&#xff0c;每个结点中保存数据元素、指向双亲结点(父结点)的“指针” #define MAX_TREE_SIZE 100// 树的结点 typedef struct{ElemType data;int parent; }PTNode;// 树的类型 type…