Html, CSS - So erstellen Sie ein Donut-Diagramm wie dieses?

Question

Ich möchte ein Donut-Diagramm wie folgt.

Wie erstelle ich es? Ich bin mir nicht sicher, was der richtige Prozess dafür ist.

Vielen Dank.

Answer 1

Die obige Ringdiagramm getan werden kann, mit Hilfe von HTML 5 Canvas fein.

Probe: https://jsfiddle.net/wm6szms3/

Html-Code:

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

JavaScript-Code:

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

siehe Link http://www.highcharts.com/demo/gauge-activity diese Tonnen von kostenlosen Charts hat und mit wenig Animation wird Ihre Website dynamisch aussehen. Und sie bieten eine nette Funktion, um es in jsfiddle zu bearbeiten und testen Sie noch bevor Sie Ihre inkorporieren.

3D Donut-Diagramm http://www.highcharts.com/demo/3d-pie-donut

Answer 3

Hier ist ein Code Beispiel von Google Charts Javascript verwenden,

wenn Sie anspruchsvollere Diagramm, das Sie this verwenden können

Weitere Charts mit jsfiddle Beispiele können Sie 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>