如何使用 ng2-charts 在圆环图上设置切口？答案

【问题标题】：How to set cutout on doughnut chart using ng2-charts?如何使用 ng2-charts 在圆环图上设置切口？
【发布时间】：2022-09-30 18:48:28
【问题描述】：

我需要一些帮助来弄清楚如何使用 ng2-charts 在我的圆环图上设置配置选项。特别是，我想在我的图表上设置 cutout 属性。我已经阅读了所有的文档图表-js和ng2 图表，但遗憾的是没有找到可行的解决方案。

控制台抛出的错误是

输入 \'{ 选项：{ 剪裁：数字； }; }\' 不可分配给类型 \'_DeepPartialObject<CoreChartOptions & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>\'。

这是我的 html 和 ts 文件：

import {
  Component
} from \'@angular/core\';
import {
  ChartData,
  ChartType,
  ChartOptions
} from \'chart.js\';
@Component({
  selector: \'app-summary-chart\',
  templateUrl: \'./summary-chart.component.html\',
  styleUrls: [\'./summary-chart.component.scss\']
})
export class SummaryChartComponent {

  // Doughnut
  doughnutChartType: ChartType = \'doughnut\';
  doughnutChartLabels: string[] = [\'Tickets\', \'Free sales\'];
  doughnutChartData: ChartData < \'doughnut\' > = {
    labels: this.doughnutChartLabels,
    datasets: [{
      data: [60, 40],
      backgroundColor: [\"#ef2c49\", \"#1c4d86\"],
      rotation: 90,
    }, ],
  };

  // TODO resolve type ChartOptions not working
  doughnutChartOptions: any = {
    cutout: \"70%\"
  }

  // ---------------------------------------------------- THIS DOES NOT WORK
  public DonutChartOptions: ChartOptions = {
    options: {
      cutout: \"70%\"
    }
  };
}

<div class=\"chart-wrapper\">
  <canvas baseChart [data]=\"doughnutChartData\" [type]=\"doughnutChartType\" [labels]=\"doughnutChartLabels\" [options]=\"doughnutChartOptions\"></canvas>
</div>

标签： javascript angular chart.js ng2-charts

【解决方案1】：

您需要向ChartOptions 指定它是针对特定于甜甜圈的，如果您这样做，它可以正常工作：

public DonutChartOptions: ChartOptions<'doughnut'> = {
  options: {
    cutout: "70%"
  }
};

TS playground link

【讨论】：

【解决方案2】：

这适用于 ng2-charts (v.3.1.2) 和 chart.js (v.3.9.1)。希望它也能帮助你。

public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
 cutout: '80%'
};

【讨论】：