javascript - 如何编辑 Chart.js donut ？

Question

我想把这些 donut 做得薄一些，厚一些。如何编辑它？

我尝试实现它，它成功地工作了，但它的宽度尺寸。如何设置它。？

Ts 文件。

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-doughnut-chart',
  templateUrl: './my-doughnut-chart.component.html',
  styleUrls: ['./my-doughnut-chart.component.css']
})
export class MyDoughnutChartComponent implements OnInit {
  public doughnutChartLabels = ['Sales Q1', 'Sales Q2', 'Sales Q3', 'Sales Q4'];
  public doughnutChartData = [120, 150, 180, 90];
  public doughnutChartType = 'doughnut';
  constructor() { }
  ngOnInit() {
  }
}

.html 文件

<div style="display: block">
  <canvas baseChart
              [data]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [chartType]="doughnutChartType"></canvas>
</div>

给定的圆形尺寸较薄。

Answer 1

基于docs ，您可以使用选项。

在您的 TS 文件中您可以添加:

export class MyDoughnutChartComponent implements OnInit {
  public options = {
    cutoutPercentage: '10',
  }

然后在你的html文件中:

<div style="display: block">
<canvas baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        [options]="options">
        </canvas>
</div>

DEMO