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構建應用并讓用戶理解數(shù)據(jù)的影響并不是一件容易的事我們經(jīng)常在表格或列表中顯示數(shù)據(jù)但這不夠直觀使用圖表和圖形來理解數(shù)據(jù)能讓用戶更輕松地理解。本文我們將使用Kendo UI for Angular中的Angular圖表組件演示如何創(chuàng)建柱形圖、折線圖和餅狀圖來實現(xiàn)數(shù)據(jù)可視化。什么是Kendo UI圖表來自Kendo UI for Angular的Angular Charts組件提供了出色的圖形數(shù)據(jù)可視化包括各種圖表類型簡單的配置允許為大多數(shù)業(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-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)安裝和配置好了但在開始之前我們要先概述一下Kendo UI圖表中最常見的組件。Kendo UI for Angular圖表組件Kendo UI for Angular Chart依賴于一個組件列表為我們的圖標提供了一個簡單的配置kendo-chart它是基本根元素有助于定義圖表或使用內(nèi)部的其他組件如kendo-chart-legend kendo-chart-title等。kendo-chart-title在圖表中顯示標題易于自定義顏色字體和更多的選項。kendo-chart-legend顯示帶有該系列數(shù)據(jù)的圖例。kendo-chart-series將具有不同類型圖表的數(shù)據(jù)控制為數(shù)據(jù)數(shù)組。kendo-chart-series-item它用顏色、線條、空間等來表示項目。添加餅圖創(chuàng)建一個新組件my-chart運行如下命令ng g c my-chart我們需要配置三個要點。chartType定義我們使用的圖表使用SeriesType賦值為“pie”。data它是一個數(shù)組包含名稱、值和顏色的對象列表用于chart-series-組件。label它返回系列中每個數(shù)據(jù)項的標題。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}; }開始使用每個組件并配置數(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更改動態(tài)圖表為了演示???????Kendo UI for Angular 圖表組件的靈活性和強大功能將以其他類型的圖表(如條形圖或線形圖)來顯示數(shù)據(jù)。例如我們不需要組件或數(shù)據(jù)的結構(在大多數(shù)情況下)來將餅圖轉換為條形圖或折線圖。我們創(chuàng)建了一個帶有一些圖表類型(直線、餅、條)的下拉列表以便動態(tài)更改它使用Angular雙向綁定和ngModel指令的強大功能來改變typeChart的值。首先創(chuàng)建帶有值列表的選擇并使用[(ngModel)]設置屬性typeChart。當您更改選擇時它更新kendo-chart-series-item的類型輸入屬性并更新圖表類型可視化。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)在我們的圖表動態(tài)變化看起來像這樣使用Kendo UI for Angular圖表的好處從大量的圖表布局列表中選擇。出色的組件和內(nèi)部API文檔。萬能的Kendo UI主題。支持Angular 15。