小编Aym*_* bz的帖子

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

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

在此处输入图片说明

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

HTML:

<canvas id="chartProgress" width="300px" height="200"></canvas>
Run Code Online (Sandbox Code Playgroud)

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%", …
Run Code Online (Sandbox Code Playgroud)

javascript chart.js

5
推荐指数
1
解决办法
6412
查看次数

标签 统计

chart.js ×1

javascript ×1