C#趨勢圖(highcharts外掛程式)

標籤：tables   exp   creat   透明度   文字   formatter   math   技術分享   -o   

 <!--圖表效果展現-->                       <div class="TUI-layout-center" style="overflow: auto;" id="appriseContent">                           <div class="ui-layout-center">                <div id="listDiv" style="overflow: auto;" class="TUI-content TUI-h100">                    <!-- class="master_table_content_bg"-->                    <div runat="server" id="divData"  class="TUI-content TUI-h100 TUI-of-auto" style="overflow: auto;">                    </div>                </div>            </div>                        <div class="ui-layout-east" id="divEast">                            <div id="chart_combo" class="chart_combo" style="margin-top:100px;"></div>                        </div>                      </div>                      <!--圖表效果展現-->

View Code

 <script type="text/javascript">            var ajax = Topevery.DUM.Web.AjaxFunction;            $(document).ready(function () {                               TUILayout("form");                createEastLayout();                $("td").css("text-align", "center");            })            function createEastLayout() {                var myLayout = $("#appriseContent").layout({                    fxName: "slide"                                //fxName                        表單隱藏顯示的動畫效果                           , fxSpeed: "slow"                       //fxSpeed                       動畫效果的顯示時間/速度                           , maskIframesOnResize: false             //maskIframesOnResize           頁面中存在Iframe對象時，設為true                           , closable: false                        //closable                      是否允許隱藏開啟表單,true為允許                           , east__size: "100%"                     //west__size                    為調整西邊表單的寬度                           , resizable: false                       //resizable                     是否允許調整表單的高/寬, true為允許                           , slidable: false                        //slidable                      是否允許表單隱藏後可以滑動預覽                           , north__fxName: "slide"                //north__fxName                 北邊表單隱藏顯示的動畫效果                           , south__fxName: "slide"                //south__fxName                 南邊表單隱藏顯示的動畫效果                           , spacing_closed: 7                     //spacing_closed                隱藏後的間隔欄高寬                           , spacing_open: 7                       //spacing_open                  顯示後的間隔欄高寬                           , initClosed: false                     //initClosed                    表單建立後預設隱藏所有表單                           , resizerTip: "調整內容寬度"            //resizerTip                    滑鼠移上調整表單欄所顯示的文字提醒                           , resizerDragOpacity: "0.8"             //resizerDragOpacity            滑鼠調整表單欄顯示顯示的透明度效果                           , sliderTip: "展開"                     //sliderTip                     滑鼠移上滑動隱藏表單欄所顯示的文字提醒                           , togglerTip_open: "隱藏"               //togglerTip_open               滑鼠移上開啟的表單按鈕文字提醒                           , togglerTip_closed: "展開"             //togglerTip_closed             滑鼠移上關閉的表單按鈕文字提醒                           , onopen_end: function () {                           }                           , onresize_end: function () {                           }                    /* , center__showOverflowOnHover: true   被Aaron注釋，firefox下導致下拉框無法正常使用。see http://layout.jquery-dev.com/documentation.cfm#Option_showOverflowOnHover */                });                TUILayout("#divEast");                showCharts1();            }            function showCharts1() {                ajax.GetStatisticsHome3List(function (result) {                    if (result.value) {                        oneHighcharts(result.value.sbnumber, result.value.yxsbnumber, result.value.janumber);                    }                })            }            function oneHighcharts(sbnumber, yxsbnumber, janumber) {                var chart;                $(function () {                    chart = new Highcharts.Chart({                        chart: {                            renderTo: ‘chart_combo‘ //關聯頁面元素div#id                        },                        title: {  //圖表標題                            text: ‘月份案例統計圖‘                        },                        xAxis: { //x軸                            categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],  //X軸類別                            labels: { y: 18 }  //x軸標籤位置：距X軸下方18像素                        },                        yAxis: {  //y軸                            title: { text: ‘案例數‘ }, //y軸標題                            lineWidth: 2 //基準寬度                        },                        tooltip: {                            formatter: function () { //格式化滑鼠滑向圖表資料點時顯示的提示框                                var s;                                if (this.point.name) { // 餅狀圖                                    s = ‘<b>‘ + this.point.name + ‘</b>: <br>‘ + this.y + ‘件(‘ + twoDecimal(this.percentage) + ‘%)‘;                                } else {                                    s = ‘‘ + this.x + ‘: ‘ + this.y + ‘件‘;                                }                                return s;                            }                        },                        labels: { //圖表標籤                            items: [{                                html: ‘‘,                                style: {                                    left: ‘270px‘,                                    top: ‘8px‘                                }                            }]                        },                        exporting: {                            enabled: false  //設定匯出按鈕不可用                        },                        credits: {                            enabled: false // 禁用著作權資訊                        },                        series: [{ //資料列                            type: ‘line‘,                            name: "上報案例總數",                            data: [sbnumber[0], sbnumber[1], sbnumber[2], sbnumber[3], sbnumber[4], sbnumber[5], sbnumber[6], sbnumber[7], sbnumber[8], sbnumber[9], sbnumber[10], sbnumber[11]]                        },                        { //資料列                            type: ‘line‘,                            name: "有效案例數",                            data: [yxsbnumber[0], yxsbnumber[1], yxsbnumber[2], yxsbnumber[3], yxsbnumber[4], yxsbnumber[5], yxsbnumber[6], yxsbnumber[7], yxsbnumber[8], yxsbnumber[9], yxsbnumber[10], yxsbnumber[11]]                        },                        { //資料列                            type: ‘line‘,                            name: "結案數",                            data: [janumber[0], janumber[1], janumber[2], janumber[3], janumber[4], janumber[5], janumber[6], janumber[7], janumber[8], janumber[9], janumber[10], janumber[11]]                        }                        ]                    });                });            }            //保留2位小數            function twoDecimal(x) {                var f_x = parseFloat(x);                if (isNaN(f_x)) {                    alert(‘錯誤的參數‘);                    return false;                }                var f_x = Math.round(x * 100) / 100;                var s_x = f_x.toString();                var pos_decimal = s_x.indexOf(‘.‘);                if (pos_decimal < 0) {                    pos_decimal = s_x.length;                    s_x += ‘.‘;                }                while (s_x.length <= pos_decimal + 2) {                    s_x += ‘0‘;                }                return s_x;            }                    </script>

View Code

 [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]        public static ForecastData GetStatisticsHome3List()        {            ForecastData date = new ForecastData();                         DataTable dt= UmEventLogic.GetStatisticsHome3List().Tables[0];            for (int i = 0; i < 12; i++)            {                date.sbnumber[i] = Convert.ToInt32(dt.Rows[i]["c_sb_num"]);                date.yxsbnumber[i] = Convert.ToInt32(dt.Rows[i]["c_yxsb_num"]);                date.janumber[i] = Convert.ToInt32(dt.Rows[i]["c_ja_num"]);                            }            return date;        }

View Code

C#趨勢圖(highcharts外掛程式)