Как установить ширину границы для кольцевой диаграммы

Я делаю компонент для отображения кольцевой диаграммы с помощью 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>

Диаграмма отображается так, как предполагается, за исключением того, что ширина границы слишком велика. График не реагирует на значение набора данных. Как установить ширину пончика?


angular ng2-charts
person orlyohreally    schedule 26.09.2019    source источник
comment
Я тоже искал это решение. ты нашел?   -  person Arslan Ameer    schedule 03.03.2020
comment
@ArslanAmeer, все еще нет :(   -  person orlyohreally    schedule 03.03.2020
comment
borderWidth: 2 как в приведенном ниже примере   -  person scarto    schedule 30.07.2020

Ответы (2)


arrow_upward
0
arrow_downward

У меня была та же проблема, и я немного покопался на странице документации ng2-charts < / а>. На странице круговой диаграммы есть этот код 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>
person krummens    schedule 23.07.2020

arrow_upward
0
arrow_downward 

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/

person scarto    schedule 30.07.2020