Html，CSS - 如何创建一个这样的甜甜圈图表？

Question

我想要一个像这样的甜甜圈图表。

如何创建它？我不确定这是什么正确的过程。

非常感谢。

Answer 1

上述圆环图可以使用HTML 5个画布来完成。

样品：https://jsfiddle.net/wm6szms3/

HTML代码：

<canvas id="canvas" width=325 height=325></canvas> 

JavaScript代码：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

var colors=['skyblue','gray','orange']; 
var values=[47,6,47]; 
var labels=['Voluntary','Robot','Mandatory']; 

dmbChart(150,150,125,25,values,colors,labels,0); 

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){ 
    var tot=0; 
    var accum=0; 
    var PI=Math.PI; 
    var PI2=PI*2; 
    var offset=-PI/2; 
    ctx.lineWidth=arcwidth; 
    for(var i=0;i<values.length;i++){tot+=values[i];} 
    for(var i=0;i<values.length;i++){ 
     ctx.beginPath(); 
     ctx.arc(cx,cy,radius, 
      offset+PI2*(accum/tot), 
      offset+PI2*((accum+values[i])/tot) 
     ); 
     ctx.strokeStyle=colors[i]; 
     ctx.stroke(); 
     accum+=values[i]; 
    } 
    var innerRadius=radius-arcwidth-3; 
    ctx.beginPath(); 
    ctx.arc(cx,cy,innerRadius,0,PI2); 
    ctx.fillStyle=colors[selectedValue]; 
    ctx.fill(); 
    ctx.textAlign='center'; 
    ctx.textBaseline='bottom'; 
    ctx.fillStyle='white'; 
    ctx.font=(innerRadius)+'px verdana'; 
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9); 
    ctx.font=(innerRadius/4)+'px verdana'; 
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25); 
} 

Answer 2

参考此链接http://www.highcharts.com/demo/gauge-activity 这有吨自由图表，并与小动画您的网站看起来动感十足。他们提供了一个很好的功能，可以在jsfiddle中进行编辑，并在合并之前进行测试。

3D圆环图 http://www.highcharts.com/demo/3d-pie-donut

Answer 3

下面是谷歌图表使用Javascript一些代码示例，

，如果你想更复杂的图表，你可以使用this

个

多个图表与的jsfiddle例子可以精细here

 google.charts.load('current', {'packages':['corechart']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 

 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Effort', 'Amount given'], 
 
      ['My all',  100], 
 
     ]); 
 

 
     var options = { 
 
      pieHole: 0.5, 
 
      pieSliceTextStyle: { 
 
      color: 'black', 
 
      }, 
 
      legend: 'none' 
 
     }; 
 

 
     var chart = new google.visualization.PieChart(document.getElementById('donut_single')); 
 
     chart.draw(data, options); 
 
     }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
     <div id="donut_single" style="width: 900px; height: 500px;"></div>