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)
{
}
}