Kendo UI for Angular是專(zhuān)業(yè)級(jí)的Angular UI組件庫(kù)不僅是將其他供應(yīng)商提供的現(xiàn)有組件封裝起來(lái)telerik致力于提供純粹高性能的Angular UI組件而無(wú)需任何jQuery依賴關(guān)系。無(wú)論您是使用TypeScript還是JavaScript開(kāi)發(fā)Angular應(yīng)用程序Kendo UI for Angular都能為Angular項(xiàng)目提供專(zhuān)業(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圖表來(lái)自Kendo UI for Angular的Angular Charts組件提供了出色的圖形數(shù)據(jù)可視化包括各種圖表類(lèi)型簡(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)。打開(kāi)你的終端使用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-charts7.3.0.? Package information loaded.包progress/kendo-angular-charts7.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)安裝和配置好了但在開(kāi)始之前我們要先概述一下Kendo UI圖表中最常見(jiàn)的組件。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將具有不同類(lèi)型圖表的數(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ù)組包含名稱(chēng)、值和顏色的對(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}; }開(kāi)始使用每個(gè)組件并配置數(shù)據(jù)和值kendo-chart kendo-chart-title colorblack font29pt sans-serif textTop Javascript Framework /kendo-chart-title kendo-chart-legend positiontop/kendo-chart-legend kendo-chart-series kendo-chart-series-item [data]data [labels]{ visible: true, content: label} [type]typeChart categoryFieldname colorFieldcolor fieldvalue /kendo-chart-series-item /kendo-chart-series /kendo-chart更改動(dòng)態(tài)圖表為了演示???????Kendo UI for Angular 圖表組件的靈活性和強(qiáng)大功能將以其他類(lèi)型的圖表(如條形圖或線形圖)來(lái)顯示數(shù)據(jù)。例如我們不需要組件或數(shù)據(jù)的結(jié)構(gòu)(在大多數(shù)情況下)來(lái)將餅圖轉(zhuǎn)換為條形圖或折線圖。我們創(chuàng)建了一個(gè)帶有一些圖表類(lèi)型(直線、餅、條)的下拉列表以便動(dòng)態(tài)更改它使用Angular雙向綁定和ngModel指令的強(qiáng)大功能來(lái)改變typeChart的值。首先創(chuàng)建帶有值列表的選擇并使用[(ngModel)]設(shè)置屬性typeChart。當(dāng)您更改選擇時(shí)它更新kendo-chart-series-item的類(lèi)型輸入屬性并更新圖表類(lèi)型可視化。div h1Using The Power of Kendo Chart/h1 label fortypeChartSelectorPick Chart select [(ngModel)]typeChart idtypeChartSelector option valuelineLine/option option valuepiePie/option option valuebarBar/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。