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

【问题标题】：How to set a minimum width on the values in a doughnut chart?如何在圆环图中的值上设置最小宽度？
【发布时间】：2020-03-22 23:05:44
【问题描述】：

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

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

【问题讨论】：

并不真正了解您想要达到的目标。切片大小与每个值成正比，所以“在值上设置最小宽度，使较大的值变小一点”是什么意思。 ?
例如，值 '1' 变得更宽，以便您至少可以阅读它（以便数字完全可读），其余部分将适应，从而调整圆环图的大小
但如果值 '1' 变宽，其他值将不遵守比率，图表将不再是圆环图。也许你可以考虑在这种情况下，为低值创建一个唯一的幻灯片，例如 others，用户可以点击它来查看另一个对这个低值进行钻取的甜甜圈。
@Jamie 检查这篇文章stackoverflow.com/questions/42833543/…
@ThierryFalvo，好的。这听起来确实是一个好方法。你知道'ng2-charts'是否允许这样做，或者你有一个可行的例子吗？

标签： angular chart.js ng2-charts

【解决方案1】：

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

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

为此，请在您的 baseChart 元素上使用 (chartClick) 事件。

<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>

当用户点击Others 切片时，将zoomEnabled 标志设置为真：

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 的切片是具有较低值的聚合切片。但是你可以想象一个更复杂的带有标签的场景......

见this simplified Stackblitz demo。

【讨论】：