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依賴關系。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都網
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線