我正在使用范围栏类型来实现一些要求(请参阅URL)。问题是数据是动态的,有没有办法处理动态数据?在下面的示例中,只有两组记录 data1 和 data2,在我的例子中,它可能超过 5 组,并且它是动态的。
<kendo-chart style="height: 200px;" [valueAxis]="{ min: 1765 }">
<kendo-chart-series>
<kendo-chart-series-item type="rangeBar" [spacing]="-1"
[data]="data1" fromField="start" toField="end" categoryField="category">
</kendo-chart-series-item>
<kendo-chart-series-item type="rangeBar"
[data]="data2" fromField="start" toField="end" categoryField="category">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
public data1 = [
{ category: "A", start: 1765, end: 1780, color: 'blue' },
{ category: "B", start: 1765, end: 1798, color: 'blue' },
{ category: "C", start: 1765, end: 1802, color: 'blue' }
];
public data2 = [
{ category: "A", start: 1780, end: 1798, color: 'red' },
{ category: "B", start: 1798, end: 1802, color: 'red' },
{ category: "C", start: 1802, end: 1810, color: 'red' }
];
要求:https://i.stack.imgur.com/G7VkI.png
Finally I solved it
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart style="height: 200px;" [valueAxis]="{ min: 100 }">
<kendo-chart-series>
<kendo-chart-series-item
type="rangeBar" [spacing]="-1"
*ngFor="let series of model" [data]="series.data"
fromField="start" toField="end" categoryField="category">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public data1 = [
{ category: "A", start: 100, end: 110, color: 'blue' },
{ category: "B", start: 110, end: 120, color: 'blue' },
{ category: "C", start: 120, end: 130, color: 'blue' }
];
public data2 = [
{ category: "A", start: 120, end: 130, color: 'red' },
{ category: "B", start: 130, end: 140, color: 'red' },
{ category: "C", start: 140, end: 150, color: 'red' }
];
public showSeries: boolean = false;
public model = [];
constructor(){
this.model.push({ data:this.data1 });
this.model.push({data:this.data2 });
console.log(JSON.stringify(this.model));
}
}