Изменить размер одного сегмента пирога ChartJS в Angular? - PullRequest
0 голосов
/ 23 октября 2019

Простой вопрос, заданный в теме - я боролся с этим пару часов, гуглял и играл с кодом, но не могу найти никакого решения.

БОНУСНЫЙ вопрос: Как я могу отформатировать легенду, чтобы каждая метка была в отдельной строке?

Итак, первая картинка показывает, что мне удалось создать:

https://imgur.com/GDASyiV

В то время как второй показывает, что я хочу сделать:

https://imgur.com/34nneia

Ниже кода:

HTML

    [data]="pieChartData" 
    [labels]="pieChartLabels" 
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [colors]="pieChartColors"
    [legend]="pieChartLegend">
  </canvas> 

.TS

 export class AppComponent  {
 // Pie
  public pieChartOptions: ChartOptions = {
    responsive: true,
    plugins: {
      datalabels: {
        align: 'top',
        color: ['white', 'rgba(59,97,25,1)'],
        /* formatter: function (value){
          return Math.round (value) + '%';
        }, */
        font: {
          family: 'sans-serif',
          weight: 'normal',
          size: 19,
        }
      }
    },
    legend: {
      position: 'bottom',
      fullWidth: true,
      display: true,
      labels: {
        fontSize: 14,
        boxWidth: 15,
        padding: 10
      }
    },
    elements: {
      arc: {borderWidth: 0}
    },
    layout: {
      padding: {
        bottom: 0
      }
    },

  };

  public pieChartLabels: Label[] = ['Sklepy aktywne', 'Wszystkie sklepy'];
  public pieChartData: SingleOrMultiDataSet = [124, 590];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [pluginDataLabels];
  public pieChartColors = [
    {
      backgroundColor: ['rgba(59,97,25,1)', 'rgb(190, 198, 185)']
    }
  ];

  constructor() {
    monkeyPatchChartJsTooltip();
    monkeyPatchChartJsLegend();
  } 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...