ngx-charts结果/数据数组更新问题答案

【问题标题】：ngx-charts results/data array update issue in angularngx-charts结果/数据数组更新问题
【发布时间】：2020-12-23 06:20:37
【问题描述】：

我在我的 Angular 8 项目中使用 ngx-charts-bar-horizontal。当我在 ngOninit 函数中加载结果/数据数组时，它工作正常。

但我想在单击按钮时更改现有数据。它将新数据加载到图表中。

<ngx-charts-bar-horizontal

  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)"
  (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)"
  [legendPosition]="'below'">
</ngx-charts-bar-horizontal>

这在 ngOnInit 中运行良好



 single: any = [
    {
      "name": "API",
      "value": 90
    },
    {
      "name": "DB",
      "value": 12
    },
    {
      "name": "File",
      "value": 1
    },
    {
      "name": "Message/Event",
      "value": 3
    },
    {
      "name": "Poll",
      "value": 15
    }
  ];

单击按钮时，我会调用 api 来获取新数据并推送到结果数组。



this.dashboardservice.getCapabilitiesData(data).subscribe(response => {
          this.single=[];
          this.capabilitiesData = response;

          if (this.capabilitiesData.muelCapabilityGraph) {

            Object.keys(this.capabilitiesData.muelCapabilityGraph).forEach(key => {
              var obj = {
                "name": key,
                "value": this.capabilitiesData.muelCapabilityGraph[key]
              }
              this.single.push(obj);
            });

          }
          this.single=[...this.single];
          console.log("single-->"+JSON.stringify(this.single))
        });

this.single Has the new data but chart is blank.

我不确定为什么图表没有用新数据更新。请帮忙！

【问题讨论】：

终于找到了答案。 this.single=[...this.single];.我们需要在对结果数据进行任何更新后进行自我分配。这将触发图表更新。

标签： angular ngx-charts

【解决方案1】：

我从swimlane-ngxcharts 分叉了一个项目，并添加了一项功能，可在单击按钮时添加列/栏（“添加数据”）。请看一看。 stackblitz 上的代码：link

【讨论】：