Asp 图形化报表

 

1  图形化的报表的优点

　　分析、统计业务数据

　　表现直观，漂亮，有震撼效果的图形化的方式展现业务数据

　　复杂的业务数据简单化

 

2  常用的报表组件

　　HighCharts：是纯js编写的图形化报表

　　水晶报表（crystal Report）

　　jqChart：是纯js编写的图形化报表

　　MsChart:是微软提供的图形化报表组件

　　XtraReports

 

3  图形化报表中常用的图形

　　直线图

　　曲线图

　　区域图

　　柱状图

　　饼状图

　　堆状图 　　

　　散布图

　　区域曲线图

 

4  报表的图形结构

　　Mschar组件的使用

//设置图表标题 this.Chart1.Titles.add("title of chart1");

//为图表创建序列 this.Chart1.Series.add("SeriesOne"); this.Chart1.Series.add("SeriesTwo");

//设置图表类型 this.Chart1.Series["SeriesOne"].ChartType=SeriesChartType.Line; this.Chart1.Series["SeriesTwo"].ChartType=SeriesChartType.Line;

//获取数据，返回dataSet...... ...... dataSet ds=.... ...

//遍历数据 foreach(DataRow row in ds.Tables[0].rows) { //定义数据点 DatePoint point=new DataPoint(Convert.ToDouble(row["Month"]),Convert.ToDouble(row["AvgTemp"]); //设置每个数据点在x轴的标签文本 point.AxisLabel=string.Format("{0}月"，row["Month"]);

//设置数据点标签的文本 point.Lable=string.Format("{0}°",row["AvgTemp"]);

//将数据点添加到图表 this.Chart1.Series[0].Points.Add(point);

}

View Code

 

5  MsChart图表类型

          Point(点图类型)           

          FastPoint(快速点图类型)       

          Bubble(气泡图类型)     

　　　　      

          Line(折线类型)        

　　　　　　   

         Splin(样条图类型)          

         StepLine(阶梯线图类型)         　　　　    

         FastLine(快速扫描图类型)     

         Bar(条形图类型)       

         StackedBar(堆积条形图类型)             

         StackedBar100(百分比推积条形图类型)            

         Column(柱状图类型)     

　　　　     

         StackedColumn(堆积柱状图类型)             

 　　  StacedColumn100(百分比推积条形图类型)            

 　　  Area(面积图类型)          

        SplineArea(样条面积图类型)             

        StackedArea(堆积面积图类型)             

　　　　

        StackedArea100(百分比推积条形图类型)       

     　　

        Pie(饼图类型)      

　　　　   

        oughnut(圆环图类型) 

　　　　圆环图阐释了部分与总体的关系，可以有多个序列。数值数据作为总体的百分比显示。类别由各个扇区来表示。圆环图通常用于显示百分比。圆环图在功能上与饼图相同。

　　　　圆环图有两种类型：圆环图和分离型圆环图。

        Stock(股价图类型)         

        Candlestick(k线图类型)             

        Range(范围图类型)              

        Funnel(漏斗图类型)               

        Pyramid(棱锥图类型)        

        RangeBar(范围条形图)     

 

HighCharts报表之柱状图实例（js部分）：   

导入highcharts.js、highcharts.src.js、excanvas.compiled.js三个js文件，下面为js部分

var chart;  
    function showHighCharts(data) {  
        var options= {  
            chart: {  
                renderTo: 'container1',//对应div的id   
                defaultSeriesType: 'column'//默认为柱状图   
        //      type: 'column'   
            },  
            title: {  
                text: 'HighCharts Demo之柱状图',//设置标题栏名称   
                style: {  
                    margin: '10px 100px 0 0', // center it   
                    font: 'normal 25px Verdana, sans-serif'//设置标题字体的样式   
                }  
            },  
            xAxis: {  
                categories: [ //设置X轴坐标值   
                        '<=30',  
                        '31-60',  
                        '61-120',  
                        '>=121'  
                        ],  
                    labels: {//X轴坐标值样式   
    //                  rotation: -45,   
    //                  align: 'right',   
                        style: {  
                             font: 'normal 14px Verdana, sans-serif'  
    //                   color: 'white'   
                        }  
                    }  
                },  
                yAxis: {  
                    tickInterval: 5,    //自定义刻度   
                    max: 100,//Y轴最大值   
                    title: {  
                        text: '百分數',  
        //              tickPixelInterval:10,   
                        margin: 50  
                    },  
                    plotLines: [{  
                        value: 0,  
                        width: 1,  
                        color: '#808080'  
                    }]  
                },  
                  
                /* legend: { 
                    layout: 'vertical', 
                    backgroundColor: '#6E6E6E', 
                    align: 'right', 
                    style: { 
                        left: 'auto', 
                        right:'5px', 
                        top: '180px', 
                        bottom: 'auto' 
                    } 
                }, */  
                tooltip: {//鼠标放在图形上时的提示信息   
                    formatter: function() {  
                            return '<b>'+ this.series.name +'</b><br/>'+  
                            this.x +': '+ this.y;  
                    }  
                }  
        };  
          
        //下面的代码主要是为了构造形如以下的数据:   
        /* [{ 
                name: 'BF', 
                data: [150, 270, 120, 230, 300, 220, 250, 120, 100, 200, 90, 60] 
            }, { 
                name: 'LF', 
                data: [230, 160, 150, 100, 290, 300, 200, 160, 500, 100, 86, 25] 
            }, { 
                name: 'TJ', 
                data: [60, 90, 100, 200, 330, 120, 120, 300, 80, 200, 39, 10] 
            }] */  
        options.series = [];  
        // data它是从数据库中查出来的值的列表, 是一个list   
        for(var i=0; i<data.length; i++){  
            options.series[i] = {   
                  name: data[i].WEEK,  
       //         type: 'column',   
                  data: [parseFloat(data[i].RL_30),parseFloat(data[i].RL_60),  
                         parseFloat(data[i].RL_120),parseFloat(data[i].RM_120)]  
               };  
  
        }  
        chart = new Highcharts.Chart(options);  
    }  
      
    function getDataForHighcharts() {  
        var data="";  
        // 此处异步请求数据库中的数据，这样可以只刷新报表显示部分   
        // data=...........   
        showHighCharts(data);  
    }  

View Code

 

jqChart实例：