Kendo UI for Angular是專業級的Angular UI元件庫，不僅是将其他供應商提供的現有元件封裝起來，telerik緻力于提供純粹高性能的Angular UI元件，而無需任何jQuery依賴關系。無論您是使用TypeScript還是JavaScript開發Angular應用程式，Kendo UI for Angular都能為Angular項目提供專業的、企業級UI元件。
用Angular建構應用并讓使用者了解資料的影響并不是一件容易的事，我們經常在表格或清單中顯示資料，但這不夠直覺，使用圖表和圖形來了解資料能讓使用者更輕松地了解。
本文我們将使用Kendo UI for Angular中的Angular圖表元件示範如何建立柱形圖、折線圖和餅狀圖來實作資料可視化。
Kendo UI官方最新版免費下載下傳試用，曆史版本下載下傳，線上文檔和幫助檔案下載下傳-慧都網
什麼是Kendo UI圖表？
來自Kendo UI for Angular的Angular Charts元件提供了出色的圖形資料可視化，包括各種圖表類型，簡單的配置，允許為大多數業務案例建立圖表和出色的UI。
Angular圖表有一個廣泛的圖表清單，它被分成了一些子產品，比如支援主題的ChartModule、SparklineModule和StockChartModule，今天我們将介紹ChartModule選項。
添加Kendo UI for Angular圖表
首先，建立一個新的Angular應用，并添加一些依賴項。
打開你的終端，使用@angular/cli建立一個新項目，執行以下指令：
ng new play-with-kendo-ui-charts
接下來，在終端中使用ng add @progress/ Kendo - Angular - Charts指令在應用中安裝Kendo UI for Angular圖表，它會自動将ChartsModule安裝并配置到app.module中。
play-with-kendo-ui-charts> ng add @progress/kendo-angular-charts
ℹ Using package manager: npm
✔ Found compatible package version: @progress/[email protected].
✔ Package information loaded.
包@progress/[email protected]将被安裝和執行。
Would you like to proceed? Yes
✔ Package successfully installed.
UPDATE src/app/app.module.ts (526 bytes)
UPDATE package.json (1515 bytes)
UPDATE angular.json (3552 bytes)
✔ Packages installed successfully.
現在我們已經安裝和配置好了，但在開始之前，我們要先概述一下Kendo UI圖表中最常見的元件。
Kendo UI for Angular圖表元件
Kendo UI for Angular Chart依賴于一個元件清單，為我們的圖示提供了一個簡單的配置：
- <kendo-chart>：它是基本根元素，有助于定義圖表或使用内部的其他元件，如<kendo-chart-legend>， <kendo-chart-title>等。
- <kendo-chart-title>：在圖表中顯示标題，易于自定義顔色，字型和更多的選項。
- <kendo-chart-legend>：顯示帶有該系列資料的圖例。
- <kendo-chart-series>：将具有不同類型圖表的資料控制為資料數組。
- <kendo-chart-series-item>：它用顔色、線條、空間等來表示項目。
添加餅圖
建立一個新元件my-chart，運作如下指令：
ng g c my-chart
我們需要配置三個要點。
- chartType：定義我們使用的圖表；使用SeriesType，指派為“pie”。
- data：它是一個數組，包含名稱、值和顔色的對象清單，用于chart-series-元件。
- label：它傳回系列中每個資料項的标題。
typeChart: SeriesType = "pie";
public data = [
{ name: "Angular", value: 75, color: "red" },
{ name: "React", value: 15, color: "blue" },
{ name: "Svelte", value: 5, color:"orange" },
];
public label(args: LegendLabelsContentArgs): string {
return `${args.dataItem.name}`;
} 開始使用每個元件并配置資料和值：
<kendo-chart>
<kendo-chart-title
color="black"
font="29pt sans-serif"
text="Top Javascript Framework"
>
</kendo-chart-title>
<kendo-chart-legend position="top"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item
[data]="data"
[labels]="{ visible: true, content: label}"
[type]="typeChart"
categoryField="name"
colorField="color"
field="value">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart> 
更改動态圖表
為了示範Kendo UI for Angular 圖表元件的靈活性和強大功能，将以其他類型的圖表(如條形圖或線形圖)來顯示資料。例如，我們不需要元件或資料的結構(在大多數情況下)來将餅圖轉換為條形圖或折線圖。
我們建立了一個帶有一些圖表類型(直線、餅、條)的下拉清單，以便動态更改它，使用Angular雙向綁定和ngModel指令的強大功能來改變typeChart的值。
首先，建立帶有值清單的選擇，并使用[(ngModel)]設定屬性typeChart。當您更改選擇時，它更新<kendo-chart-series-item>的類型輸入屬性，并更新圖表類型可視化。
<div>
<h1>Using The Power of Kendo Chart</h1>
<label for="typeChartSelector">Pick Chart
<select [(ngModel)]="typeChart" id="typeChartSelector">
<option value="line">Line</option>
<option value="pie">Pie</option>
<option value="bar">Bar</option>
</select>
</label>
</div> 現在我們的圖表動态變化，看起來像這樣：
使用Kendo UI for Angular圖表的好處
- 從大量的圖表布局清單中選擇。
- 出色的元件和内部API文檔。
- 萬能的Kendo UI主題。
- 支援Angular 15。