CSS（またはHTML5/SVG）のドーナツ（ドーナツ）チャートへのシングルバー "チャート"

Question

シングルバー "チャート"をドーナツチャートに変換するための最速/最も簡単な/最も軽い方法をお探しです。現在、データはdiv内にあり、TypescriptおよびmongoDBバックエンドのデータを含む3つのスパン要素から作成されます。このケースではただのCSSで応答性のあるドーナツチャートを作ることは可能ですか？

これは、データが表示されるようになりましたか多少です： http://www.dailydoseofexcel.com/blogpix/barpie5.gif

これは私がachiveしようとしているものを多少です： 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> 

必要に応じて、より正確なコード例を追加します。ありがとうございます。 EDIT：

コードより具体的に、 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);