Как установить минимальную ширину значений в кольцевой диаграмме? - PullRequest
Новая
       47

Как установить минимальную ширину значений в кольцевой диаграмме?

0 голосов
/ 22 марта 2020

Я использую библиотеку ng2-charts в моем проекте Angular, и все работает отлично, но когда вы добавляете много значений в вашу кольцевую диаграмму, особенно маленькие, то она становится действительно маленькой (см. изображение ниже). И чтобы сделать это более читабельным, я хотел бы установить минимальную ширину для значений, которая делает большие значения немного меньше. Возможно ли это?

2]

См. Пример: https://stackblitz.com/edit/angular-q1j5ev

1 Ответ

0 голосов
/ 22 марта 2020

Вы можете агрегировать все низкие значения в одном уникальном слайсе пончика, например, для значений <50. </p>

Затем, когда пользователь нажимает на этот агрегированный слайс, другой пончик может отображаться со всеми значениями <50. </p>

Для этого используйте событие (chartClick) в элементе baseChart. 

<div class="chart-wrapper">

    <canvas baseChart height="300" [options]="mainOptions" 
    [data]="mainData" [chartType]="'doughnut'"
        (chartClick)="chartClicked($event)">
    </canvas>
</div>

<div class="chart-wrapper" *ngIf="zoomEnabled">

    <canvas baseChart height="300" [options]="zoomOptions" 
    [data]="zoomData" [chartType]="'doughnut'"
        (chartClick)="chartClicked($event)">
    </canvas>

    <button *ngIf="zoomEnabled" (click)="disableZoom()">Hide</button>
</div>

Установите флаг zoomEnabled в значение true, когда пользователь нажал на Others slice: 

chartClicked({ event, active }: { event: MouseEvent; active: {}[] }): void {
  const chart = (active[0] as any)._chart;
  const activePoints = chart.getElementAtEvent(event);
  const clickedElementIndex = activePoints[0]._index;

  if (clickedElementIndex === 0) {
    this.enableZoom();
  }
}

PS: здесь мы считаем, что срез с index: 0 является агрегированным срезом с более низкими значениями. Но вы можете представить более сложный сценарий с метками ...

См. это упрощенное демо Stackblitz .

...