UI組件庫Kendo UI for Angular入門指南教程 - 圖表功能配置

Kendo UI for Angular圖表提供了一組配置選項，使您能夠指定其操作。

Kendo UI for Angular最新版工具下載

該圖表使您能夠：

• 使用配置組件；
• 使用內聯選項；
• 通過 Angular 結構指令構建配置組件

配置組件

Chart 提供了配置組件，例如 kendo-chart-series，它允許您：

• 自定義單個圖表元素的外觀
• 顯示不同類型的數據系列
• 綁定到您組件提供的數據

內聯選項

除了使用配置組件之外，Chart 還接受配置屬性作爲普通對象。 因此，數據的表示更加緊湊，適用於在整個應用程序生命週期中持續存在的設置。

配置組件和內聯選項提供了混合和匹配它們的選項。

注意：配置組件和內聯選項更新同一個內部存儲，如果一個屬性是通過使用它們兩者來配置的，那麼配置組件將優先於 inline 選項。

以下示例演示僅考慮 kendo-chart-series 組件。

 

@Component({
selector: 'my-app',
template: `
<kendo-chart [title]="chartTitle" [series]="chartSeries">
<kendo-chart-series>
<kendo-chart-series-item [data]="[5, 3, 2, 1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public chartSeries: any[] = [{ data: [1, 2, 3, 5] }];
public chartTitle: any = { text: 'Sample Chart' };
}

 

結構指令

您可以使用 Angular 結構指令構建配置組件。

以下示例演示瞭如何切換單個系列的可見性。

 

@Component({
selector: 'my-app',
template: `
<button (click)="toggleSeries()">Toggle second series</button>
<kendo-chart [transitions]="showTransitions">
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3, 5]">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="[5, 3, 2, 1]" *ngIf="showSeries">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public showSeries: boolean = false;
public showTransitions: boolean = true;

public toggleSeries() {
this.showSeries = !this.showSeries;
this.showTransitions = false;
}
}

 

另一個常見的場景是從存儲在組件中的視圖模型構建系列。

以下示例演示瞭如何使用 ngFor 指令。

 

@Component({
selector: 'my-app',
template: `
<button (click)="addSeries()">Add series</button>
<kendo-chart [transitions]="false">
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let series of model"
[name]="series.name"
[data]="series.data">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public showSeries: boolean = false;
public model = [];

public addSeries() {
this.model.push({
name: `Series #${this.model.length + 1}`,
data: [ Math.random(), Math.random(), Math.random() ]
});
}
}

 

框架以通常的方式檢測和應用對組件狀態所做的所有更改。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用於Angular開發的專業級Angular組件。telerik致力於提供純粹的高性能Angular UI組件，無需任何jQuery依賴關係。

---

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！