connect timed out
2023年6月推出的卡片图可以实现类似的组合（不了解新卡片图可查看此文：Power BI可视化的巅峰之作：新卡片图），例如，指标右上角放一个排名卡片，绿色表示前三名，红色表示排名靠后： 实现的方式是卡片图插入...SVG矢量图，上方示例的排名图片度量值为： 排名图片= "data:image/svg+xml;utf8, " 把度量值放入卡片图的图像URL，位置为右侧，图像大小可以按需调整。...排名也可以放到上方，以下看上去是一种神奇的效果，排名在边框之上。 如果使用卡片图的默认边框，是无法产生这种效果的，此处实际做了一个假边框，下图外层是真实边框，内层为假边框。...还有一种更神奇的效果，排名图标在边框角落，而不是上下左右，读者可以思考下如何实现。
图例在图表的一个角落，告诉我们图表中的不同元素分别代表什么。默认的情况下，Power BI的图例千篇一律-不同颜色的圆圈。 少数图表支持图例样式修改，比如下图可以将折线的图例修改为线条。...如何自定义任意形状的图例？ 还是上方的图表，图例进行以下修改，A指标是柱形，所以图例使用长方形，B指标是折线，所以图例也使用折线。实现的方式是SVG图标结合新卡片图。...在我分享的《复制粘贴就可以使用的Power BI图标素材查询系统2.0》分别搜索长方形和折线的图标（按照你的图表情景可自由选择形状），选择和图表相同的颜色，右侧复制SVG代码。...将复制的代码存放到Power BI度量值中： 将两个SVG度量值放入新卡片图（2023年6月后的Power BI版本支持）视觉对象： 关闭卡片图的标注值，因为需要显示的是图像，而不是SVG代码，标注值此处无意义...打开图像，对两个数据系列分别施加对应的图像URL，图像置于左侧，适当调整大小。 最后关闭图表本身的图例，将卡片图新建的图例放在角落，设置即完成。
近两年分享了全球最多的Power BI SVG自定义图表方法，新卡片图使得SVG有了更大的舞台，以下罗列几种用法。...装饰 ---- SVG可以用作背景装饰，比如下图的渐变色，Power BI内置功能无法实现，借助SVG文件即可突破这一限制。...渐变的SVG代码如下，将代码保存到空白SVG文件，再上传到新卡片图背景图像即可。...> 除了背景，还可以添加SVG图标以场景化KPI，比如鞋服行业放置衣服图标，《复制粘贴就可以使用的Power BI图标素材查询系统2.0》分享了6000种SVG图标，复制需要的图标代码，保存为度量值，使用方法同下方第二节...找到箭头，复制里面的代码，生成以下度量值： SVG箭头=IF([增长率]>0,向上箭头SVG代码,向下箭头SVG代码) 将度量值放入新卡片图图像URL，即可生成下图效果： 3.
下方的三个卡片比较简单，使用新卡片图视觉对象可以一次性设置： 标签设置低于值： 上方的两个指标相对复杂，体现在指标名称旁边有个图标，以下是Power BI模拟效果。...图标很好加，还是新卡片图视觉对象，在我提供的《复制粘贴就可以使用的Power BI图标素材查询系统2.0》搜索对应SVG图标代码，放到卡片图的图像URL，位置在上方。...我们需要将视觉对象默认的指标名称隐藏，接着修改SVG图标，在尾部增加一个text元素，将指标名称显示出来。...因文本需要横向空间，所以需要修改整个图像的width值，此处由48增加到了200像素。 以上是京东读书的模拟，微信读书的卡片原理是一致的，也是图标+文本。...区别在于文本行数有两行，文本位置有的位于右侧，多个text叠加可以实现需要的效果。 这个案例本身对大多数人没有价值，有价值的是这种构图套路，可以和你的模型适配进行设计。
很多Power BI业务场景需要使用图片（参考：Power BI本地图片显示最佳解决方案），常规的图片显示效果如下图所示。...有时想给图片加点花样，比如进行圆形裁剪，以下是对比效果，注意人物的毛衣下方，图库不用重新准备，使用DAX可以精准裁剪。 有人可能想到，图片上方叠加一个SVG的圆形标签不就好？...因此，如果需要圆形裁剪和图像清晰度二者得兼，还是需要叠加方式，只不过不能直接叠加一个圆圈，而是用PPT画一个这样的造型，圆圈和正方形相交的地方填充上颜色，圆圈内部无色，将形状另存为SVG矢量图，记事本打开复制里面的代码...，和image标签放到一起。...这样对圆圈外部的毛衣进行了遮挡，圆圈内部没有颜色，使得头像得以显示。蓝色可以设置为和背景色相同，从而产生裁剪效果。 叠加的清晰度和原图保持一致，裁剪后的图片可以用在表格矩阵和新卡片图。
还有 navbar 的设置有时在封面无法显示。 ---- 主要参考官方文档，一次配置完的，一看就懂的就不需要记录了，记下可能后续需要改动的，花了一点时间才搞明白的。...需要 配置的不能用，会引起搜索框出错，页面无法滑动。...第一个一级标题 # 显示不出来，之前 Hugo 也是，大概是默认将 # 当做文档的标题，也许这是一个约定的标准。...首页自定义显示卡片索引链接到具体文集，幸好之前学过前端，虽然不记得，笔记还在，不会用太复杂的，简单的还能写。 封面配置里不要用标题标签，不然点击会自动跳转，直接用 html 的 font 去设置。...，文档有两句被注释掉了，因为它的说明文档不需要引入，但实际上是需要的，css 放到 head 里，script 放到 body 里。
《新卡片图五大应用场景》 《新卡片图异形边框》 《新卡片图主次指标组合》 《新卡片图总分结构》 ---- Power BI 2023年6月推出的卡片图视觉对象是一个良好的地图载体。...在卡片图添加地图，本质上就是添加图标，以下卡片图中，地图的添加方式和销售业绩、业绩达成率的图标没什么不同。...如果是单个地图，用记事本打开地图，将里面的双引号全部替换为单引号，复制到Power BI的度量值，注意需要添加下图红框的前缀，以便新卡片图识别。...如果是很多地图，使用导入文件夹的方式批量导入，把地图当作文本进行处理，批量导入完成后，也添加前缀 data:image/svg+xml;utf8, 操作到这一步，已经可以卡片图添加图像URL，引用上方地图...此时的地图为原始文件，只能依据城市切片，切换样式，无法改变颜色。分析地图的源代码，有stroke字样表示边框颜色，fill字样表示填充色，借助DAX，可以将这两者动态化。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。 invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。...，当鼠标hover到某一张卡片上时，其他卡片背景模糊，使用户焦点集中到当前卡片。...因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。 如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。...下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的，原理参考了 说说SVG的feTurbulence滤镜 和SVG feTurbulence滤镜深入介绍 ，有兴趣的朋友可以深入阅读。...feTurbulence滤镜 借助 Perlin 噪声算法模拟自然界真实事物那样的随机样式。它接收下面5个属性： baseFrequency 表示噪声的基本频率参数，频率越高，噪声越密集。
将下载好的地图插入Power BI背景，调整透明度选择合适的明亮程度。 拖动一个需要的内置图表，此例是一个仪表图，放到需要的位置。...例如A位置，将视觉对象筛选器选择地点A，复制若干个图表放到其它位置，筛选器相同处理。 这样，一个很简单的地图叠加迷你图的图表完成了。...第一，位置数量需要固定，且不能过多，三十个以内的位置可以考虑此种方式，超过这个数量可以考虑纯SVG一个度量值把地图和迷你图打包处理（参考示例文件：https://t.zsxq.com/0aOrsu0RN...第二，内置的图表作为迷你图表现力有所局限，如果想要更丰富的效果，可以使用ImageByCloudScope或者HTML Content这样的视觉对象，SVG进行定制。...本公众号分享了很多自定义卡片图，下图是把麦肯锡风格的华夫饼图放地图上的例子（华夫饼图原理参考：Power BI 模拟麦肯锡华夫饼图）。 ----
微信公众号手机端（订阅号助手APP）有对关注者的数据分析模块，例如下图是阅读排行前三名。这个卡片图简洁清晰，左上角是名次，名次底纹为金银铜色；中间是人物头像；下方是人物昵称。...Power BI模拟如下，实现原理是SVG矢量图和DAX结合。 下方是图表度量值，将度量值放入Html Content视觉对象显示。...模拟公众号排名完整版金 = " <rect rx='50' x...第二名第三名度量值相同，需要把度量值中的颜色RGB(194,174,133)进行替换。如登录了微信电脑端，光标放到下方三个图，Alt+A可以得到不同底纹的颜色编码。...这是一种复合应用，该图表的排名也可拆分出来单独使用。 比如放到表格充当条件格式排名图标： ----
它提供了一个集中的位置，帮助开发人员发现和了解各种前端开发工具和资源。无论是初学者还是有经验的开发人员，都可以从这些列出的网站中受益。 Colors 首先是颜色。...如果你曾经因为无法找到好的颜色组合而陷入项目困境，这里有几个网站可以帮助你解决问题。 Color Hunt 和 Muzli Colors 是两个生成配色方案的网站。...带有和不带有来自getwaves的SVG波浪的落地页示例： 接下来是 Neumorphism Generator：这是一个帮助你创建在UI设计中流行的柔和阴影效果的工具。...如果你的背景与卡片组件相似，使用这个工具可以让卡片组件更加突出，非常实用。...生成字体搭配 在任何网站上，你通常也会想要使用大约两种字体，一种通常用于标题，另一种用于正文文本。Fontjoy 是一个可以帮助你生成字体配对并让你可视化它们一起使用时的外观的网站。
《新卡片图五大应用场景》 《新卡片图异形边框》 《新卡片图主次指标组合》 《新卡片图总分结构》 《新卡片图添加地图》 ---- Power BI 2023年6月推出的卡片图当前不支持下划线，使用...制作下划线最简单的方式是使用PPT画一个，另存为SVG格式。...其次可以在各种SVG图标库搜索下划线（例如阿里巴巴矢量图标库https://www.iconfont.cn/） 用记事本打开波浪线SVG图片，可以看到长串的代码，把代码复制到Power BI空白度量值...将这个SVG度量值作为图像URL，放入新卡片图的下方，即可实现需要的效果。...>" RETURN IF ( [M.业绩达成率]<1,SVG ) 最后还有一个高阶玩法，上方的度量值稍微修改，可以实现波浪线长短自动变化，下方店铺名称的波浪线按照字数多少自动调整。
AI 正在输出内容时，用户无法滚动查看历史消息。用户向上滚动查看历史消息，会被 Javascript 不断执行的 scrollIntoView 打断。需要写特殊逻辑才能避免这个情况。...想到这里惊讶的发现，聊天框实际上不就是一个倒过来的列表吗？ 列表最上边新增的行会把后边的行往下挤，而聊天框最下边新增消息需要把上边的消息往上挤。那假如我们将聊天框旋转 180° 呢...?...});消息卡片翻转恢复可以看到目前就只剩下聊天框中的消息卡片是反的，接下来把聊天框中的消息卡片转正就大功告成了。...不需要对聊天框和消息体再进行旋转操作，也不需要反转滚动条的行为。以上两种方法都存在一个相同的问题，当一开始聊天消息还很少时，聊天消息也会紧贴着底部，顶部会留出一片空白。...这时只需要在聊天列表的最开始设置一个空白的占位元素，把它的 CSS 设置为：flex-grow: 1;flex-shrink: 1;就可以实现消息少的时候自动撑开，把消息撑到顶部。
（不了解新卡片图请参考此文：Power BI可视化的巅峰之作：新卡片图），接着对指标施加DAX生成的SVG图像。...图片度量值如下： 新卡片_居中对齐 = VAR SVG = "data:image/svg+xml;utf8, " RETURN IF ( HASONEVALUE ( '日期表'[Date] ), SVG, BLANK () ) 将度量值放入下图位置，设置即完成： 此处的emoji可以换成上下箭头...除了新卡片图，表格矩阵当然也可以设置类似的卡片。二者的区别在于： 1. 新卡片图自带上方的主指标，表格矩阵需要额外设置主指标text 2....新卡片图适合单日展示，表格矩阵可以批量多日展示 这种卡片组合方式属于主次指标组合，我的知识星球的《Power BI新卡片图高级应用》视频教程进行了详细讲解，直达链接 https://t.zsxq.com
首先，在PPT选择需要的SMART图形： 卡片数量可以按需调整，比如4+1调整为3+1： 在Power BI最简单的实现卡片组的办法是，把上图当作背景插入，每个圆圈上分别放置一个卡片视觉对象进行叠图，看上去形成一体化效果...有没有可能一个视觉对象实现卡片组？当然没问题。 在PPT把指标文字编辑好，这里数据任意虚拟，起到占位作用。 鼠标右键，将图形另存为可缩放的向量图形，即SVG格式。...记事本打开SVG文件，查找替换将所有双引号替换为单引号。...替换时需要将指标使用FORMAT包裹下，进行格式处理。 使用新卡片图视觉对象拖拽任意一个数据，关闭标签标注，打开图像，图像URL选择上方的SVG度量值： 以上完成后，环绕式卡片组即顺利实现。...如果数据字符宽度随时切片器有变化（比如有的门店业绩几万，有的几十万），可能文本对齐会有问题，此时需要在SVG度量值中，加入text-anchor参数进行对齐方式调整。
（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），麦肯锡擅长使用华夫饼图表达百分比，本文介绍新卡片图如何实现类似风格。...下图展示了将华夫饼图放在指标右上方，图表和数字相结合。 新建一个新卡片图，放入指标或者维度，图像填充下方的SVG华夫饼度量值，图像位置位于右侧，图像大小稍微小一点，本例为40像素。...+xml;utf8, " & " " & CONCATENATEX ( tWaffle, [circle] ) & " " RETURN Chart 如果需要把华夫饼作为主图显示...，可以将图像位置设置为下方，图像大小放大，本例为150像素。
你将收获 文字渐变, 阴影, 描边的3种方案实现 组件设计的一些通用方法和原则 如果在低代码平台中优雅的设计功能强大的文字组件 技术脑洞 正文 先来介绍一下文字描边和阴影的设计方案....具体实现方案大家需要具备一点的 svg 基础知识, 这里给大家分享一下我的实现代码: <svg style={{ width: '100%', textShadow: `${shadow...所有它的服务都应该严密的和该功能保持一致。...O 开闭原则: 规定“软件中的对象（类，模块，函数等等）应该对于扩展是开放的，但是对于修改是封闭的”，这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。...D 依赖反转原则: 是指一种特定的解耦 形式，使得高层次的模块不依赖于低层次的模块的实现细节，依赖关系被颠倒（反转），从而使得低层次模块依赖于高层次模块的需求抽象。
2.Quokka Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。...5.HTML Boilerplate 通过使用 HTML模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。...8.SVG Viewer 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。...13.Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。 ? ?...image 28.Auto Rename Tag 自动完成另一侧标签的同步修改 ?
常规的SVG着色地图为形状填充，本文介绍轮廓填充的方法，效果如下图所示，地图充当卡片图的背景，轮廓颜色随数据大小变化（本例大于50%绿色否则红色）。...会看到里面密密麻麻，不知所云： 实际上，它的核心原理只有这么短： SVG表示地图的起始和结尾，中间的path就是地图的形状，path可以有一个或者多个...地图一般不会仅仅有形状，还需要有额外的参数控制样式，比如fill： Fill即填充，填充色可以是英文颜色名称或者各种颜色代码方式...第一次将边框色#FFFFFF替换为动态，第二次将填充色#D3D3D3替换为无，第三次在地图结尾处插入text数据标签。...SVG地图轮廓卡片图 = VAR SVG = SUBSTITUTE( SUBSTITUTE( SUBSTITUTE( SELECTEDVALUE
Power BI 2023年6月新推出的卡片图（不了解新卡片图可参考这篇文章：Power BI可视化的巅峰之作：新卡片图）可以借助SVG矢量图实现计算器字体效果，本文讲解实现原理。 1....寻找数字图标 ---- 首先，需要找到0-9对应的SVG代码，这里推荐三个。...Power BI展示 ---- 将SVG数字直接用DAX生成一个表或者以文件夹导入文本的方式批量导入Power BI，如下图所示。 这些SVG文件如何和具体的指标对应？首先，需要把数据进行拆分。...这两列数字各有用处，拆分结果Value2用来和0-9的SVG计算器字体对应，索引Value用来确定这个数字放在第几位。235中，3的索引是2，所以3对应的SVG代码需要向右移动，移动多少？...将任意指标放入新卡片图，隐藏标签，打开图像，图像URL选择上方制作的度量值，并按需调整图像大小，计算器风格的卡片搞定。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
