数据透视表将数据网格的功能与图形和图表的显示结合起来允许用户以交互式的方式探索数据今天将带大家一起学习如何开始使用KendoReact PivotGrid组件Kendo UI致力于新的开发来满足不断变化的需求通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for React能够为客户提供更好的用户体验并且能够更快地构建更好的应用程序。PivotGrid是KendoReact库中最强的组件之一它拥有超过100个性能优异、可访问的组件。然而开始使用PivotGrid组件时会有点不知所措理解数据透视表的基本概念和用例将极大地帮助我们实现特定组件。什么是透视表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. 定义目录、多维数据集和urlconst catalog Adventure Works DW 2008R2; const cube Adventure Works; const url https://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。