下載DevExpress v20.2完整版    DevExpress v20.2漢化資源獲取

DevExpress Universal擁有.NET開發(fā)需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

本文介紹的方法適用于客戶端 - 服務(wù)器模型，您需要一個服務(wù)器（一個或后端）和一個客戶端（前端）應(yīng)用程序，其中包括所有必需的樣式、腳本和HTML模板。請注意，客戶端上的腳本版本應(yīng)與服務(wù)器上的庫版本匹配，直至次要版本。

本教程將為大家介紹如何將DashboardControl組件添加到React應(yīng)用程序并顯示W(wǎng)eb Dashboard。

先決條件

• 確保在計算機上安裝。
• 使用本教程需要熟悉React的基本概念和模式，學(xué)習(xí)基礎(chǔ)：。

創(chuàng)建React應(yīng)用程序

在命令提示符下，創(chuàng)建一個React應(yīng)用程序：

cmd

npx create-react-app dashboard-react-app

創(chuàng)建項目后，導(dǎo)航到創(chuàng)建的文件夾：

cmd

cd dashboard-react-app

安裝Dashboard Package

devexpress-dashboard npm軟件包將devextreme和@ devexpress / analytics-core引用為peerDependencies，軟件包應(yīng)手動安裝，這使開發(fā)人員可以控制peerDependencies軟件包的版本，并保證該軟件包安裝一次。 devexpress-dashboard-react軟件包包含DashboardComponent組件。

安裝具有必需的peerDependencies的儀表板軟件包：

cmd

npm install devexpress-dashboard@20.2-next devexpress-dashboard-react@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next devextreme-react@20.2-next --save

修改應(yīng)用內(nèi)容

如下所示修改App.js文件，以在頁面上顯示儀表板組件：

javascript

import React from 'react';
import './App.css';
import { DashboardControl } from 'devexpress-dashboard-react';

function App() {
return (
<div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
<DashboardControl style={{ height: '100%' }} 
endpoint="http://demos.devexpress.com/services/dashboard/api">
</DashboardControl>
</div>
);
}

export default App;

屬性指定用于將數(shù)據(jù)請求發(fā)送到服務(wù)器的URL，該值應(yīng)由托管Web Dashboard的服務(wù)器端的基本URL和路由前綴（在 / MapDashboardRoute屬性中設(shè)置的值）組成。

添加全局樣式

用以下全局樣式替換index.css文件內(nèi)容：

css

@import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

運行應(yīng)用程序

運行應(yīng)用程序。

cmd

npm start

在瀏覽器中打開//localhost:3000/來查看結(jié)果，Web Dashboard顯示存儲在預(yù)配置服務(wù)器（//demos.devexpress.com/services/dashboard/api）上的儀表板。 請按照以下說明配置服務(wù)器：

DevExpress技術(shù)交流群3：700924826      歡迎一起進群討論