<!--圖表效果展現--> <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; }
highcharts.js地址 https://www.hcharts.cn/download
