zoukankan      html  css  js  c++  java
  • 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)
        {

        }

    }

  • 相关阅读:
    Oracle学习 第25天 Oracle版的Profiler
    Oracle学习 第24天 .net EF连Oracle
    项目中各子系统之间数据交互的方法总结与心得
    Python学习 第7天 爬虫-1 构思
    Oracle学习 第23天 Oracle视图、表、SqlServer、excel、csv的互导
    Python学习 第6天 类、模块、包
    Python学习 第5天 函数
    Javascript/Jquery实现日期前一天后一天
    Javascript/Jquery遇到字符串自动NaN的问题
    Eclipse打包jar
  • 原文地址:https://www.cnblogs.com/lyl6796910/p/4045121.html
Copyright © 2011-2022 走看看