angular - 如何设置圆环图的边框宽度

Question

我正在制作一个组件来使用 ng2-charts 显示圆环图。

组件属性

@Input() data: MultiDataSet;
@Input() labels: Label[];
@Input() colors: Color[];
@Input() legend: boolean;

datasets: ChartDataSets = {
  borderWidth: 2
};
options: ChartOptions = {
  responsive: true
};

模板

<canvas
  baseChart
  [data]="data"
  [labels]="labels"
  [colors]="colors"
  [legend]="legend"
  [datasets]="datasets"
  [options]="options"
  chartType="doughnut"
  *ngIf="data?.length"
>
</canvas>

图表按预期显示，但边框宽度太大。 Chart 不会对数据集值使用react。如何设置 donut 的宽度？

Answer 1

import { ChartType } from 'chart.js';
import { MultiDataSet, Label, Color } from 'ng2-charts';

public doughnutChartLabels: Label[] = [];
  public doughnutChartColors: Color[] = [
    {
      backgroundColor:["#fff","ff0000","#fff","ff0000", "#fff","ff0000"],
      borderColor: ["#FF0000", "#FF0000","#FF0000", "#FF0000","#FF0000", "#FF0000"],
      borderWidth: 2
    }
  ];
  public doughnutChartData: MultiDataSet = [
    [20, 100, 0, 120, 0, 120],
  ];
  public chartOptions = {
    cutoutPercentage: 80,
    tooltips: {
      enabled: false
    }
  };
  public doughnutChartType: ChartType = 'doughnut';

发件人:https://www.chartjs.org/docs/latest/