使用过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