8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

仅使用 CSS 的百分比饼图

gregoiregentil 2月前

31 0

我找到了非常漂亮的“百分比饼图”,并希望仅使用 CSS 创建它。无需动画。只需静态“图片”。我明白如果我想创建这种图表,我需要使用元素...

我找到了非常漂亮的“百分比饼图”,并想仅使用 CSS 创建它。无需动画。只需静态“图片”。

Example 1

我明白如果我想创建这种图表,我需要使用类似这样的元素

Example 2

问题是

  1. 如何创建元素#2?
  2. 如何管理元素#2 的形状以获得较小(5%)或较高百分比(80%)的值?
帖子版权声明 1、本帖标题:仅使用 CSS 的百分比饼图
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由gregoiregentil在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 嘿,gus,你可以添加一些小的 CSS 样式

    .circle {
      position: relative;
      top: 5px;
      left: 5px;
      text-align: center;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      background-color: #ffffff;
    }
    
    .circle-border {
      position: relative;
      text-align: center;
      width: 110px;
      height: 110px;
      margin-left: 30%;
      border-radius: 100%;
      background-color: #E53B3B;
      background: linear-gradient(0deg, lightgray 100%, black 0%)
    }
    

    HTML

    <div class="circle-border" id="circleElement">
      <div class="circle" id="circleElementValue">
        aaa
      </div>
    </div>
    

    JS : 自动显示填充百分比

    // let i = 75;
    //   let deg=Math.round(1.8*i); 
    //   let completed=0;
    //   let remaining=100-i;
    //   // completed = (remaining>50)? 50 : completed;
    // let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
    //   setTimeout(function(){
    //     console.log(backgroundStlye);
    //   document.getElementById("circleElement").style.background =backgroundStlye;
    // },i*100);
    
    for(let i=1;i<=100;i++){
      let deg=Math.round(1.8*i); 
      let completed=i;
      let remaining=100-i;
      completed = (remaining<50)? 0 : completed;
    let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
      setTimeout(function(){
        console.log(backgroundStlye);
      document.getElementById("circleElement").style.background =backgroundStlye;
        document.getElementById("circleElementValue").innerHTML = i+'%';
    },i*100);
    }
    

    我创建了示例 https://codepen.io/arun-b-shet/pen/mdVVWXo

    希望你喜欢

返回
作者最近主题: