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>    

你可能感兴趣的:(Highcharts,滚动,时间轴,多曲线)