highcharts实现曲线图，多曲线带滚动条（见附件截图）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jspf"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>电压曲线图</title>
<link rel="stylesheet" type="text/css" href="../style/tabpage.css">
<%@ include file="../common/jsFiles.jspf"%>
<script type='text/javascript' src='../dwr/interface/remoteService.js'> </script>
<script language="JavaScript" src="../script/calendar.js"></script>
<script language="JavaScript" src="../report_jasper/JR.js"></script>
<script type='text/javascript' src="../script/jquery.min.js"></script>
<script language="JavaScript" src="../qy_lc_report/highstock.js"></script>
<script>
$(function() {
$('#container').highcharts({
colors: ['yellow', 'green', 'red'], //曲线颜色
chart: {
type: 'line', //尖锐的曲线， spline平滑的曲线
backgroundColor:'black' //背景颜色
},
title: {
text: '三相电压曲线图' //主标题
},
subtitle: {
text: 'A、B、C三相电压在每个时间段内的电压曲线图' //副标题
},
credits: {
enabled: false //设置右下角的标记
},
xAxis: {
categories: ['2014/10/52 8:00:00', '2014/10/52 8:01:00', '2014/10/52 8:02:00', '2014/10/52 8:03:00',
'2014/10/52 8:04:00', '2014/10/52 8:05:00', '2014/10/52 8:06:00', '2014/10/52 8:07:00',
'2014/10/52 8:08:00', '2014/10/52 8:09:00','2014/10/52 8:10:00','2014/10/52 8:11:00',
'2014/10/52 8:12:00', '2014/10/52 8:13:00', '2014/10/52 8:14:00', '2014/10/52 8:15:00',
'2014/10/52 8:16:00', '2014/10/52 8:17:00', '2014/10/52 8:18:00', '2014/10/52 8:19:00',
'2014/10/52 8:20:00', '2014/10/52 8:21:00','2014/10/52 8:22:00','2014/10/52 8:23:00',
'2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:24:00', '2014/10/52 8:25:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00',
'2014/10/52 8:36:00', '2014/10/52 8:37:00', '2014/10/52 8:26:00', '2014/10/52 8:27:00',
'2014/10/52 8:28:00', '2014/10/52 8:29:00', '2014/10/52 8:30:00', '2014/10/52 8:31:00',
'2014/10/52 8:32:00', '2014/10/52 8:33:00','2014/10/52 8:34:00','2014/10/52 8:35:00'],
labels:
{
step:30,
enabled:true,
rotation: 10, //倾斜度
align: 'left', //倾斜方向
style: {
font: 'normal 9px Verdana, sans-serif' //设置字体
}
},
min:1
},
yAxis: {
title: {
text: '电压(V)'
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
tickPositions: [-10,10,30,50,70,90,110,130,150,170,190,210,230,250,270,290,310,
330,350,370,390,410,430,450,470,490,510,530,550,570,590,610,630] // 指定竖轴坐标点的值
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: 'V'
},
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 0.09,
lineColor: '#ffffff',
lineWidth: 0.05
}
}
},
series: [{
name: 'A相电压',
data: [117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6,
117.0, 62.9, 292.5, 14.5, 180.2, 21.5, 225.2, 226.5, 23.3, 181.3, 13.9, 92.6]
}, {
name: 'B相电压',
data: [-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5,
-0.2, 220.8, 215.7, 311.3, 171.0, 322.0, 224.8, 24.1, 20.1, 124.1, 81.6, 212.5]
}, {
name: 'C相电压',
data: [-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5,
-0.9, 210.6, 213.5, 28.4, 213.5, 217.0, 128.6, 14.5, 180.2, 21.5, 225.2, 226.5]
}],
scrollbar: {
enabled: true,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
}
});
});
</script>
</head>
<body class="body">
<div id="container" style="width:100%;height:100%;"></div>
</body>
</html>
