Chart.js（圆环图）中的内半径未更改

Question

我正在使用 Chart.js，我想要一个半圆环图，如下图所示。但我没能改变馅饼的厚度。我尝试了属性innerRadius，但它仍然不起作用

这是我的代码

public getHalfDoughnutChart(records) {
    let data = {
       labels: ["Worked Hours","Remaining Hours"],
       datasets: [{
       label: 'Today\'s Worked Hours',
       data: [records.length? records[0].duration.hour: 0,9],
       backgroundColor: [
          'rgba(75, 174, 79, 1)',
          'rgba(255, 255, 255, 0)'
       ]
     }]
 };

    let options = {
      circumference: Math.PI,
      rotation: 1.0 * Math.PI,
      innerRadius: "10%",
      legend: {
        display: false
      },
      layout:{
        padding:40
      }, 
    }

     return this.getChart(this.halfDoughnutCanvas.nativeElement, "doughnut", data, options);
  }



getChart(context, chartType, data, options?) {
   return new Chart(context, {
      type: chartType,
      data: data,
      options: options
   });
}

Answer 1

您应该在

percentageInnerCutout

对象中使用

options

属性

let options = {
  circumference: Math.PI,
  rotation: 1.0 * Math.PI,
  percentageInnerCutout: 10,
  legend: {
    display: false
  },
  layout:{
    padding:40
  }, 
}

您还可以检查这个问题如何使用ChartJs改变圆环图的厚度？

P.S. 据我了解，这取决于版本，所以

如果 Chart.js 版本 > 2.0 使用

cutoutPercentage

否则使用

percentageInnerCutout

Answer 2

在图表 JS 2.0 中它应该看起来像这样

var options = {        
    cutoutPercentage: 40
};

CodePen：https://codepen.io/anon/pen/VVeOZZ?editors=0010

Answer 3

您可以设置切口选项来更改圆环图的内半径

options: {
    cutout: 30, // Set cutout in pixels
}

或者您可以按以下百分比设置剪切

options: {
    cutout: "30%", // Set cutout in percentage
}