javascript - 单条 "chart"到 CSS(或 HTML5/SVG)中的 donut (doughnut)图表

Question

我正在寻找将单个条形“图表”转换为圆环图的最快/最简单/最轻的方法。目前数据在一个 div 中，它由三个 span 元素组成，包含来自 Typescript 和 mongoDB 后端的数据。在这种情况下，是否可以仅使用 CSS 制作响应式圆环图？

数据现在是这样显示的: http://www.dailydoseofexcel.com/blogpix/barpie5.gif

这在某种程度上是我想要实现的目标: http://www.teylyn.com/wp-content/uploads/2010/03/donut-leader-06.gif

基本上这是 HTML 中的结构:

<div>
<span>{{data1}}</span>
<span>{{data2}}</span>
<span>{{data3}}</span>
</div>

如果需要，我会添加更多(确切的)代码示例，谢谢。编辑:

更具体的代码，HTML:

<div class="bar-chart-container">
<span class="bar-data1">{{data1.percentage}}</span>
<span class="bar-data2">{{data2.percentage}}</span>
<span class="bar-data3">{{data3.percentage}}</span>
</div>

CSS:

.bar-chart-container {
  display: block;
}
.bar-chart {
  display: inline-block;
  font-size: 0.9em;
  white-space: normal;
}
.bar-chart.bar-data1 {
  background-color: green;
}
.bar-chart.bar-data2 {
  background-color: red;
}
.bar-chart.bar-data3 {
  background-color: gray;

Answer 1

 <div class="card">
   <div class="donut-chart chart1">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span>{{data1}}</span>
      <span>{{data2}}</span>
    </div>
   </div>
 </div>

然后是 CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #e1e1e1;
}

.card {
  float: left;
  background: #fff;
  padding: 20px;
  margin: 0 20px 0 0;
}


// Donut Chart Mixin
.donut-chart {
  position: relative;
  border-radius: 50%;
  overflow: hidden;

     .slice {
         position: absolute;
          top: 0;
          left: 0;
          width: 100%;
         height: 100%;
  }

  .chart-center {
    position: absolute;
    border-radius: 50%;

    span {
      display: block;
      text-align: center;
    }
  }
}

@mixin donut-chart($name, $perc, $size, $width, $base, $center, $color,        $textColor: $color, $textSize: 40px) {

  $color2: $color;
  $base2: $base;
    $deg: ($perc/100*360)+deg;
    $deg1: 90deg;
    $deg2: $deg;

// If percentage is less than 50%
@if $perc < 50 {
    $base: $color;
$color: $base2;
$color2: $base2;
$deg1: ($perc/100*360+90)+deg;
    $deg2: 0deg;
}

.donut-chart {
   &#{$name} {
   width: $size;
   height: $size;
   background: $base;

  .slice {
    &.one {
      clip: rect(0 $size $size/2 0);
      -webkit-transform: rotate($deg1);
      transform: rotate($deg1);
      background: $color;
    }

    &.two {
      clip: rect(0 $size/2 $size 0);
      -webkit-transform: rotate($deg2);
      transform: rotate($deg2);
      background: $color2;
    }
  }

  .chart-center {
    top: $width;
    left: $width;
    width: $size - ($width * 2);
    height: $size - ($width * 2);
    background: $center;

    span {
      font-size: $textSize;
      line-height: $size - ($width * 2);
      color: $textColor;

      &:after {
      content: '#{$perc}%';
         }
        }
       }
     }
   }
} // mixin

// Charts
@include donut-chart('.chart1', 75, 200px, 10px, #e1e1e1, #fff, #50c690);

@include donut-chart('.chart2', 91, 200px, 25px, #e1e1e1, #fff, #48b2c1);

@include donut-chart('.chart3', 15, 120px, 5px, #e1e1e1, #fff, #353535);

@include donut-chart('.chart4', 45, 240px, 15px, #e1e1e1, #fff, #f26a4a, #f26a4a, 60px);