使用過HightChart，這裏做個總結，方便取用。
js部分：
<script type="text/javascript">
function findchart(){
var starttime=$('#starttime').datebox('getValue');
var endtime=$('#endtime').datebox('getValue');
if(starttime=="" || starttime==null){
setMessage("請輸入統計開始時間!");
return;
}else if(endtime=="" || endtime==null){
setMessage("請輸入統計結束時間!");
return;
}
//運行時間指標 圖標
$.post('serviceMonitorAction!createServiceRunttChart.action',{
type: $('#serviceType').combobox('getValue'),
starttime: $('#starttime').datebox('getValue'),
endtime: $('#endtime').datebox('getValue'),
id: $('#serviceId').val(),
name: $('#serviceName').val()
},function(data){
if(data.messageCode=="empty"){
setMessage("運行時間指標監控報表查詢數據爲空,無法顯示報表!");
return;
}else if(data.message=="false"){
setMessage("運行時間指標監控報表查詢失敗!");
return;
}else{
var datalist=[];//柱狀Y軸軸
var columnList=[];//X軸軸
var splinemin=[];//最小值折現值
var splinemax=[];//最大值折現
for(var i=0;i<data.list.length;i++){
columnList.push(data.list[i].name);
datalist.push(parseFloat(parseNumberThree(data.list[i].avgruntime/1000)));
splinemin.push(parseFloat(parseNumberThree(data.list[i].runtimetargetmin/1000)));
splinemax.push(parseFloat(parseNumberThree(data.list[i].runtimetargetmax/1000)));
}
$(function () {
$('#runtime').highcharts({
chart: {
zoomType: 'xy',//圖表是有X-Y雙軸
// backgroundColor : {
// linearGradient : [ 0, 0,
// 500, 500 ],
// stops : [[ 0,'rgb(250, 250, 250)' ],[ 1,'rgb(61, 139, 221)' ] ]
// },
// borderColor : '#EBBA95',
// borderRadius : 20,
// borderWidth : 2,
// className : 'dark-container',
// plotBackgroundColor : 'rgba(250, 250, 250, .1)',
// plotBorderColor : '#339933C',
// plotBorderWidth : 1,
events:{
load:function(){
//document.getElementById("runtime").style.display="block";
}
}
},
title: {//圖表標題
text: '服務運行時間監控圖'
},
credits: {//開發者的鏈接
enabled: false
},
xAxis: [{//橫軸數據填充
categories: columnList,
crosshair: true//是否顯示(類似數據表格的行，鼠標懸空效果)鼠標懸空某列，背景色改變效果
}],
yAxis: [{ // Primary yAxis：縱軸數據填充
labels: {//刻度標籤的數據
format: '{value}s',
style: {
color: Highcharts.getOptions().colors[1]//樣式
}
},
title: {//使用刻度的變量
text: '平均值',//
style: {
color: Highcharts.getOptions().colors[1]
}
}
}
, { // Secondary yAxis
title: {
text: '指標值',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} s',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true //是否雙向是否在正常顯示的對立面顯示軸。正常是垂直座標軸顯示在左邊，水平座標//軸顯示在底部，因此對立面就是垂直座標軸顯示在右邊和水平座標軸顯示在頂部，這通常用於有兩個//或多個座標軸。
}],
tooltip: {
shared: true //
},
legend: { //圖例（類似地圖的比例尺）
layout: 'vertical',
align: 'left',
x: 100,
verticalAlign: 'top',
y: 50,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{//變量數據（集）
name: '平均值',
type: 'column',//圖表類型爲：柱狀圖
yAxis: 1,
data: datalist,
// colorByPoint : true,
tooltip: {
valueSuffix: ' s'
}
}, {
name: '指標最大值',
type: 'spline', //圖表類型爲：折線圖
data: splinemax,
tooltip: {
valueSuffix: 's'
}
}, {
name: '指標最小值',
type: 'spline',
data: splinemin, //圖表類型爲：折線圖
tooltip: {
valueSuffix: 's'
}
}]
});
});
}
});//請求結束
//數據量圖表
$.post('serviceMonitorAction!createServiceDataSizeChart.action',{
type: $('#serviceType').combobox('getValue'),
starttime: $('#starttime').datebox('getValue'),
endtime: $('#endtime').datebox('getValue'),
id: $('#serviceId').val(),
name: $('#serviceName').val()
},function(data){
if(data.messageCode=="empty"){
setMessage("數據量指標監控報表查詢數據爲空,無法顯示報表!");
return;
}else if(data.message=="false"){
setMessage("數據量指標監控報表查詢失敗!");
return;
}else{
var datalist=[];//柱狀Y軸
var columnList=[];//X軸
var splinemin=[];//最小值折現
var splinemax=[];//最大值折現
for(var i=0;i<data.list.length;i++){
columnList.push(data.list[i].name);
datalist.push(parseFloat(parseNumberThree(data.list[i].avgdatasize/1000)));
splinemin.push(parseFloat(parseNumberThree(data.list[i].datasizetargetmin/1000)));
splinemax.push(parseFloat(parseNumberThree(data.list[i].datasizetargetmax/1000)));
}
$(function () {
$('#dataSize').highcharts({
chart: {
zoomType: 'xy',
// backgroundColor : {
// linearGradient : [ 0, 0,
// 500, 500 ],
// stops : [[ 0,'rgb(250, 250, 250)' ],[ 1,'rgb(61, 139, 221)' ] ]
// },
// borderColor : '#EBBA95',
// borderRadius : 20,
// borderWidth : 2,
// className : 'dark-container',
// plotBackgroundColor : 'rgba(250, 250, 250, .1)',
// plotBorderColor : '#339933C',
// plotBorderWidth : 1,
events:{
load:function(){
//document.getElementById("dataSize").style.display="block";
}
}
},
title: {
text: '服務數據量監控圖'
},
credits: {
enabled: false
},
xAxis: [{
categories: columnList,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}KB',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '平均值',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}
, { // Secondary yAxis
title: {
text: '指標值',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} KB',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 100,
verticalAlign: 'top',
y: 50,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: '平均值',
type: 'column',
yAxis: 1,
data: datalist,
// colorByPoint : true,
tooltip: {
valueSuffix: ' KB'
}
}, {
name: '指標最大值',
type: 'spline',
data: splinemax,
tooltip: {
valueSuffix: 'KB'
}
}, {
name: '指標最小值',
type: 'spline',
data: splinemin,
tooltip: {
valueSuffix: 'KB'
}
}]
});
});
}
});//請求結束
$("#findLogs").window('close');
}
</script>
HTML頁面部分：
<div id="runtime" style="height:auto;margin-left:5px;margin-top:5px;width:1000px;height:475px;display:none;">
</div>
<div id="dataSize" style="height:auto;margin-left:5px;margin-top:5px;width:1000px;height:475px;display:none;">
</div>具體的詳細內容可以查看HighChartsAPI查看HighChartsAPI
