Angular是Python應(yīng)用中進(jìn)行數(shù)據(jù)管理和顯示的一個(gè)很好的選擇，如果能使用Kendo UI for Angular則可以更進(jìn)一步。

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

Kendo UI新版下載

作為Python開發(fā)人員，您可能經(jīng)常處理數(shù)據(jù)，并且需要有效的方法來可視化和管理數(shù)據(jù)，Angular UI框架已經(jīng)成為豐富而簡單開發(fā)體驗(yàn)的絕佳選擇。

許多開發(fā)人員用組件庫擴(kuò)展了這些優(yōu)勢，比如Kendo UI for Angular。在本教程中，我們將探索如何使用Kendo UI for Angular來創(chuàng)建一個(gè)數(shù)據(jù)視圖，展示網(wǎng)格和圖表等高級功能，最后您將對如何在Python應(yīng)用程序中使用Kendo UI for Angular來消費(fèi)、管理和顯示數(shù)據(jù)有一個(gè)更扎實(shí)的理解。

創(chuàng)建網(wǎng)格

在本示例中，我們將探索如何使用Kendo UI for Angular創(chuàng)建網(wǎng)格，這是一個(gè)流行的UI組件庫。Kendo UI for Angular提供了一套全面的工具和組件，專門為Angular應(yīng)用設(shè)計(jì)。憑借其豐富的特性集和可定制的選項(xiàng)，Kendo UI for Angular為開發(fā)人員提供了一種無縫的方式來創(chuàng)建動(dòng)態(tài)和交互式網(wǎng)格。

本文將從建立一個(gè)新的Angular項(xiàng)目開始，并集成Kendo UI for Angular，然后將創(chuàng)建一個(gè)樣本數(shù)據(jù)集，并配置網(wǎng)格來有效地顯示和管理數(shù)據(jù)。

前提條件

在我們深入學(xué)習(xí)本教程之前，請確保安裝了以下前提條件：

• Python (3.x or above)
• Angular CLI
• Kendo UI for Angular

Step 1：設(shè)置Python API

首先設(shè)置一個(gè)基于Python的統(tǒng)計(jì)API，為我們提供必要的數(shù)據(jù)，遵循以下步驟：

1. 為Python API創(chuàng)建一個(gè)新目錄并導(dǎo)航到其中。

2. 設(shè)置一個(gè)虛擬環(huán)境來隔離依賴關(guān)系：

python -m venv env

激活虛擬環(huán)境：

For Windows:

env\Scripts\activate

For macOS/Linux:

source env/bin/activate

現(xiàn)在，使用pip安裝Flask：

pip install flask

現(xiàn)在，創(chuàng)建一個(gè)新的Python文件,api.py, 并添加以下代碼來設(shè)置一個(gè)基本的Flask API：

Python

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/stats')
def get_stats():
# Sample data for demonstration
stats = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
]
return jsonify(stats)

if __name__ == '__main__':
app.run()

這段代碼設(shè)置了一個(gè)route /api/stats，它返回一個(gè)包含標(biāo)題和正文數(shù)據(jù)的JSON響應(yīng)。

在終端運(yùn)行如下命令啟動(dòng)API服務(wù)器：

python api.py

API服務(wù)器將在//localhost:5000/api/stats上開始運(yùn)行。

它應(yīng)該是這樣的：

Step 2：設(shè)置Angular應(yīng)用

現(xiàn)在我們已經(jīng)準(zhǔn)備好了Python API，來設(shè)置Angular應(yīng)用，并集成Kendo UI for Angular，遵循以下步驟：

使用Angular CLI創(chuàng)建一個(gè)新的Angular項(xiàng)目：

ng new data-view-app

導(dǎo)航到項(xiàng)目目錄：

cd data-view-app

安裝Kendo UI for Angular模塊。

 npm install --save @progress/kendo-angular-grid @progress/kendo-angular-charts

