Angular ngx 图表答案

【问题标题】：Angular ngx-chartsAngular ngx 图表
【发布时间】：2019-11-15 10:31:08
【问题描述】：

我已经用 ngx-charts 创建了一个图表，但我不能做几件事：我想把总数放在图表的中心，并更改总数的诽谤。例如，我想要 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

【问题讨论】：

请帮忙。这很重要

标签： angular ngx-charts

【解决方案1】：

ngx-chart中的高级饼图有'valueFormatting'选项，使用这个选项你可以格式化图表图例中的数值。对于图例位置，您可以使用“legendPosition”属性调整图例的位置，但在饼图中心需要图例的情况下，它不能满足您的目的。我认为您需要创建一个基于 ngx-cahrts 的自定义组件，在其中覆盖 SVG 结构。另外，探索 ngx-charts-advanced-legend。

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

【讨论】：