Angular ngx-图表

Question

我用 ngx-charts 创建了一个图表，但我不能做几件事：我想把总数字放在图表的中心，并改变总词的诽谤。我想要例如 9 Legends。然后我想垂直而不是水平放置我的图例。我想有：图例：号码。我不想有一个百分比

  <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

Answer 1

ngx-chart 中的 Advance 饼图具有 'valueFormatting' 选项，使用此选项您可以格式化图表图例中的数值。对于图例位置，您可以使用 'legendPosition' 属性调整图例的位置，但如果您需要饼图中心的图例，它就无法达到您的目的。我认为您需要创建一个基于 ngx-cahrts 的自定义组件，您可以在其中覆盖 SVG 结构。另外，探索 ngx-charts-advanced-legend。

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

Angular ngx-图表

Angular ngx-charts

angular

ngx-charts