圖形化報表

　　引：圖形化報表一般用來展現業務數據，以便將繁雜的業務數據簡單化。

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         
    },