AspxPivotGrid和WebChartControl数据联动处理日志

AspxPivotGrid具有很好的表格样式体验，WebChartControl也是个很内容丰富的做图控件，我希望实现的功能是这样的，

处理题库统计分析图表，用户点AspxPivotGrid绑定知识点的行数据(DataArea)，显示出该知识点的试题数量分布情况。

程序界面如下：

AspxPivotGrid没有对应的Server端Click事件处理DataArea区域的动作，因此我的做法是用AspxPivotGrid的ClientSideEvent处理，

我选用的是<ClientSideEvents CellClick="function(s, e) { pnlChart.PerformCallback(e.RowValue);}" />用e.RowValue传递知识点的参

数到后台Server端，在ASPxCallbackPanel的PerformCallback事件里处理图表动态显示。

特别提醒：用ClientEvent事件触发PerformCallback，后台处理WebChartControl图表,一定要把WebChartControl控件放在ASPxCallbackPanel

里，用ASPxCallbackPanel的PerformCallback去传参数到后台，然后才能在前台显示数据，否则，弄半天图表控件就是不显示图，我折腾了一天这个问题，

希望看官注意，别说哥没提醒你哈！

点上图红圈的DataArea格以后，运行结果如下：

贴代码如下：

aspx文件：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/NormalPage.master" AutoEventWireup="false" CodeFile="ThemeSummaryView.aspx.cs" Inherits="Base_ThemeSummaryView" %>
<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v10.2" namespace="DevExpress.Web.ASPxPivotGrid" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v10.2" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<%@ Register assembly="DevExpress.XtraCharts.v10.2" namespace="DevExpress.XtraCharts" tagprefix="dxc" %>
<%@ Register assembly="DevExpress.XtraCharts.v10.2.Web" namespace="DevExpress.XtraCharts.Web" tagprefix="dxc" %>
<%@ Register assembly="DevExpress.Web.v10.2" Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v10.2" Namespace="DevExpress.Web.ASPxPanel" TagPrefix="dx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <table width="100%" cellpadding=0 cellspacing=0 >
        <tr>
            <td>
                <dx:ASPxPivotGrid ID="grvThemeBase" runat="server" Width="1200px"
                    DataSourceID="dsoExamBase"  ClientInstanceName="pivotThemeBase"  ClientIDMode="AutoID" >                 
                    
                    <Fields>                        
                        <dx:PivotGridField Area="RowArea"  FieldName="CatalogName" Caption="考试科目" ID="rowCatalogName" AreaIndex="0"  />
                        <dx:PivotGridField Area="RowArea"   FieldName="PointItem" Caption="考试知识点" ID="rowPointName" AreaIndex="1" />                                                                               
                        <dx:PivotGridField Area="ColumnArea"   FieldName="GradeName" Caption="难度" ID="rowGradeName" AreaIndex="0"  />                 
                        <dx:PivotGridField Area="ColumnArea"   FieldName="StyleName" Caption="题型" ID="rowStyleName" AreaIndex="1"  />                                                                                     
                        <dx:PivotGridField Area="DataArea"   Caption="难度" SummaryType="Count" FieldName="GradeName" ID="datGradeName" AreaIndex="0"  />           
                    </Fields>
                    <OptionsPager RowsPerPage=10 />                       
                    <OptionsView  ShowHorizontalScrollBar="True"  ShowRowHeaders="False"  ShowRowTotals="False" ShowColumnTotals="False"    ShowColumnHeaders="False" ShowDataHeaders="False"    DataHeadersDisplayMode="Popup" ShowFilterHeaders="False"/>                   
                    <OptionsChartDataSource  FieldValuesProvideMode="DisplayText" />
                    <ClientSideEvents CellClick="function(s, e) { pnlChart.PerformCallback(e.RowValue);}" />
                </dx:ASPxPivotGrid>   
            </td>
        </tr>
        <tr>
            <td>
                <dx:ASPxCallbackPanel ID="pnlChartPanel" runat="server" Width="200px" OnCallback="pnlChartPanel_Callback"  ClientInstanceName="pnlChart">
                    <PanelCollection>
                        <dx:PanelContent ID="PanelContent1" runat="server" SupportsDisabledAttribute="True">
                            <dxc:WebChartControl ID="WebChartTheme" runat="server"  
                                Width="850px" Height="300px"   
                                OnCustomDrawSeriesPoint="WebChartTheme_CustomDrawSeriesPoint"
                                ClientIDMode="AutoID" IndicatorsPaletteName="Default"
                                DataSourceID="dsoExamTheme">
                            </dxc:WebChartControl>
                        </dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxCallbackPanel>           
            </td>
        </tr>
    </table>    
    <asp:ObjectDataSource ID="dsoExamBase" runat="server" SelectMethod="GetBaseThemeList" TypeName="OLExamLibrary.OLExamBaseTheme" >               
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="dsoExamTheme" runat="server" SelectMethod="GetThemeStatistic" TypeName="OLExamLibrary.OLExamBaseTheme" >               
    </asp:ObjectDataSource>
</asp:Content>

cs文件:

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using OLExamLibrary; 
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;

public partial class Base_ThemeSummaryView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

protected void pnlChartPanel_Callback(object sender, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)   
    {
        string strPointPara= e.Parameter;

string []strItem = strPointPara.Split('-');

OLExamBaseTheme objTheme = new OLExamBaseTheme();

DataTable dtbTheme = objTheme.GetThemeStatistic(strItem[0]);

//绘图
        DrawGraphic(dtbTheme);
        
    }

/// <summary>
    /// 根据传进的数据集合绘图
    /// </summary>
    /// <param name="dtbPointTheme"></param>
    private void DrawGraphic(DataTable dtbPointTheme)
    {
        WebChartTheme.Series.Clear();

Series sesPoint = new Series("数量", ViewType.Bar);
        ((SideBySideBarSeriesView)sesPoint.View).ColorEach = true;

WebChartTheme.Series.Add(sesPoint);

sesPoint.ArgumentScaleType = ScaleType.Qualitative;
        sesPoint.ValueScaleType = ScaleType.Numerical;

for (int i = 0; i < dtbPointTheme.Rows.Count; i++)
        {
            sesPoint.Points.Add(new SeriesPoint(dtbPointTheme.Rows[i]["StyleName"].ToString(), dtbPointTheme.Rows[i]["ThemeCount"]));
        }

sesPoint.SeriesPointsSorting = SortingMode.Ascending;
        ((XYDiagram)WebChartTheme.Diagram).AxisX.Label.Angle = -30;                                   //坐标值倾斜30度
        ((XYDiagram)WebChartTheme.Diagram).AxisX.Label.Antialiasing = true;                           //横坐标坐标值倾斜显示
        
        
    }

protected void WebChartTheme_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e)
    {

}

}