将甜甜圈饼图显示为圆形进度 Chart.js

Question

我想问一下是否有一种方法可以将饼图制作为具有百分比值的圆形进度，我只想要一个颜色如下所示的切片：

这是我的小提琴，现在我只想要一个数据。

HTML：

<canvas id="chartProgress" width="300px" height="200"></canvas>

JS：

var chartProgress = document.getElementById("chartProgress");
if (chartProgress) {
var myChartCircle = new Chart(chartProgress, {
type: 'doughnut',
data: {
  labels: ["Africa", 'null'],
  datasets: [{
    label: "Population (millions)",
    backgroundColor: ["#5283ff"],
    data: [68, 48]
  }]
},
plugins: [{
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 150).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.fillStyle = "#9b9b9b";
    ctx.textBaseline = "middle";

    var text = "68%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
}],
options: {
  legend: {
    display: false,
  },
  responsive: true,
  maintainAspectRatio: false,
  cutoutPercentage: 85
}
});
}

我知道我可以使用普通的 HTML&CSS 或使用简单的插件来完成，但我想使用 Chart.js 来完成

Answer 1

插件核心 API提供了可用于执行自定义代码的不同钩子。 您已经使用beforeDraw钩子在甜甜圈中间绘制文本。

您现在还可以使用beforeInit钩子修改图表配置以满足您的需求：

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

鉴于此代码， dataset的定义看起来很简单，如下所示：

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

最后，您必须定义一个tooltips.filter ，以便工具提示仅出现在相关部分。

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

请查看您修改后的代码，看看它是如何工作的。

 var myChartCircle = new Chart('chartProgress', { type: 'doughnut', data: { datasets: [{ label: 'Africa / Population (millions)', percent: 68, backgroundColor: ['#5283ff'] }] }, plugins: [{ beforeInit: (chart) => { const dataset = chart.data.datasets[0]; chart.data.labels = [dataset.label]; dataset.data = [dataset.percent, 100 - dataset.percent]; } }, { beforeDraw: (chart) => { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx; ctx.restore(); var fontSize = (height / 150).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.fillStyle = "#9b9b9b"; ctx.textBaseline = "middle"; var text = chart.data.datasets[0].percent + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); } } ], options: { maintainAspectRatio: false, cutoutPercentage: 85, rotation: Math.PI / 2, legend: { display: false, }, tooltips: { filter: tooltipItem => tooltipItem.index == 0 } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="chartProgress"></canvas>