Step 3：創(chuàng)建數(shù)據(jù)視圖組件

在這一步中，我們將使用Kendo UI for Angular來創(chuàng)建顯示和管理數(shù)據(jù)所需的組件。

為數(shù)據(jù)視圖生成一個(gè)新的Angular組件：

ng generate component data-view

打開data-view.component.ts文件并用下面的代碼更新它：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';

@Component({
selector: 'app-data-fetch',
templateUrl: './data-view.component.html',
styleUrls: ['./data-view.component.css']
})
export class DataFetchComponent implements OnInit {
public gridData: GridDataResult = { data: [], total: 0 };
public gridLoading = true;

 

constructor(private http: HttpClient) { }

ngOnInit() {
this.fetchData();
}

fetchData() {
const url = '//jsonplaceholder.typicode.com/posts';

this.http.get<any[]>(url).subscribe(response => {
this.gridData = {
data: response,
total: response.length
};
this.gridLoading = false;
}, error => {
console.error('Error fetching data:', error);
this.gridLoading = false;
});
}
}

打開data-view.component.html文件，添加以下代碼：

<kendo-grid [data]="gridData" [loading]="gridLoading">
<kendo-grid-column field="id" title="ID" ></kendo-grid-column>
<kendo-grid-column field="title" title="Title" ></kendo-grid-column>
<kendo-grid-column field="body" title="Body" ></kendo-grid-column>
</kendo-grid>

[可選]打開data-view.component.css文件，添加如下樣式：

.grid-container {
margin-bottom: 30px;
}

.chart-container {
height: 400px;
}

Step 4：將數(shù)據(jù)視圖組件添加到應(yīng)用程序中

打開app.component.html文件，添加以下代碼：

<app-data-view></app-data-view>

然后打開app.module.ts文件和下面的代碼：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataFetchComponent } from './data-view/data-view.component';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

// Import the HttpClientModule

@NgModule({
declarations: [
AppComponent,
DataFetchComponent,
],
imports: [
BrowserModule,
HttpClientModule,
GridModule,
BrowserAnimationsModule,

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 5：運(yùn)行應(yīng)用程序

在終端的project目錄下運(yùn)行以下命令啟動(dòng)Angular開發(fā)服務(wù)器：

ng serve

1. Angular應(yīng)用將在//localhost:4200上開始運(yùn)行。

2. 打開web瀏覽器并導(dǎo)航到//localhost:4200來查看帶有網(wǎng)格的數(shù)據(jù)視圖。

您可以根據(jù)自己的需求隨意定制樣式并擴(kuò)展功能。例如，在這個(gè)腳本中可以很容易地添加一個(gè)圖表，方法如下：

添加圖表

首先安裝Kendo UI for Angular Charts包：

ng add @progress/kendo-angular-charts

然后在data-view.components.html文件中添加以下代碼：

<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 4, 5, 2, 1, 8]"> </kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>

你提供的代碼片段代表了使用Kendo UI for Angular的圖表來創(chuàng)建一個(gè)基本圖表，<kendo-chart>組件用于呈現(xiàn)不同類型的圖表，如折線圖、條形圖、餅圖等。

在<kendo-chart>組件中，您可以使用<kendo-chart-series>組件定義將顯示在圖表上的數(shù)據(jù)系列。每個(gè)單獨(dú)的數(shù)據(jù)系列都由<;kendo-chart-series-item>組件表示。

在給定的代碼中，我們有一個(gè)由<kendo-chart-series-item>表示的單一數(shù)據(jù)序列，[data]屬性用于將值數(shù)組綁定到系列項(xiàng)。在本例中，數(shù)組[1,4,5,2,1,8]作為要在圖表上顯示的數(shù)據(jù)提供。

再次，通過在終端運(yùn)行以下命令啟動(dòng)Angular開發(fā)服務(wù)器：

ng serve

導(dǎo)航到//localhost:4200查看圖表中的數(shù)據(jù)視圖：

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