使用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>

这是我的组件.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

我不知道剑道图，但你的代码中有一个错误。您正在分配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>

再说一遍，我对剑道图一无所知，因此可能会有更多的错误，但我希望这能帮助你