Question

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

JSON：

__typeof

我通过将批量销售放入数组并将其分配给图表中的数据集来进行尝试。但这不起作用。

Ts文件

{
  "year1": {
    "volumeSales": "0.09",
    "valueSales": "1.23"
  },
  "year2": {
    "volumeSales": "0.11",
    "valueSales": "1.56"
  },
  "year3": {
    "volumeSales": "0.12",
    "valueSales": "1.69"
  },
  "year4": {
    "volumeSales": "0.12",
    "valueSales": "1.64"
  },
  "year5": {
    "volumeSales": "0.10",
    "valueSales": "1.41"
  },
  "total": {
    "volumeSales": "0.55",
    "valueSales": "7.53"
  }
}

我需要volumeSales，valueSales数据到一个数组中。我该怎么办？

Answer 1

@Sai_chaitanya，对组件进行如下更改。

我们将使用ngOnInit()而不是constructor()从服务api获取数据。在此处查看Constructor and ngOnInit

之间的更多差异

   constructor(private _emp: DataService) { }


   ngOnInit() {
      this.fetchChartData();
    }

   fetchChartData(){
      this._emp.getSales().subscribe(data =>  {
        this.dataChart = data;
        this.dataChart = this.dataChart[0]
         Object.keys(this.dataChart).map(data => {
           if (data.substring(0, 4) == 'year') {
             this.volumeSales.push(this.dataChart[data]['volumeSales']);
           }
         })
       this.calChart();     // call the Chart when data is available 
      });
    }

  callChart(){
     this.BarChart = new Chart('barChart', {
        type: 'bar',
        data: {
         labels: ["Year1", "Year2", "Year3", "Year4", "Year5"],
         datasets: [{
             data: this.volumeSales,
         }]
       }
     });
  }

Answer 2

尝试一下：

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>

这是您推荐的Working Sample StackBlitz。

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

2 个答案: