如何创建此类图表？我应该使用什么库？

Question

我应该使用什么库来创建图像中的图表？对不起，我发布这里，但我不知道在哪里发布。

Answer 1

我认为没有必要包括和学习一个大的lib。

我告诉你用帆布一点点PROTOTYP，从此建立一个功能：

var arcPos = degree => Math.PI*2/360*degree, 
calcLength = percent => 300 * (percent/100), 
percent =75, 
color = '#00f', 
oldValue = 73, 
vz='', 
canvas = document.getElementById('myCanvas'), 
context = canvas.getContext('2d'), 
radius = 70; 
with (context){ 
    beginPath(); 
    arc(canvas.width/2, canvas.height/2, radius, 
     arcPos(120),arcPos(60), false); 
    lineWidth = 15; 
    strokeStyle = '#ddd'; 
    lineCap = "round" 
    stroke(); 
    beginPath(); 
    arc(canvas.width/2, canvas.height/2, radius, arcPos(120), 
     arcPos(calcLength(percent) + 120), false); 
    strokeStyle = color; 
    stroke(); 
    font = "normal bold 50px sans-serif"; 
    textAlign = 'center'; 
    fillText(percent, 100, 100); 
    font = "normal bold 16px sans-serif"; 
    textAlign = 'center'; 
    vz=((percent - oldValue) > 0)?'+':''; 
    fillText(oldValue + ' (' + vz + (percent - oldValue) + '%)', 100, 130); 
    if ((percent - oldValue) > 0) { 
     beginPath(); 
     lineWidth = 3; 
     strokeStyle = '#f00'; 
     moveTo(100, 165);lineTo(100, 145);stroke(); 
     beginPath();moveTo(100, 145);lineTo(105, 150);stroke(); 
     moveTo(100, 145);lineTo(95, 150);stroke(); 
    } 
    if ((percent - oldValue) < 0) { 
     beginPath(); 
     lineWidth = 3; 
     strokeStyle = '#f00'; 
     moveTo(100, 165);lineTo(100, 145);stroke(); 
     beginPath();moveTo(100, 165);lineTo(105, 160);context.stroke(); 
     moveTo(100, 165);lineTo(95, 160);stroke(); 
    } 
} 

a liddle fiddle

这一套属性oldValue 73玩...

Answer 2

结帐角度chart.js。我认为“甜甜圈图表”接近上图。 http://jtblin.github.io/angular-chart.js/

Answer 3

对于一个简单的图表（只有甜甜圈），你可以使用chartjs。

如果你想重新创建你发布的图像（甜甜圈，文本，％...），你应该去d3js，这有点棘手，但你可以做你想做的一切。