Chart 支持將其數(shù)據(jù)系列和類別軸綁定到數(shù)組和 Observable。

Kendo UI for Angular最新版工具下載

綁定系列

本節(jié)提供有關(guān) Chart 系列的一般綁定方法的信息。

值數(shù)組

最簡單的數(shù)據(jù)綁定形式涉及為每個(gè)系列提供一組值。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
}

數(shù)組

某些系列要求每個(gè)點(diǎn)有多個(gè)值，例如 Scatter（x 和 y）和 Bubble（x、y 和大小）系列。以下示例演示如何將 Bubble 系列綁定到數(shù)組。

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item type="bubble" [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[] = [[1, 1, 10], [2, 2, 20], [3, 3, 30]];
}

對(duì)象

圖表允許您通過指定要使用的字段（值、類別、X 值、Y 值等）將其綁定到對(duì)象。 這是最常用的綁定類型，因?yàn)樗试S您使用模型而只需很少或無需修改。以下示例演示如何使用綁定類別文本和值配置列系列。

import { Component } from '@angular/core';

interface Model {
product: string;
sales: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
type="column" [data]="seriesData"
field="sales" categoryField="product">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: Model[] = [{
product: 'Chai',
sales: 200
}, {
product: 'Others',
sales: 250
}];
}

對(duì)象組

為數(shù)據(jù)集中的每個(gè)獨(dú)特類別繪制單獨(dú)的系列通常很方便。 例如銷售報(bào)告中每個(gè)產(chǎn)品的折線圖，通常事先不知道確切的類別數(shù)量。

Data Query包提供了一個(gè)方便的groupBy方法，您可以使用該方法將記錄分成組。它需要數(shù)據(jù)和一個(gè) GroupDescriptor，輸出是一個(gè)包含組及其項(xiàng)目的GroupResult。

以下示例演示如何為每個(gè)服務(wù)繪制折線圖。

import { Component } from '@angular/core';

import { groupBy, GroupResult } from '@progress/kendo-data-query';

interface Sample {
interval: number;
service: string;
value: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let item of series"
[data]="item.items" [name]="item.value"
field="value" categoryField="interval"
type="line">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public data: Sample[] = [{
interval: 1, service: 'Service 1', value: 5
}, {
interval: 2, service: 'Service 1', value: 15
}, {
interval: 3, service: 'Service 1', value: 10
}, {
interval: 1, service: 'Service 2', value: 10
}, {
interval: 2, service: 'Service 2', value: 5
}, {
interval: 3, service: 'Service 2', value: 15
}];

public series: GroupResult[];

constructor() {
this.series = groupBy(this.data, [{ field: 'service' }]) as GroupResult[];

// Inspect the resulting data structure in the console
console.log(JSON.stringify(this.series, null, 2));
}
}

綁定類別

Categorical Charts 的類別軸是一個(gè)數(shù)據(jù)綁定組件，就像系列一樣。它支持以下提供類別列表的基本方法：

• 標(biāo)簽數(shù)組
• 類別字段

當(dāng) Chart 綁定日期時(shí)，類別軸提供專用功能。

標(biāo)簽數(shù)組

最簡單的數(shù)據(jù)綁定形式涉及向軸提供類別標(biāo)簽數(shù)組，該列表將按原樣顯示，無需任何修改，系列數(shù)據(jù)點(diǎn)沿軸順序定位。

• 類別的順序與系列數(shù)據(jù)點(diǎn)的順序無關(guān)。
• 類別的數(shù)量必須等于系列中數(shù)據(jù)點(diǎn)的數(shù)量。
• 為了保持順序，系列中的缺失值必須用 null 表示。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[] = [20, 40, 45, 30, 50];
public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

類別字段

前一種方法容易出錯(cuò)，因?yàn)槟枰S護(hù)類別和特定的數(shù)據(jù)順序。 為避免此要求，請(qǐng)將類別綁定到與系列相同的模型對(duì)象。 這樣，系列點(diǎn)和類別將始終自動(dòng)匹配。

import { Component } from '@angular/core';

