Ngx-Chart 不显示数据答案

【问题标题】：Ngx-Chart does not display dataNgx-Chart 不显示数据
【发布时间】：2020-09-18 23:29:12
【问题描述】：

我目前在我的 Angular 项目中使用 Ngx-Charts。我的图表数据来自一个 Node.js Web 服务，它给出以下响应：

[{name: "ALB", value: 2188679.1133568},{name: "OFF", value: 1440804.2389714},{name: "SL1", value: 971553.8710496},{name: "HDS", value: 793200.8299244},{name: "YAC", value: 183228.7398208},{name: "DWK", value: 104339.702865},{name: "SS1", value: 54080.201656},{name: "SIM", value: 44772.373923},{name: "ELS", value: 755.211371}]

我正在尝试将其解析为我的 component.ts 文件中的一个数组，然后将该数组传递到我的 component.html 文件中的图表画布中。但是，虽然我能够在控制台上显示响应，但我无法在图表上显示数据。我看到的只是带有 x 和 y 轴的空白图表，但没有关于它们的数据。我不明白我哪里出错了。

我的 component.ts 文件：

export class DashboardComponent implements OnInit{

  isBrowser: boolean;

  verticalBarOptions = {
    showXAxis: true,
    showYAxis: true,
    gradient: false,
    showLegend: true,
    showGridLines: true,
    barPadding: 25,
    showXAxisLabel: false,
    xAxisLabel: 'Country',
    showYAxisLabel: true,
    yAxisLabel: 'Sales'
  };

  locWData: any[]; 

  colorScheme = {
    domain: ['#0000FF', '#154360', '#17202A', '#21618C', '#2E86C1', '#85C1E9', '#2E86C1', '#34495E', '#21618C', '#154360']
  };

  constructor(@Inject(PLATFORM_ID) private platformId: object, private service: ReportsService) {
    this.locWData = [];
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit(): void {
    this.service.getAllLocWiseStock().subscribe((response : any) => {
      //console.log(response.recordset);
      for (let i = 0; i < response.recordset.length; i++) {
        this.locWData.push({name: response.recordset[i].LOCATION_ID, value: response.recordset[i].AMOUNT})
      }
      console.log(this.locWData);
    });
  }
}

还有component.html文件：

<div class="col-12 chart-card”>
  <div>
    <div class="chart-card-header">
      <span>Location-wise Sales</span>
    </div>
    <div class="chart-card-body bar-vertical">
      <ngx-charts-bar-vertical *ngIf="isBrowser"
        [scheme]="colorScheme"
        [results]="locWData"
        [gradient]="verticalBarOptions.gradient"
        [xAxis]="verticalBarOptions.showXAxis"
        [yAxis]="verticalBarOptions.showYAxis"
        [legend]="verticalBarOptions.showLegend"
        [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
        [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
        [xAxisLabel]="verticalBarOptions.xAxisLabel"
        [yAxisLabel]=“verticalBarOptions.yAxisLabel"
        [barPadding]="verticalBarOptions.barPadding"
        [showGridLines]="verticalBarOptions.showGridLines">
      </ngx-charts-bar-vertical>
    </div>
  </div>
</div>
<div class="col-12 chart-card">
  <div>
    <div class="chart-card-header">
      <span>Location-wise Sales Distribution</span>
    </div>
    <div class="chart-card-body pie-grid">
      <ngx-charts-advanced-pie-chart *ngIf="isBrowser"
        [label]="'Points'"
        [scheme]="colorScheme"
        [results]="locWData">
      </ngx-charts-advanced-pie-chart>
    </div>
  </div>
</div>

【问题讨论】：

请提供带有虚拟数据的 stackblitz 演示

标签： angular ngx-charts

【解决方案1】：

在这个堆栈闪电战中，它似乎填满了图表。即使您更改高级饼图的数据：

https://stackblitz.com/edit/angular-ivy-em7rez?file=src%2Fapp%2Fdashboard%2Fdashboard.component.ts

【讨论】：