Javascript 如何创建这样的图表？我应该使用什么图书馆？

我应该使用什么库来创建像图中那样的图表？很抱歉，我在这里发布了这个，但我不知道在哪里发布这个。

---

检查角度图表.js。我认为“甜甜圈图”与上面的图表很接近。 对于一个简单的图表（只有油炸圈饼），您可以使用

---

如果你想准确地重新创建你发布的图像（甜甜圈、文本、%…），你应该去做，这有点棘手，但你完全可以做任何你想做的事情。

我认为没有必要包括和学习一个大库

我向您展示了canvas的一个小原型，从中构建一个函数：

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();
    }
}

var arcPos=degree=>Math.PI*2/360*degree，
计算长度=百分比=>300*（百分比/100），
百分比=75，
颜色='#00f'，
oldValue=73，
vz=“”，
canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'），
半径=70；
（上下文）{
beginPath（）；
弧（canvas.width/2、canvas.height/2、半径、，
arcPos（120）、arcPos（60）、false；
线宽=15；
strokeStyle='#ddd'；
lineCap=“圆形”
笔划（）；
beginPath（）；
圆弧（画布宽度/2，画布高度/2，半径，圆弧位置（120），
arcPos（计算长度（百分比）+120），假；
strokeStyle=颜色；
笔划（）；
font=“普通粗体50px无衬线”；
textAlign='中心'；
填充文本（百分比，100，100）；
font=“普通粗体16px无衬线”；
textAlign='中心'；
vz=（（百分比-旧值）>0）？“+”：”；
fillText（oldValue+'（'+vz+（百分比-oldValue）+'%）'，100130）；
如果（（百分比-旧值）>0）{
beginPath（）；
线宽=3；
strokeStyle='#f00'；
moveTo（100165）；lineTo（100145）；stroke（）；
beginPath（）；moveTo（100145）；lineTo（105150）；stroke（）；
moveTo（100145）；lineTo（95150）；stroke（）；
}
如果（（百分比-旧值）<0）{
beginPath（）；
线宽=3；
strokeStyle='#f00'；
moveTo（100165）；lineTo（100145）；stroke（）；
beginPath（）；moveTo（100165）；lineTo（105160）；context.stroke（）；
moveTo（100165）；lineTo（95160）；stroke（）；
}
}

---

将此设置值设置为73…

为什么不导航到您添加的图表标签或相关标签，或者可能重复的感谢！这是我第一次使用图表