Angular 从json文件获取数据时，图表未打印

实际上，我想使用JSON数据显示图表。我需要将批量销售数据放入一个数组中

JSON:

我尝试将volumesales放入一个数组，并将其分配给图表中的数据集。但它不起作用

Ts文件

import { Component, OnInit } from '@angular/core';
import {Chart} from 'chart.js';
import { DataService } from "src/app/data.service";

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  BarChart = [];
  BarChart1 = []; 
  dataChart = [];
  volumeSales = [];
  i : number;
  constructor(private _emp: DataService) { 
    this._emp.getSales().subscribe(data => 
      {
        this.dataChart = data;
        this.dataChart = this.dataChart[0]
       // this.volumeSales.push(this.dataChart[`year${2}`]['volumeSales']);
       for(let i=1;i<=5;i++)
        {
          this.volumeSales.push(this.dataChart[`year${i}`]['volumeSales']);
        }
      });
  }
  ngOnInit() {
    this.BarChart = new Chart('barChart', {
      type: 'bar',
    data: {
     labels: ["Year1", "Year2", "Year3", "Year4", "Year5"],
     datasets: [{
         data: this.volumeSales,
     }]
   }
    });
} 
}

---

我需要将volumeSales、valueSales数据放入数组中。我该怎么做呢？

@Sai_chaitanya，在您的组件中进行如下更改

我们将使用ngOnInit而不是构造函数从服务api获取数据。在这里查看更多的差异

尝试一下：

import { Component } from '@angular/core';

import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [], label: 'Volume Sales' },
    { data: [], label: 'Value Sales' }
  ];
  constructor(private _emp: DataService) {
  }
  ngOnInit() {
    this._emp.getSales().subscribe(data => {
      this.barChartLabels = Object.keys(data);
      this.barChartLabels.forEach(label => {
        this.barChartData[0].data.push(data[label]['volumeSales']);
        this.barChartData[1].data.push(data[label]['valueSales']);
      });
    });;
  }
}

在模板中：

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

这是给你的裁判的一封信

---

您是否有示例stackblitz要使用？stackblitz中没有示例如何使用length属性动态查找volumesales数组。在这里，我只是用了Lok Thanq。改变它。

import { Component } from '@angular/core';

import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [], label: 'Volume Sales' },
    { data: [], label: 'Value Sales' }
  ];
  constructor(private _emp: DataService) {
  }
  ngOnInit() {
    this._emp.getSales().subscribe(data => {
      this.barChartLabels = Object.keys(data);
      this.barChartLabels.forEach(label => {
        this.barChartData[0].data.push(data[label]['volumeSales']);
        this.barChartData[1].data.push(data[label]['valueSales']);
      });
    });;
  }
}

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>