圖形化報表

1、經常使用的圖形化報表組件（Highchars(純js)、水晶報表、jqChart、MsChart、XtraReports）

2、MsChart報表結構

　　（1）背景：圖表的背景色

　　（2）圖標標題：通常位於圖表的正上方中間位置。有的報表支持設置副標題。

　　（3）圖例說明

　　（4）X軸、Y軸

　　（5）X軸標題、Y軸標題

　　（6）座標刻度值：用於控制和顯示Y軸方向的數據值。

　　（7）序列：一個報表中能夠有一個或者多個序列

3、在ASP.NET WebForm模型中使用MsChart

　　最經常使用的屬性包括:

ChartAreas：增長多個繪圖區域，每一個繪圖區域包含獨立的圖表組、數據源，用於多個圖表類型在一個繪圖區不兼容時。

AlignmentOrientation：圖表區對齊方向，定義兩個繪圖區域間的對齊方式。

AlignmentStyle：圖表區對齊類型，定義圖表間用以對其的元素。

AlignWithChartArea：參照對齊的繪圖區名稱。

InnerPlotPosition：圖表在繪圖區內的位置屬性。

Auto：是否自動對齊。

Height：圖表在繪圖區內的高度（百分比，取值在0-100）

Width：圖表在繪圖區內的寬度（百分比，取值在0-100）

X,Y：圖表在繪圖區內左上角座標

Position：繪圖區位置屬性，同InnerPlotPosition。

Name：繪圖區名稱。

Axis：座標軸集合

Title：座標軸標題

TitleAlignment：座標軸標題對齊方式

Interval：軸刻度間隔大小

IntervalOffset：軸刻度偏移量大小

MinorGrid：次要輔助線

MinorTickMark：次要刻度線

MajorGrid：主要輔助線

MajorTickMark：主要刻度線

DataSourceID：MSChart的數據源。

Legends：圖例說明。

Palette：圖表外觀定義。

Series：最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點圖等構成的集合；能夠將多種相互兼容的類型放在一個繪圖區域內，造成複合圖。

IsValueShownAsLabel：是否顯示數據點標籤，若是爲true，在圖表中顯示每個數據值

Label：數據點標籤文本

LabelFormat：數據點標籤文本格式

LabelAngle：標籤字體角度

Name：圖表名稱

Points：數據點集合

XValueType：橫座標軸類型

YValueType：縱座標軸類型

XValueMember：橫座標綁定的數據源（若是數據源爲Table，則填寫橫座標要顯示的字段名稱）

YValueMembers：縱座標綁定的數據源（若是數據源爲Table，則填寫縱座標要顯示的字段名稱，縱座標能夠有兩個）

ChartArea：圖表所屬的繪圖區域名稱

ChartType：圖表類型（柱形、餅形、線形、點形等）

Legend：圖表使用的圖例名稱

Titles：標題集合。

width：MSChart的寬度。

height：MSChart的高度。

　　經常使用事件：

Series1.Points.DataBind() 
綁定數據點集合，若是要在一個MSChart控件的一個繪圖區(ChartArea)內添加多個不一樣數據源的圖表，就用這個主動綁定數據集合的方法。能夠將表中指定字段的值綁定到指定的座標軸上。

MSChart1.DataBind() 
給整個MSChart綁定一個數據源，該MSChart中的圖表所有可使用該數據源做爲統計來源。

4、在ASP.NET MVC中使用Highchart

