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

Question

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

JSON:

{
  "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"
  }
}

我尝试将销售量放入数组并将其分配给图表中的数据集。但它不起作用。

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`]['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 数据放入一个数组中。我该怎么做？

Answer 1

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

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

之间的更多差异

   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>

Here's a Working Sample StackBlitz for your ref.

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

Chart is not printing while fetching the data from json file

angular

angular6

angular7