<!--圖表效果展現-->
                       <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>
                      <!--圖表效果展現-->

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

 [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;
        }

C#趨勢圖(highcharts插件)