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>

图表显示为与边框宽度相差太大。图表对数据集值无反应。如何设置甜甜圈的宽度？

Answer 1

我遇到了同样的问题，并且在ng2-charts documentation page上进行了一些探索。饼图页面上有适用于我的甜甜圈图的TypeScript代码：

public doughnutChartData: MultiDataSet = [
  [350, 450, 100], // Dataset 1
  [100, 200, 300], // Dataset 2
];

public doughnutChartColors: Color[] = [
  // Colors for Dataset1
  {
    backgroundColor: ['rgba(255,0,0,0.3)', 'rgba(0,255,0,0.3)', 'rgba(0,0,255,0.3)']
  }

  // Colors for Dataset2
  {
    backgroundColor: ['red', 'green', 'blue']
  }
];

然后在组件标记中：

<canvas 
    baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="doughnutChartColors">
</canvas>

Answer 2

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/

如何为甜甜圈图设置边框宽度

2 个答案: