使用 API 中的数据创建堆积条形图

Question

我是 angular 的初学者，我尝试使用 API 中的 json 数据和 kendo 图表来创建图表。我使用服务文件导入数据。它在控制台中显示数据但不创建图表。

这是我的 component.html 文件。

<kendo-chart [style.height]="'90%'" [style.width]="'90%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let item of series"
                             [data]="item.items" [name]="item.value"
                             field="value" categoryField="interval"
                             type="column" stack="true">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

这是我的 component.ts 文件

import { Component, OnInit } from '@angular/core';
import { groupBy, GroupResult } from "@progress/kendo-data-query";
import { StackedBarChartService } from './stacked-bar-chart.service';
  @Component({
  selector: 'app-stacked-bar-chart',
  templateUrl: './stacked-bar-chart.component.html',
  styleUrls: ['./stacked-bar-chart.component.css']
})
export class StackedBarChartComponent implements OnInit {
  public series: GroupResult[];
  stackedbarchartdata: any = [];
  constructor(private StackedBarChart: StackedBarChartService) {    
  }
    ngOnInit() {
    this.series = groupBy(this.stackedbarchartdata, [{ field: 'service' }]) as GroupResult[];
    this.StackedBarChart.getMethod().subscribe((res: any) => {
    this.stackedbarchartdata = res;
    console.log(this.stackedbarchartdata);
    })
  }
}

这是我的数据集

[
  {
    "id": 1,
    "interval": 1,
    "service": "Service 1",
    "value": 5
  },
  {
    "id": 2,
    "interval": 2,
    "service": "Service 1",
    "value": 15
  },
  {
    "id": 3,
    "interval": 1,
    "service": "Service 2",
    "value": 10
  },
  {
    "id": 4,
    "interval": 2,
    "service": "Service 2",
    "value": 5
  },

Answer 1

我不知道 kendo 图表，但您的代码中有错误。您正在分配 this.series = groupBy ..... 但此时 stackedbarchartdata 仍为 null 因此 this.serie 将始终为 null 或为空。你应该把它移到subscribe里面，看看：

ngOnInit() {
  this.StackedBarChart.getMethod().subscribe((res: any) => {
    this.stackedbarchartdata = res;
    console.log(this.stackedbarchartdata);
    this.series = groupBy(this.stackedbarchartdata, [{ field: 'service' }]) as GroupResult[];
    console.log(this.series);
  });
}

并在 HTML 中：

<h1 *ngIf="!series">Loading...</h1>
<kendo-chart *ngIf="series" [style.height]="'90%'" [style.width]="'90%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let item of series"
                             [data]="item.items" [name]="item.value"
                             field="value" categoryField="interval"
                             type="column" stack="true">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

同样，我对 kendo 图表一无所知，因此可能会有更多错误，但我希望这对您有所帮助

使用 API 中的数据创建堆积条形图

Create stacked bar chart using data in API

json

angular

charts

kendo-ui

httpclient