數(shù)據(jù)透視表將數(shù)據(jù)網(wǎng)格的功能與圖形和圖表的顯示結(jié)合起來，允許用戶以交互式的方式探索數(shù)據(jù)，今天將帶大家一起學(xué)習(xí)如何開始使用KendoReact PivotGrid組件！

Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

PivotGrid是KendoReact庫中最強(qiáng)的組件之一，它擁有超過100個(gè)性能優(yōu)異、可訪問的組件。然而，開始使用PivotGrid組件時(shí)會(huì)有點(diǎn)不知所措，理解數(shù)據(jù)透視表的基本概念和用例將極大地幫助我們實(shí)現(xiàn)特定組件。

Kendo UI R2 2023正式版下載

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

什么是透視表（Pivot Table）？

透視表是一種復(fù)雜的數(shù)據(jù)網(wǎng)格，它允許用戶在更大的數(shù)據(jù)集中對(duì)特定類別的數(shù)據(jù)進(jìn)行分組、聚合和比較。因?yàn)樗墙换ナ降?，所以用戶可以使用熟悉的圖形用戶界面隱藏、顯示、過濾和調(diào)整顯示的數(shù)據(jù)。這使技術(shù)上不太精通的用戶能夠以各種不同的方式操作大型數(shù)據(jù)集，以便他們可以提取所需的確切信息。

KendoReact PivotGrid的特點(diǎn)

具體來說，KendoReact PivotGrid的創(chuàng)建是為了支持以下用戶需求：

• 過濾：用戶可以過濾透視網(wǎng)格中的數(shù)據(jù)，只顯示與他們最相關(guān)的數(shù)據(jù)。這不僅包括按值進(jìn)行標(biāo)準(zhǔn)過濾，還包括使用操作符(即“包含”或“以”開始)、時(shí)間段等進(jìn)行過濾。
• 排序：用戶可以對(duì)KendoReact PivotGrid中的單個(gè)或多個(gè)列進(jìn)行排序，然后輕松地按升序或降序組織數(shù)據(jù)。
• 通過配置器進(jìn)行簡(jiǎn)單的數(shù)據(jù)操作：因?yàn)閿?shù)據(jù)透視表的范圍從相對(duì)簡(jiǎn)單到極其復(fù)雜，所以KendoReact PivotGrid附帶了配置器，一個(gè)字段列表，用戶可以通過一個(gè)直觀和用戶友好的UI應(yīng)用他們的修改。開發(fā)人員可以自定義配置器，通過只顯示在特定應(yīng)用程序的上下文中與用戶相關(guān)且有用的工具來進(jìn)一步改進(jìn)用戶體驗(yàn)。
• 導(dǎo)出數(shù)據(jù)：用戶可以很容易地將KendoReact PivotGrid中的數(shù)據(jù)導(dǎo)出為Excel文件或PDF文件，以便快速共享。
• 數(shù)據(jù)的可視化：當(dāng)數(shù)據(jù)完全已網(wǎng)格形式呈現(xiàn)時(shí)，完全理解和查看數(shù)據(jù)中的連接可能具有挑戰(zhàn)性。出于這個(gè)原因，KendoReact PivotGrid和KendoReact Charts庫被創(chuàng)建為完美的協(xié)調(diào)工作。當(dāng)開發(fā)人員將他們選擇的圖表與透視網(wǎng)格集成在一起時(shí)，當(dāng)各種過濾器、排序和其他操作應(yīng)用于透視網(wǎng)格中的數(shù)據(jù)時(shí)，圖表將自動(dòng)更新。

數(shù)據(jù)綁定

開發(fā)人員可以通過兩種方式將數(shù)據(jù)綁定到KendoReact PivotGrid：綁定到通過HTTP訪問的OLAP多維數(shù)據(jù)集，或者綁定到本地?cái)?shù)據(jù)。

什么是OLAP多維數(shù)據(jù)集？

數(shù)據(jù)透視表概念的核心是OLAP多維數(shù)據(jù)集，OLAP(在線分析處理)多維數(shù)據(jù)集是一種特定類型的多維數(shù)據(jù)數(shù)組。把它想象成一個(gè)有額外坐標(biāo)軸的電子表格，例如，在傳統(tǒng)的電子表格中，y軸可能是“產(chǎn)品”，x軸可能是“成本”，但如果我們還想在一段時(shí)間內(nèi)交叉比較這兩個(gè)東西呢？

因?yàn)镺LAP多維數(shù)據(jù)集是多維的，所以我們可以為標(biāo)準(zhǔn)電子表格中無法表示的信息添加額外的“維度”。實(shí)際上，OLAP多維數(shù)據(jù)集并不一定是一個(gè)多維數(shù)據(jù)集——“邊”并不一定是偶數(shù)，我們可以有任意多的邊。

設(shè)置KendoReact PivotGrid

本節(jié)將為大家介紹如何將它添加到React應(yīng)用程序中。

1. 安裝并導(dǎo)入組件。

用npm安裝kendo-react-pivotgrid庫，以及PivotGrid所需的其他KendoReact依賴項(xiàng)。

npm install --save @progress/kendo-react-pivotgrid @progress/kendo-data-query @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-data-tools @progress/kendo-react-form @progress/kendo-react-indicators @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-svg-icons

然后，將PivotGrid、PivotGridContainer和PivotGridAxis導(dǎo)入到React組件中。

import {
PivotGrid,
PivotGridContainer,
PivotGridAxis,
} from "@progress/kendo-react-pivotgrid";

2. 定義數(shù)據(jù)透視表的軸：

const defaultColumnAxes: PivotGridAxis[] = [
{ name: ['[Date].[Calendar]'], expand: true },
{ name: ['[Product].[Category]'] },
];
const defaultRowAxes: PivotGridAxis[] = [{ name: ['[Geography].[City]'] }];
const defaultMeasureAxes: PivotGridAxis[] = [
{ name: ['[Measures].[Reseller Freight Cost]'] },
];

3. 定義目錄、多維數(shù)據(jù)集和url：

const catalog = 'Adventure Works DW 2008R2';
const cube = 'Adventure Works';
const url = '//demos.telerik.com/olap/msmdpump.dll';

4. 將組件添加到JSX中，并添加/定義可能需要的任何其他道具。這個(gè)組件看起來應(yīng)該是這樣的：

<PivotOLAPService
catalog={catalog}
cube={cube}
url={url}
defaultRowAxes={defaultRowAxes}
defaultColumnAxes={defaultColumnAxes}
defaultMeasureAxes={defaultMeasureAxes}
>
{({ pivotProps }) => (
<PivotGridContainer>
<PivotGrid {...pivotProps} />
</PivotGridContainer>
)}
</PivotOLAPService>

只要這四個(gè)步驟，你就可以開始運(yùn)行了!之后，你可以添加我們的一個(gè)主題(或者創(chuàng)建你自己的)來樣式化組件，或者根據(jù)你的喜好進(jìn)一步定制PivotGrid。