1. 新建一个或者打开现有的 ASP.NET Web 应用程序 (Visual Studio 2005、2008 或 2010)。

2. 把 ASPxPivotGrid 控件从 DX.10.2: Data 工具箱 标签页中拖放到网页上。

   

3. 为了把透视网格绑定到数据库，单击它的智能标记，并在被调用的操作列表中，展开 Choose Data Source(选择数据源) 项的下拉菜单。

   然后，单击 New data source(新建数据源)... 链接。

   

4. 然后，继续 Data Source Configuration Wizard(数据源配置向导) 的步骤，以便于连接数据源。 在本例中，我们将使用被复制到应用程序目录中的 gsp.mdb 数据库文件 (与 XtraCharts 套件安装一起提供)。

   

5. 在连接到数据源之后，再次单击透视网格的智能标记，并在操作列表中，选择 Fields(字段) 项。

   

6. 在被调用的对话框中，单击 Retrieve fields(取回字段) 按钮，并从获得的字段中移除 ID 字段，因为在本项目中不需要此字段。

   

7. 然后，指定每个字段的 Area 属性。 特别是：

   - 对于 Region 字段，把此属性设置为 ColumnArea；

   - 对于 Year 字段，把此属性设置为 RowArea；

   - 对于 GSP 字段，把此属性设置为 DataArea。

   

   为了关闭对话框并应用更改，单击 OK 按钮。

8. 为了避免在透视网格和图表中显示总计，可以通过 PivotGridWebOptionsChartDataSource.ShowColumnGrandTotals 和 PivotGridWebOptionsChartDataSource.ShowRowGrandTotals 属性来关闭其显示。

   

现在，透视网格已经成功地被绑定到数据，只剩下创建要绑定到透视网格的 Web 图表了。 在本指南的下一部分说明了这一点。

9. 把图表添加到 Web 页面上。

10. 然后，单击它的智能标记，接着在被调用的操作列表中，展开 Choose Data Source(选择数据源) 下拉菜单，并选择 ASPxPivotGrid1 项。

    

11. 在“属性”窗口中，指定图表的 系列模板 的下列属性。

    - 把 WebChartControl.SeriesDataMember 属性设置为 Series；

    - 把 SeriesBase.ArgumentDataMember 属性设置为 Arguments；

    - 把 SeriesBase.ValueDataMembers 属性设置为 Values。

    

12. 然后，可以调整其他图表选项，例如禁用它的 系列标签。

现在，WebChartControl 已经被成功地绑定到 ASPxPivotGrid。 运行此应用程序，并查看结果。

注意，在浏览器中筛选透视网格的列和行之后，会立即影响所链接的图表。