angular - 如何在圆环图中的值上设置最小宽度？

Question

我在我的 Angular 项目中使用了ng2-charts库，它工作得很好，但是当你在圆环图中添加许多值时，尤其是小的值，它就会变得非常小（见下图）。为了使其更具可读性，我想在值上设置一个最小宽度，使较大的值更小一些。这可能吗？

参见示例：
https ://stackblitz.com/edit/angular-q1j5ev

标签： angularchart.jsng2-charts

Answer 1

您可以在一个独特的甜甜圈切片中聚合所有低值，例如值 < 50。

然后当用户点击这个聚合切片时，可以显示另一个甜甜圈，所有值 < 50。

为此，请在您的元素上使用(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当用户单击Othersslice时，将标志设置为 true：

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：在这里，我们认为 slice withindex: 0是具有较低值的聚合切片。但是你可以想象一个更复杂的带有标签的场景......

请参阅这个简化的 Stackblitz 演示。