　　chart的部分相關屬性說明：

    renderTo: 'container',      //圖表的頁面顯示容器(也就是要顯示到的div)    defaultSeriesType: 'line',  //圖表類型(line、spline、scatter、splinearea、bar、pie、area、column)    marginRight: 50,            //上下左右空隙(圖表跟圖框之間)    marginBottom: 60,           //下面空隙若是不夠大，圖例說明有可能看不到    plotBackgroundImage: '../graphics/skies.jpg', //(圖表的)背景圖片    plotBackgroundColor:        //背景顏色    width: 1000,                //圖框（最外層）寬(默認800)    height: 500,                //圖框高(默認500)     backgroundColor: "red"      //圖框的背景顏色    borderColor: "red"          //圖框的邊框顏色    borderRadius: 5,            //圖框的圓角大小    borderWidth: 9,             //圖框的邊框大小    inverted: false,            //(使圖)倒置    plotBorderColor: "red",     //圖表的邊框顏色    plotBorderWidth: 0,         //圖表的邊框大小    plotShadow: false,          //圖表是否使用陰影效果    reflow: false,       shadow:true                 //圖框是否使用陰影    showAxes: false,            //是否最初顯示軸    spacingTop: 100,            //圖表上方的空白    spacingRight: 10,    spacingBottom: 15,    spacingLeft: 10,    colors: [...]                 //圖上線。。的顏色credits的部分相關屬性說明    credits:  //設置右下角的標記。highchart.com (這個也能夠在highcharts.js裏中修改)    {            enabled: true,      //是否顯示        position: {           //顯示的位置                               align: 'left',                   x: 10                                   },        text: "xoyo.com",           //顯示的文字        style:{                     //樣式            cursor: 'pointer',            color: 'red',            fontSize: '20px'        },        href: 'http://www.xoyo.com', //路徑    },title的部分相關屬性說明    title: //標題    {         text: '月份平均溫度',        x: -20,                  //center //水平偏移量         y: 100                   //y:垂直偏移量        align: 'right'         //水平方向（left, right, bottom, top）        floating: true,          //是否浮動顯示        margin: 15,        style: ,                 //樣式        verticalAlign: "left"    //垂直方向（left, right, bottom, top）    },xAxis或者YAxis的部分相關屬性說明    categories: ['一月', '二月'],    allowDecimals: false    alternateGridColor: 'red'       //在圖表中相隔出現縱向的顏色格柵    dateTimeLabelFormats: ,    endOnTick: false,               //是否顯示控制軸末端的一個cagegories出來    events: {    setExtremes:    },    gridLineColor: "red",           //縱向格線的顏色    gridLineDashStyle: Solid        //縱向格柵線條的類型    gridLineWidth: 5,               //縱向格線的的大小    id: null,    labels: {  //X軸的標籤（下面的說明）        align: "center",              //位置        enabled: false,               //是否顯示        formatter: ,        rotation: 90,                 //旋轉,效果就是影響標籤的顯示方向        staggerLines: 4,              //標籤的交錯顯示（上、下）        step: 2,                      //標籤的相隔顯示的步長        style:{},        x: 100,                     //偏移量，默認兩個都是0，        y: 40            },    lineColor: "red",               //X軸的顏色    lineWidth: 5,                   //X軸的寬度    linkedTo:1,    opposite: true                  //是否把標籤顯示到對面    max: 12,                        //顯示的最大值    maxPadding: 6,    maxZoom: 1,    min: 10,                        //顯示的最小值    minorGridLineColor: 'red',        //副格線的顏色    minorGridLineDashStyle: 'blod', //副格線的的顏色    minorGridLineWidth: 50,         //副格線的寬度    minorTickColor: #A0A0A0,        //???沒有看出效果    minorTickInterval:3,               //副標記的間隔    minorTickLength: 10,             //副標記的長度    minorTickPosition: 'inside',     //副標記的位置    minorTickWidth: 5,               //副標記的寬    minPadding: 0.01,    offset: 0,                       //座標軸跟圖的距離    plotBands: //使某數據塊顯示不一樣的效果        plotLines: [{         //標線屬性        value: 0,      //值爲0的標線    }],            tickmarkPlacement: "on",   //標記(文字)顯示的位置，on表示在正對位置上。    reversed: true,            //是否倒置    showFirstLabel: false,     //第一個標記的數值是否顯示    startOfWeek: 2,    tickColor: 'blue',         //標記(座標的記號)的顏色    tickInterval: 20,          //標記(座標的記號)的步長    tickLength: 5,    tickmarkPlacement: "on",    tickPixelInterval: 1000,   //兩座標之間的寬度    tickPosition: "inside",    //座標標記的方向    title: {                   //設置座標標題的相關屬性        margin: 40,        rotation: 90,        text: "Y-values",        align: "middle",        enabled: "middle",        style: {color: 'red'}    },    type: "linear"tooltip的部分相關屬性說明    tooltip: //提示框設置    {              formatter: function() {  //格式化提示框的內容樣式        return '<b>'+ this.series.name +'</b><br/>'+                this.x +': '+ this.y +'°C';        },                               backgroundColor: '#CCCCCC',   //背景顏色        borderColor: '#FCFFC5'      //邊框顏色        borderRadius: 2             //邊框的圓角大小        borderWidth: 3,               //邊框寬度(大小)        enabled: false,             //是否顯示提示框        shadow: false,              //提示框是否應用陰影  ?沒有看出明顯效果?????????        shared: true,               //當打開這個屬性，鼠標幾個某一區域的時候，若是有多條線，全部的線上的據點都會有響應(ipad)        snap: 0,                  crosshairs: {                 //交叉點是否顯示的一條縱線            width: 2,            color: 'gray',           dashStyle: 'shortdot'        }        style: {  //提示框內容的樣式            color: 'white',            padding: '10px',    //內邊距 (這個會經常使用到)            fontSize: '9pt',                    }    },legend(圖例說明)的部分相關屬性說明    legend: //圖例說明    {           layout: 'vertical',   //圖例說明佈局（垂直顯示,默認橫向顯示）        align: 'center',        //圖例說明的顯示位置        verticalAlign: 'top', //縱向的位置        x: 250,                 //偏移量         y: 0,                       borderWidth: 1,            //邊框寬度        backgroundColor: 'red'   //背景顏色        borderColor: 'red',        borderRadius             //邊框圓角        enabled: false          //是否顯示圖例說明        floating:true           //是否浮動顯示(效果就是會不會顯示到圖中)        itemHiddenStyle: {color: 'red'},        itemHoverStyle: {color: 'red'}   //鼠標放到某一圖例說明上，文字顏色的變化顏色        itemStyle:  {color: 'red'}   //圖例說明的樣式        itemWidth:                   //圖例說明的寬度        labelFormatter: function() { return this.value}       //?????????????默認(return this.name)        lineHeight: 1000             //沒看出明顯效果        margin: 20        reversed:true                //圖例說明的順序（是否反向）        shadow:true                  //陰影        style: {color:'black'}        symbolPadding: 100           //標誌（線）跟文字的距離        symbolWidth: 100             //標誌的寬        width:100    }, plotOptions的部分修改屬性說明    plotOptions: (我這個是在柱形圖上作的測試)    {          column: //柱形圖        {            pointPadding: 0.2,            borderWidth: 1,               //柱子邊框的大小            borderColor: "red",           //柱子邊框的顏色            borderRadius: 180,            //柱子兩端的圓角的半徑            colorByPoint: true,           //否應該接受每系列的一種顏色或每點一種顏色            groupPadding: 0,                //每一組柱子之間的間隔(會影響到柱子的大小)            minPointLength: 0,            //最小數據值那一條柱子的長度(若是是0，可能看不到，能夠設置出來)            pointPadding: 0.1,            //柱子之間的間隔(會影響到柱子的大小)            pointWidth: 2,                //柱子的大小(會影響到柱子的大小)            allowPointSelect: false,             animation: true,              //圖形出來時候的動畫            color: 'red',                 //柱子的顏色            connectNulls: false,          //鏈接圖表是否忽略零點(如線形圖，數據爲0是是否忽略)            cursor: '',                   //?????????遊標            dashStyle: null,            dataLabels: { //圖上是否顯示數據標籤            enabled: true,            align: "center",            color: 'red',            formatter: function()             {                return this.y + 'mm'            },            rotation: 270,            staggerLines: 0,            step: ,            style: ,            x: 0,            y: -6            },            enableMouseTracking:             events: {    //事件            click: function(event)            {                alert(this.name);            },            checkboxClick: ,            hide: ,            legendItemClick: ,            mouseOver: ,            mouseOut: ,            show:            },            id: null,            lineWidth: 20,            marker: {  //圖例說明上的標誌            enabled: false            },            point: {     //圖上的數據點(這個在線形圖可能就直觀)            events: {                click: function()                 {                alert(this.y);                },                mouseOver: ,                mouseOut: ,                remove: ,                select: ,                unselect: ,                update:                }            },            pointStart: 0,     //顯示圖數據點開始值            pointInterval: 1,  //顯示圖數據點的間隔            selected: false,            shadow: true,            showCheckbox: true,  //是否顯示(圖例說明的)複選框            showInLegend: false, //是否顯示圖例說明            stacking: 'percent', //是否堆積???            states:             {                            hover:                 {                                brightness: 0.1,                                enabled: true,    //圖上的數據點標誌是否顯示                                lineWidth: 2,    //沒看出效果                                marker:                 {                                    states: ,                                    enabled: true,         //數據點標誌是否顯示                                    fillColor: null,       //數據點標誌填充的顏色                                    lineColor: "#FFFFFF",  //數據點標誌線的顏色                                    lineWidth: 0,          //數據點標誌線的大小                                    radius: 45,            //數據點標誌半徑                                    symbol: 'triangle'//'url(http://highcharts.com/demo/gfx/sun.png)' //數據點標誌形狀(triangle三角形,或者用圖片等等)                                }                            }                     },             stickyTracking: true,  //軌道粘性 (例如線圖，若是這個設置爲否認，那就必須點到數據點纔有反應)             visible: true,         //設置爲false就不顯示圖             zIndex: null             },