Chart 支持將其數據系列和類別軸綁定到數組和 Observable。

Kendo UI for Angular最新版工具下載

綁定系列

本節提供有關 Chart 系列的一般綁定方法的信息。

值數組

最簡單的數據綁定形式涉及為每個系列提供一組值。

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];
}

數組

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

@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]];
}

對象

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

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
}];
}

對象組

為數據集中的每個獨特類別繪制單獨的系列通常很方便。 例如銷售報告中每個產品的折線圖，通常事先不知道確切的類別數量。

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

以下示例演示如何為每個服務繪制折線圖。

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 的類別軸是一個數據綁定組件，就像系列一樣。它支持以下提供類別列表的基本方法：

• 標簽數組
• 類別字段

當 Chart 綁定日期時，類別軸提供專用功能。

標簽數組

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

• 類別的順序與系列數據點的順序無關。
• 類別的數量必須等于系列中數據點的數量。
• 為了保持順序，系列中的缺失值必須用 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'];
}

類別字段

前一種方法容易出錯，因為您需要維護類別和特定的數據順序。 為避免此要求，請將類別綁定到與系列相同的模型對象。 這樣，系列點和類別將始終自動匹配。

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
}];
}

處理重復類別

綁定到類別字段可以讓兩個數據點具有相同的類別——以下示例演示了為“Chai”聲明的兩個值。

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
}];
}

在這種情況下，圖表從源數據集中獲取數據點，并使用聚合函數生成一個新點。

默認情況下，聚合函數返回值字段的最大值。 如果類別只包含一個點，則不加修改地返回它。 即使類別僅包含一個數據點，其他聚合（例如計數和總和）也會產生自己的值。

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
}];
}

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

使用類別綁定時，將對所有唯一類別執行聚合函數。

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);
}
}

更新數據

替換數組實例

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

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

當您將 Chart 綁定到 observable 時，組件會在每次新數據來自 observable 時自動更新它呈現的信息。 要將 Chart 綁定到 observable，請使用異步管道。

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系列商業產品的最新產品。Kendo UI for Angular是專用于Angular開發的專業級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。