问题描述
我正在尝试使用CSS和HTML创建饼图.我只会显示一些静态数字,因此我试图将其保持相对简单,并且不使用任何动画.
我目前遇到了如何创建所需外观的障碍.下面的代码段完全按照我的意愿运行,但问题是firefox和Internet Explorer不支持 conic-gradient
,这将是该项目的问题.
.progress-circle {--d:50px;-颜色:#002F65;-进度:40;border-radius:var(-d);高度:var(-d);宽度:var(-d);背景:圆锥渐变(var(-color)calc(calc(var(-progress)/100)* 360deg),透明calc(calc(var(-progress)/100)* 360deg));}
< div class ="progress-circle"></div>
我一直在寻找与上述示例相似的替代方法,该示例使我引向本文:
I am attempting to create a pie chart using css and html. I would simply be displaying a few static numbers therefore I am trying to keep it relatively simple and not use any animations.
I'm currently running into a road block on how to create my desired look. The code snippet below works exactly as I would like it to, the issue with this is that conic-gradient
is not supported with firefox and internet explorer which will be an issue with this project.
.progress-circle {
--d: 50px;
--color: #002F65;
--progress: 40;
border-radius: var(--d);
height: var(--d);
width: var(--d);
background: conic-gradient( var(--color) calc(calc(var(--progress) / 100) * 360deg), transparent calc(calc(var(--progress) / 100) * 360deg));
}
<div class="progress-circle"></div>
I have been searching for an alternative that resembles the example above which had lead me to this article: designing simple pie charts with css
My issue with this is that the way to calculate the percenage growth of the pie chart seems to be not compatible with what I am trying to accomplish. as it is determined by transform: rotate(.1turn);
My main question is it possible to make conic-gradient
compatible with other browsers? If not, what would be the best way to approach making a pie chart with css to closely resemble the first example?
For context I will be passing data from an array to determine the percentage of the pie chart.
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
}
.pie::before {
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);
}
<div class="pie"></div>
Here is an idea based on this previous answer
.box {
/* percentage to degree
--s:0 for [0% 50%]
--s:1 for [50% 100%]
*/
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
background:
linear-gradient(var(--v), yellowgreen 50%,transparent 0) 0 /calc((1 - var(--s))*100%),
linear-gradient(var(--v), transparent 50%,#655 0) 0 /calc(var(--s)*100%),
linear-gradient(to right, yellowgreen 50%,#655 0);
}
<div class="box" style="--p:5;--s:0"></div>
<div class="box" style="--p:20;--s:0"></div>
<div class="box" style="--p:50;--s:0"></div>
<div class="box" style="--p:70;--s:1"></div>
<div class="box" style="--p:95;--s:1"></div>
We can optimize the code using min()
and keep the use of only one variables but you need to pay attention to the support: https://caniuse.com/#feat=css-math-functions
.box {
/* percentage to degree */
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
background:
linear-gradient(var(--v), yellowgreen 50%,transparent 0) 0 /min(100%,(50 - var(--p))*100%),
linear-gradient(var(--v), transparent 50%,#655 0) 0 /min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, yellowgreen 50%,#655 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:70;"></div>
<div class="box" style="--p:95;"></div>
Another idea using pseudo element with more support:
.box {
/* percentage to degree */
--v: calc( ((18/5) * var(--p) - 180)*1deg);
width: 100px;
display: inline-flex;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(to right, yellowgreen 50%, #655 0);
}
.box::before,
.box::after {
content: "";
width: 50%;
padding-top:100%;
transform: rotate(var(--v));
}
.box::before {
background:
linear-gradient(yellowgreen 0 0)
0 / calc((50 - var(--p))*1%);
transform-origin: right;
}
.box::after {
background:
linear-gradient(#655 0 0)
0 / calc((var(--p) - 50)*1%);
transform-origin: left;
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;width:150px;"></div>
<div class="box" style="--p:50;width:120px;"></div>
<div class="box" style="--p:70;"></div>
<div class="box" style="--p:95;width:80px;"></div>
这篇关于使用CSS创建静态饼图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!