FastCube使您能夠分析數據并構建匯總表（數據切片），以及輕松、即時地創建各種報表和圖表。它是高效分析數據陣列的便利工具。ReactJs 庫已廣泛用于單頁應用程序的 Web 開發。之前我們已經介紹了如何在 React SPA 應用程序中顯示報告和在線報告設計器。現在可以在網頁上顯示來自 FastCube.Core 的多維數據集和數據切片。讓我們考慮如何做到這一點。

立即點擊獲取FastCube.Net 2021最新安裝包+用戶手冊

dotnet new react -o MyReactApp

此命令將創建一個演示應用程序，我們可以使用它來顯示多維數據集。當然，為此，您必須安裝 .NET Core SDK。此外，該應用程序將需要 Node.js。

轉到創建的應用程序的目錄：

cd MyReactApp

npm install

讓我們開始使用創建的 Web 應用程序。首先，讓我們安裝 FastCube 軟件包。打開 Nuget 包管理器。在窗口的右上角，你會看到一個齒輪圖標，它打開包源的設置。單擊它并添加一個新的包源，一個包含我們 FastCube 包的文件夾，位于 C:\Program Files (x86)\FastReports\FastCube.Net Professional\Nuget 文件夾中。

在下拉列表中選擇添加的包源并安裝包：

我們在Startup.cs文件中連接FastCube，在Configure()方法中添加代碼：

app.UseFastCube();

我們的應用程序已經包含 WeatherForecastController。讓我們向其中添加我們的 Web 方法：

[HttpGet("[action]")]
 public IActionResult ShowCube()
 {
 Cube cube = new Cube();
 Slice slice = new Slice()
 {
 Cube = cube
 };
 FilterManager filterManager = new FilterManager()
 {
 Cube = cube
 };
 WebGrid grid;
 grid = new WebSliceGrid()
 {
 Slice = slice
 };
 
 ViewBag.WebGrid = grid;
 
 cube.SourceType = SourceType.File;
 cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc")); return View(); }

  Cube 和 Slice 對象是相關的，因為實際上，切片是多維數據集的一部分。WebGrid 對象用于顯示交互式交叉表。它可以顯示 WebCubeGrid 切片和 WebSliceGrid 多維數據集。在我們的示例中，我們加載了之前在 FastCube .NET 桌面版本中創建的多維數據集。

注意控制器繼承的類。它應該是 Controller，而不是 BaseController。

現在讓我們為這個方法創建一個視圖。這可以通過右鍵單擊 ShowCube 方法簽名來完成。該視圖將包含一行代碼：

@await ViewBag.WebGrid.Render()

現在讓我們轉到位于 ClientApp 文件夾中的 SPA 應用程序。我們需要將我們的組件添加到src->components文件夾中。它將顯示帶有我們上面創建的視圖的 iframe。使用以下代碼添加 Cube.js 文件：

import React, { Component } from 'react';
export class Cube extends Component {
 static getCube() { 
 return { __html: '<iframe width="1000" height="1000" src="weatherforecast/ShowCube" />' };
 }
 render() {
 return (
 < div dangerouslySetInnerHTML={Cube.getCube()} />
 );
 } 
}

在這里一切都很容易。我們顯示 iframe 引用控制器中的方法。

現在您需要將組件添加到 App.js 應用程序結構中：

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Cube } from './components/Cube';
 
import './custom.css'
 
export default class App extends Component {
 static displayName = App.name;
 
 render () {
 return (
 <Layout>
 <Route exact path='/' component={Home} />
 <Route path='/counter' component={Counter} />
 <Route path='/fetch-data' component={FetchData} />
 <Route path='/cube' component={Cube} />
 </Layout>
 );
 }
}

此外，您需要在 NavMenu.js 文件中添加一個新的菜單項：

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';
 
export class NavMenu extends Component {
 static displayName = NavMenu.name;
 
 constructor (props) {
 super(props);
 
 this.toggleNavbar = this.toggleNavbar.bind(this);
 this.state = {
 collapsed: true
 };
 }
 
 toggleNavbar () {
 this.setState({
 collapsed: !this.state.collapsed
 });
 }
 
 render () {
 return (
 <header>
 <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
 <Container>
 <NavbarBrand tag={Link} to="/">FastCubeReact</NavbarBrand>
 <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
 <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
 <ul className="navbar-nav flex-grow">
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/cube">Cube</NavLink>
 </NavItem>
 </ul>
 </Collapse>
 </Container>
 </Navbar>
 </header>
 );
 }
}
 

 應用程序已準備就緒。讓我們運行它：

還想要更多嗎？可以您點擊閱讀【FastReport的報表2020最新資源盤點】，查找需要的教程資源。