Javascript 将圆环饼图显示为Circle Progress Chart.js

我想问一下，是否有一种方法可以制作饼图，因为圆的进度是百分比值，我只需要一个彩色的切片 大概是这样的：

现在我只需要一个数据

HTML:

我知道我可以用普通的HTML和CSS或者简单的插件来实现，但是我想用Chart.js来实现，它提供了不同的钩子，可以用来执行自定义代码。在炸圈饼的中间，你已经使用<代码> BeFoeDeWud< /Cord>钩子绘制文本。

您现在还可以使用

beforeInit

hook修改图表配置，以满足您的需要：

beforeInit: (chart) => {
  const dataset = chart.data.datasets[0];
  chart.data.labels = [dataset.label];
  dataset.data = [dataset.percent, 100 - dataset.percent];
}

有了这段代码，您的

数据集的定义看起来很简单，如下所示：

{
  label: 'Africa / Population (millions)',
  percent: 68,
  backgroundColor: ['#5283ff']
}

最后，您必须定义一个，以便工具提示仅显示在相关段上

tooltips: {
  filter: tooltipItem => tooltipItem.index == 0
}

请看一下你修改过的代码，看看它是如何工作的


var myChartCircle=新图表（'chartProgress'{
键入：“甜甜圈”，
数据：{
数据集：[{
标签：“非洲/人口（百万）”，
百分之六十八,，
背景颜色：['#5283ff']
}]
},
插件：[{
beforeInit：（图表）=>{
常量数据集=chart.data.datasets[0]；
chart.data.labels=[dataset.label]；
dataset.data=[dataset.percent，100-dataset.percent]；
}
},
{
绘制前：（图表）=>{
变量宽度=chart.chart.width，
高度=chart.chart.height，
ctx=chart.chart.ctx；
ctx.restore（）；
变量fontSize=（高度/150）.toFixed（2）；
ctx.font=fontSize+“em无衬线”；
ctx.fillStyle=“#9b9b”；
ctx.textb基线=“中间”；
var text=chart.data.dataset[0]。百分比+“%”，
textX=数学圆（（宽度-ctx.measureText（text.width）/2），
textY=高度/2；
ctx.fillText（text，textX，textY）；
ctx.save（）；
}
}
],
选项：{
MaintaintAspectRatio:false，
门诊人数：85人，
轮换：Math.PI/2，
图例：{
显示：假，
},
工具提示：{
筛选器：tooltipItem=>tooltipItem.index==0
}
}
});
在我的头顶上，你可以通过设置一个虚拟值（比如68-32）来获得所需的效果。但是在没有自定义代码或定制的情况下，很难在中间获得文本。
{
  label: 'Africa / Population (millions)',
  percent: 68,
  backgroundColor: ['#5283ff']
}

tooltips: {
  filter: tooltipItem => tooltipItem.index == 0
}