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

用Angular構(gòu)建應(yīng)用并讓用戶理解數(shù)據(jù)的影響并不是一件容易的事，我們經(jīng)常在表格或列表中顯示數(shù)據(jù)，但這不夠直觀，使用圖表和圖形來(lái)理解數(shù)據(jù)能讓用戶更輕松地理解。

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

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

什么是Kendo UI圖表？

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

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

添加Kendo UI for Angular圖表

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

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

ng new play-with-kendo-ui-charts

接下來(lái)，在終端中使用ng add @progress/ Kendo - Angular - Charts命令在應(yīng)用中安裝Kendo UI for Angular圖表，它會(huì)自動(dòng)將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)在我們已經(jīng)安裝和配置好了，但在開始之前，我們要先概述一下Kendo UI圖表中最常見的組件。

Kendo UI for Angular圖表組件

Kendo UI for Angular Chart依賴于一個(gè)組件列表，為我們的圖標(biāo)提供了一個(gè)簡(jiǎn)單的配置：

• <kendo-chart>：它是基本根元素，有助于定義圖表或使用內(nèi)部的其他組件，如<kendo-chart-legend>， <kendo-chart-title>等。
• <kendo-chart-title>：在圖表中顯示標(biāo)題，易于自定義顏色，字體和更多的選項(xiàng)。
• <kendo-chart-legend>：顯示帶有該系列數(shù)據(jù)的圖例。
• <kendo-chart-series>：將具有不同類型圖表的數(shù)據(jù)控制為數(shù)據(jù)數(shù)組。
• <kendo-chart-series-item>：它用顏色、線條、空間等來(lái)表示項(xiàng)目。

添加餅圖

創(chuàng)建一個(gè)新組件my-chart，運(yùn)行如下命令：

ng g c my-chart

我們需要配置三個(gè)要點(diǎn)。

• chartType：定義我們使用的圖表；使用SeriesType，賦值為“pie”。
• data：它是一個(gè)數(shù)組，包含名稱、值和顏色的對(duì)象列表，用于chart-series-組件。
• label：它返回系列中每個(gè)數(shù)據(jù)項(xiàng)的標(biāo)題。

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}`;
}

開始使用每個(gè)組件并配置數(shù)據(jù)和值：

<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>

更改動(dòng)態(tài)圖表

為了演示Kendo UI for Angular 圖表組件的靈活性和強(qiáng)大功能，將以其他類型的圖表(如條形圖或線形圖)來(lái)顯示數(shù)據(jù)。例如，我們不需要組件或數(shù)據(jù)的結(jié)構(gòu)(在大多數(shù)情況下)來(lái)將餅圖轉(zhuǎn)換為條形圖或折線圖。

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

首先，創(chuàng)建帶有值列表的選擇，并使用[(ngModel)]設(shè)置屬性typeChart。當(dāng)您更改選擇時(shí)，它更新<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)在我們的圖表動(dòng)態(tài)變化，看起來(lái)像這樣：

使用Kendo UI for Angular圖表的好處

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