Kendo UI for Angular是專業(yè)級的Angular UI組件庫，不僅是將其他供應商提供的現(xiàn)有組件封裝起來，telerik致力于提供純粹高性能的Angular UI組件，而無需任何jQuery依賴關系。無論您是使用TypeScript還是JavaScript開發(fā)Angular應用程序，Kendo UI for Angular都能為Angular項目提供專業(yè)的、企業(yè)級UI組件。

用Angular構建應用并讓用戶理解數據的影響并不是一件容易的事，我們經常在表格或列表中顯示數據，但這不夠直觀，使用圖表和圖形來理解數據能讓用戶更輕松地理解。

本文我們將使用Kendo UI for Angular中的Angular圖表組件演示如何創(chuàng)建柱形圖、折線圖和餅狀圖來實現(xiàn)數據可視化。

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

什么是Kendo UI圖表？

來自Kendo UI for Angular的Angular Charts組件提供了出色的圖形數據可視化，包括各種圖表類型，簡單的配置，允許為大多數業(yè)務案例創(chuàng)建圖表和出色的UI。

Angular圖表有一個廣泛的圖表列表，它被分成了一些模塊，比如支持主題的ChartModule、SparklineModule和StockChartModule，今天我們將介紹ChartModule選項。

添加Kendo UI for Angular圖表

首先，創(chuàng)建一個新的Angular應用，并添加一些依賴項。

打開你的終端，使用@angular/cli創(chuàng)建一個新項目，執(zhí)行以下命令：

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/kendo-angular-charts@7.3.0.
? Package information loaded.

包@progress/kendo-angular-charts@7.1.1將被安裝和執(zhí)行。

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.

現(xiàn)在我們已經安裝和配置好了，但在開始之前，我們要先概述一下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>：它用顏色、線條、空間等來表示項目。

添加餅圖

創(chuàng)建一個新組件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>

更改動態(tài)圖表

為了演示Kendo UI for Angular 圖表組件的靈活性和強大功能，將以其他類型的圖表(如條形圖或線形圖)來顯示數據。例如，我們不需要組件或數據的結構(在大多數情況下)來將餅圖轉換為條形圖或折線圖。

 我們創(chuàng)建了一個帶有一些圖表類型(直線、餅、條)的下拉列表，以便動態(tài)更改它，使用Angular雙向綁定和ngModel指令的強大功能來改變typeChart的值。

首先，創(chuàng)建帶有值列表的選擇，并使用[(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>

現(xiàn)在我們的圖表動態(tài)變化，看起來像這樣：

使用Kendo UI for Angular圖表的好處

• 從大量的圖表布局列表中選擇。
• 出色的組件和內部API文檔。
• 萬能的Kendo UI主題。
• 支持Angular 15。