Угловые ngx-диаграммы

Я создал график с ngx-диаграммами, но я не могу сделать несколько вещей: я хотел бы поместить общее число в центр графика и изменить клевету всего слова. Я бы хотел, например, 9 легенд. Тогда я бы хотел расположить свои легенды вертикально, а не горизонтально. Я бы хотел иметь: Легенда: номер. Я бы не хотел иметь процент

  <ngx-charts-advanced-pie-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
  >
  </ngx-charts-advanced-pie-chart>


  public single = [
  {
   "name": "Légend 1",
   "value": 4
  },
  {
   "name": "Légend 2",
   "value": 3
  },
  {
   "name": "Légend 3",
   "value": 2
  }
  ];


  view: any[] = [700, 400];


  colorScheme = {
   domain: ['#edbb48', '#999999', '#f29011']
  };

В настоящее время это выглядит так: https://swimlane.gitbook.io/ngx-charts/v/docs-test/examples/pie-charts/advanced-pie-chart


person dna    schedule 04.07.2019    source источник
comment
Помогите, пожалуйста. Это очень важно   -  person dna    schedule 05.07.2019


Ответы (1)


Продвинуть круговую диаграмму в ngx-chart с опцией valueFormatting, используя эту опцию, вы можете отформатировать числовое значение в легенде диаграммы. Для положения легенды вы можете отрегулировать положение легенды с помощью атрибута legendPosition, но он не будет служить вашим целям, если вам нужна легенда в центре круговой диаграммы. Я думаю, вам нужно создать собственный компонент на основе ngx-cahrts, в котором вы перезаписываете структуру SVG. Также изучите ngx-charts-advanced-legend.

https://swimlane.gitbook.io/ngx-charts/custom-charts

person Nils    schedule 06.08.2019