interface Model {
product: string;
sales: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
type="column" [data]="seriesData"
field="sales" categoryField="product">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: Model[] = [{
product: 'Chai',
sales: 200
}, {
product: 'Others',
sales: 250
}];
}

處理重復(fù)類別

綁定到類別字段可以讓兩個(gè)數(shù)據(jù)點(diǎn)具有相同的類別——以下示例演示了為“Chai”聲明的兩個(gè)值。

import { Component } from '@angular/core';

interface Model {
product: string;
sales: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
type="column" [data]="seriesData"
field="sales" categoryField="product">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: Model[] = [{
product: 'Chai',
sales: 200
}, {
product: 'Chai',
sales: 100
}, {
product: 'Others',
sales: 250
}];
}

在這種情況下，圖表從源數(shù)據(jù)集中獲取數(shù)據(jù)點(diǎn)，并使用聚合函數(shù)生成一個(gè)新點(diǎn)。

默認(rèn)情況下，聚合函數(shù)返回值字段的最大值。 如果類別只包含一個(gè)點(diǎn)，則不加修改地返回它。 即使類別僅包含一個(gè)數(shù)據(jù)點(diǎn)，其他聚合（例如計(jì)數(shù)和總和）也會(huì)產(chǎn)生自己的值。

import { Component } from '@angular/core';

interface Model {
product: string;
sales: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
aggregate="count"
type="column" [data]="seriesData"
field="sales" categoryField="product">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: Model[] = [{
product: 'Chai',
sales: 200
}, {
product: 'Chai',
sales: 100
}, {
product: 'Others',
sales: 250
}];
}

也可以定義自己的聚合函數(shù)，如下例所示。

使用類別綁定時(shí)，將對(duì)所有唯一類別執(zhí)行聚合函數(shù)。

import { Component } from '@angular/core';

interface Model {
product: string;
sales: number;
}

@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
[aggregate]="myAggregate"
type="column" [data]="seriesData"
field="sales" categoryField="product">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: Model[] = [{
product: 'Chai',
sales: 200
}, {
product: 'Chai',
sales: 100
}, {
product: 'Others',
sales: 250
}];

public myAggregate(values: number[], series: any, dataItems: Model[], category: string) {
/* Return a sum of the values */
return values.reduce((n, acc) => acc + n, 0);
}
}

更新數(shù)據(jù)

替換數(shù)組實(shí)例

為了提高瀏覽器的性能，Chart使用了OnPush更改檢測策略。這意味著組件不會(huì)檢測對(duì)數(shù)組實(shí)例的更改——例如，當(dāng)添加元素時(shí)。 要觸發(fā)更改檢測，請(qǐng)為集合創(chuàng)建一個(gè)新的數(shù)組實(shí)例——例如，設(shè)置一個(gè)this.data = [...this.data, {new item}]，來替代this.data.push({new item})數(shù)組。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart [transitions]="false">
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[] = [];

constructor() {
setInterval(() => {
// Clone the array
const data = this.seriesData.slice(0);

// Produce one random value each 100ms
data.push(Math.random());

if (data.length > 10) {
// Keep only 10 items in the array
data.shift();
}

// Replace with the new array instance
this.seriesData = data;
}, 100);
}
}

綁定到 Observable

當(dāng)您將 Chart 綁定到 observable 時(shí)，組件會(huì)在每次新數(shù)據(jù)來自 observable 時(shí)自動(dòng)更新它呈現(xiàn)的信息。 要將 Chart 綁定到 observable，請(qǐng)使用異步管道。

import { Component } from '@angular/core';

import { Observable, interval } from 'rxjs';
import { bufferCount, map } from 'rxjs/operators';

@Component({
selector: 'my-app',
template: `
<kendo-chart [transitions]="false">
<kendo-chart-series>
<kendo-chart-series-item
type="column" [data]="seriesData | async">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
/* Start with an empty observable */
public seriesData: Observable<number[]>;

constructor() {
/* Produce 1 random value each 100ms
and emit it in batches of 10. */
this.seriesData = interval(100).pipe(
map(i => Math.random()),
bufferCount(10)
);
}
}

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級(jí)Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關(guān)系。