數據透視表將數據網格的功能與圖形和圖表的顯示結合起來，允許用戶以交互式的方式探索數據，今天將帶大家一起學習如何開始使用KendoReact PivotGrid組件！

Kendo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠為客戶提供更好的用戶體驗，并且能夠更快地構建更好的應用程序。

PivotGrid是KendoReact庫中最強的組件之一，它擁有超過100個性能優異、可訪問的組件。然而，開始使用PivotGrid組件時會有點不知所措，理解數據透視表的基本概念和用例將極大地幫助我們實現特定組件。

Kendo UI R2 2023正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

什么是透視表（Pivot Table）？

透視表是一種復雜的數據網格，它允許用戶在更大的數據集中對特定類別的數據進行分組、聚合和比較。因為它是交互式的，所以用戶可以使用熟悉的圖形用戶界面隱藏、顯示、過濾和調整顯示的數據。這使技術上不太精通的用戶能夠以各種不同的方式操作大型數據集，以便他們可以提取所需的確切信息。

KendoReact PivotGrid的特點

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

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

數據綁定

開發人員可以通過兩種方式將數據綁定到KendoReact PivotGrid：綁定到通過HTTP訪問的OLAP多維數據集，或者綁定到本地數據。

什么是OLAP多維數據集？

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

因為OLAP多維數據集是多維的，所以我們可以為標準電子表格中無法表示的信息添加額外的“維度”。實際上，OLAP多維數據集并不一定是一個多維數據集——“邊”并不一定是偶數，我們可以有任意多的邊。

設置KendoReact PivotGrid

本節將為大家介紹如何將它添加到React應用程序中。

1. 安裝并導入組件。

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

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導入到React組件中。

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

2. 定義數據透視表的軸：

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. 定義目錄、多維數據集和url：

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

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

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

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