?

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實例：

　　

　　　　

轉載于:https://www.cnblogs.com/DBtwoer/p/3487458.html

總結

以上是生活随笔為你收集整理的Asp 图形化报表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。