- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我找到了非常不错的“百分比饼图”,并且只想使用 CSS 来创建它。不需要动画。只是静态的“图片”。
我明白如果我想创建这种图表我需要使用这些元素
问题是
最佳答案
新答案 2021
通过一些现代技术,我们可以改进代码。你可以有圆边,也可以考虑动画:
@property --p{
syntax: '<number>';
inherits: true;
initial-value: 1;
}
.pie {
--p:20; /* the percentage */
--b:22px; /* the thickness */
--c:darkred; /* the color */
--w:150px; /* the size*/
width:var(--w);
aspect-ratio:1/1;
position:relative;
display:inline-grid;
margin:5px;
place-content:center;
font-size:25px;
font-weight:bold;
font-family:sans-serif;
}
.pie:before,
.pie:after {
content:"";
position:absolute;
border-radius:50%;
}
.pie:before {
inset:0;
background:
radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
inset:calc(50% - var(--b)/2);
background:var(--c);
transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}
.animate {
animation:p 1s .5s both;
}
.no-round:before {
background-size:0 0,auto;
}
.no-round:after {
content:none;
}
@keyframes p{
from{--p:0;}
}
body {
background:#ddd;
}
<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
<div class="pie animate" style="--p:80;--c:orange;"> 80%</div>
<div class="pie animate no-round" style="--p:90;--c:lightgreen"> 90%</div>
旧答案
您可以在多个背景下执行此操作。
从 0%
到 50%
:
.box {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
padding: 5px;
background:
linear-gradient(#ccc, #ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%, transparent 0),
linear-gradient(to right, #f2f2f2 50%, blue 0);
}
<div class="box" style="--v:-90deg"></div><!-- 0% -->
<div class="box" style="--v:-45deg"></div><!-- 12.5% -->
<div class="box" style="--v: 0deg"></div><!-- 25% -->
<div class="box" style="--v: 45deg"></div><!-- 37.5% -->
<div class="box" style="--v: 90deg"></div><!-- 50% -->
<p>The formula is [p = (18/5) * x - 90]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 5% --> p = -72deg </p>
<div class="box" style="--v:-72deg"></div>
从 50%
到 100%
:
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:5px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), blue 50%,transparent 0),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<div class="box" style="--v:-90deg"></div><!-- 50% -->
<div class="box" style="--v:-45deg"></div><!-- 62.5% -->
<div class="box" style="--v: 0deg"></div><!-- 75% -->
<div class="box" style="--v: 45deg"></div><!-- 87.5% -->
<div class="box" style="--v: 90deg"></div><!-- 100% -->
<p>The formula is [p = (18/5) * x - 270]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 80% --> p = 18deg </p>
<div class="box" style="--v:18deg"></div>
你可以像这样结合两者:
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:5px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/calc(var(--s)*100%) ,
linear-gradient(var(--v), blue 50%,transparent 0) 0/calc((1 - var(--s))*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<div class="box" style="--v:-90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:1"></div>
<div class="box" style="--v:90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:0"></div>
<div class="box" style="--v:90deg;--s:0"></div>
现在我们可以像下面这样优化以考虑百分比值:
.box {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>
获取另一个版本的相关问题:Creating a static pie chart with CSS
我们还可以考虑使用mask
来增加透明度:
.box {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
body {
background:linear-gradient(to right,red,yellow);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>
也喜欢下面:
.box {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%,blue 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
body {
background:linear-gradient(to right,red,yellow);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>
关于html - 仅使用 CSS 的百分比饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52205399/
我的函数概念上都返回相同的东西,但结果可以采用不同的形式: function GetThingy() 有四个不同的函数,每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。 有什么方法可以计算(例如)120 的 50
我四处寻找这个,它看起来很简单,但我无法让它工作。 我有一张表格,其中一列需要格式化为百分比。下面是我的代码,但它没有格式化单元格,它只是将它们保留为小数。 我想这是因为 cell ,即使声明为范围,
我刚刚开始使用 WPF。从那以后,我开始关注造型系统。我来自 CSS 背景,我想以百分比设置边距。 当前值以像素为单位
我有一个表,其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询,我可以在其中按每个相应的描述进行分组,并查看 bool 值为真的次数百分比。 示例表: PID Gen
我从文档中发现,考虑到 orientdb 100% 使用磁盘缓存,它使用的最大大小为 70% 用于读取缓存,30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗?! docker stats DOCKER_ID 显示的百分比正是我需要的,但我需要它作为变量。我需要获取容器本身内部的 cp
我正在尝试计算数据集每列中类别的比例(百分比)。 示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
我应该使用小数还是 float 在数据库中存储比率?特别是在 SQL2005 中。 最佳答案 这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误,则使用 flo
我正在创建一个游戏,目前必须处理一些math.random问题。 我的Lua能力不是那么强,你觉得怎么样 您能制定一个使用 math.random 和给定百分比的算法吗? 我的意思是这样的函数: fu
如何在SQL中动态计算百分比? 假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
如何通过 jQuery 创建具有百分比的数字掩码输入?我是否让输入仅接受三个数字,并在用户完成输入时在数字后添加百分号(keyup)? 我不使用插件。 示例:1% 或 30% 或 99% 或 100%
我正在尝试构建一个工具,可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中,按顺序对字典进行排序,然后仅保留前 3 对。 我希望这个工具是可扩展的,所以我想保留前 10
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较,从而有效地返回从一个日期到另一个日期的用户百分比增加情况? 几天来我一直在试图解决这个问题,但我已经没有想法了,
我需要进行查询,结果是百分比。 我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
我有一个图像上传功能,其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
我的问题很简单,但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。 我们有类似的东西 #containera { width: 50%; height: 50%; backgr
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比?例如,我想将 div 的 border-radius 指定为 div 宽度的 10%。但是,border-radius: 10% 在
我正在尝试设置按钮的大小并以百分比进行编辑 但是这个的线性大小是不同的。为什么? 最佳答案 您好,问题出在属性 box-sizing 上.默认为 input type
我将它用于我的页眉,该页眉在一页上下滚动页面中发生变化。我注意到它没有响应,所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比,以便它可以在移动设备和电视屏幕上使用。 HTML
我是一名优秀的程序员,十分优秀!