如何創建此類圖表？我應該使用什麼庫？

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，這有點棘手，但你可以做你想做的一切。