本文提供了開始使用Kendo UI for Angular圖表所需的信息，包括有關的安裝方法、所需依賴項、運行項目的代碼以及其他一些資源說明。Charts Package 是 Kendo UI for Angular 的一部分，這是一個專業級的 UI 庫，具有 100 多個組件，用於構建現代且功能豐富的應用程序。
完成本指南後，您將能夠獲得如下示例所示的最終結果。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart style="height:250px">
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 4, 5, 2, 1, 8]"> </kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {}
設置您的 Angular 項目
在開始安裝任何Kendo UI for Angular控件之前，請確保您有一個正在運行的Angular項目。無論您要使用什麼Kendo UI for Angular包，完成組件安裝的先決條件是相同的。
安裝組件
您可以選擇使用以下兩種方法當中的一種來安裝Kendo UI for Angular包和您要應用的樣式：
- 使用 Angular CLI 快速設置
- 手動設置
使用 Angular CLI 快速設置
快速設置提供了一種通過 ng-add 命令使用 Angular CLI 添加包的自動方法，它適用於節省時間和精力，因爲 ng-add 在單個步驟中執行一組其他單獨需要的命令。
要爲Angular Charts包添加Kendo UI，請運行以下命令：
ng add @progress/kendo-angular-charts
因此，ng-add 命令將執行以下操作：
- 將 @progress/kendo-angular-charts 包添加爲 package.json 文件的依賴項。
- 在當前應用程序模塊中導入 ChartsModule。
- 在 angular.json 文件中註冊 Kendo UI 默認主題。
- 將所有必需的對等依賴項添加到 package.json 文件中。
- 觸發 npm install 安裝主題和所有添加的對等包。
手動設置
手動設置提供了對安裝在 Angular 應用程序中的文件和引用的更高可見性和更好的控制，您可以通過爲每個步驟運行單獨的命令並在應用程序根或功能模塊中導入所需的組件模塊來安裝所需的對等依賴項和 Kendo UI 主題。
1. 通過運行以下命令安裝 Charts 包及其依賴項：
npm install --save @progress/kendo-angular-charts @progress/kendo-angular-common @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-drawing hammerjs @progress/kendo-licensing
2. 如果您的應用程序中需要所有 Charts 組件，請使用 ChartsModule 一次導入所有 Charts。否則，通過添加單獨的模塊來導入特定的組件。
Charts 包爲其組件導出以下各個模塊：
- 要添加所有 Charts 組件，請在您的根應用程序或功能模塊中導入 ChartsModule。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import 'hammerjs';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ChartsModule]
})
export class AppModule {
}
- 要添加單獨的 Charts 組件，只需在根應用程序或功能模塊中導入您需要的模塊。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Imports the Chart module
import { ChartModule } from '@progress/kendo-angular-charts';
// Imports the Sparkline module
import { SparklineModule } from '@progress/kendo-angular-charts';
@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule, BrowserAnimationsModule,
ChartModule, SparklineModule
]
})
export class AppModule {
}
3. 下一步是通過安裝可用的 Kendo UI 主題（Kendo UI Default、Kendo UI Material 或 Kendo UI Bootstrap）來設置組件的樣式。
3.1 要開始使用主題，請通過 NPM 安裝其包。
默認主題
npm install --save @progress/kendo-theme-default
Bootstrap主題
npm install --save @progress/kendo-theme-bootstrap
Material主題
npm install --save @progress/kendo-theme-material
3.2 安裝主題包後，在您的項目中引用它，您可以通過以下方式在項目中包含 Kendo UI 主題：
- 通過使用external (CDN) link
- 通過使用 precompiled CSS file
- 通過從 SCSS source files編譯主題
使用組件
1. 成功安裝Charts包並導入需要的模塊後，在app.component.html中添加您需要的組件對應的標籤。 比如需要Chart組件，添加如下代碼：
<kendo-chart> <kendo-chart-series> <kendo-chart-series-item [data]="[1, 4, 5, 2, 1, 8]"> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart>
2. 通過在根文件夾中運行以下命令來構建和提供應用程序。
ng serve
3. 將瀏覽器指向 http://localhost:4200來查看頁面上Kendo UI for Angular Chart 組件。
激活您的授權許可密鑰
截至 2020 年 12 月，使用Kendo UI for Angular庫中的任何 UI 組件都需要商業授權許可證密鑰或有效的試用許可證密鑰。 如果您的應用程序不包含Kendo UI授權許可證文件，請激活您的許可證密鑰。
依賴關係
下表列出了每個 Charts 依賴項根據包提供的特定功能：
Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用於Angular開發的專業級Angular組件。telerik致力於提供純粹的高性能Angular UI組件，無需任何jQuery依賴關係。