highcharts实现曲线图

atpsoul 2014-09-09

 <!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 type='text/javascript' src="../script/jquery.min.js"></script>
 <script language="JavaScript" src="../qy_lc_report/highstock.js"></script>
<script type="text/javascript">
$(function () {
  $('#container').highcharts({
      colors: ['yellow', 'green', 'red'],
     
      chart: {
          type: 'line',
          backgroundColor:'glay'
      },
      title: {
          text: '三相电压曲线图'
      },
      subtitle: {
          text: 'A、B、C三相电压在每个时间段内的电压曲线图'
      },

     xAxis: {
          type: 'datetime',
          tickPixelInterval :60
      },

      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
                  },
              pointInterval: 10*60*1000, // one hour      //设置间隔时间
              pointStart: Date.UTC(2014,9-1,5)   //设置的是开始时间
              //pointStart:Date.UTC(now.getFullYear(),now.getMonth,now.getDay());
          }
      },
      series: [{
          name: 'A相电压',
          data: [                            
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
             
              14.3, 235.1, 234.3, 15.2, 325.4, 54.7, 323.5, 34.1, 65.6, 97.4, 16.9, 7.1,
              37.9, 37.9, 57.5, 126.7, 347.7, 27.7, 127.4, 327.0, 97.1, 15.8, 85.9, 17.4,
              48.2, 38.5, 99.4, 28.1, 410.9, 310.4, 110.9, 102.4, 102.1, 19.5, 57.5,
              97.1, 17.5, 78.1, 64.8, 33.4, 72.1, 1.9, 2.8, 28.9, 91.3, 14.4, 94.2,
              323.0, 32.0,
              
              ]

      }, {
          name: 'B相电压',
          data: [230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
               230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
               230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
              230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
             
               230.0, 0.0, 20.0, 30.0, 80.0, 120.0, 330.0, 303.0, 40.1, 94.0, 78.3, 123.0,
              45.0, 23.4, 123.0, 86.1, 98.0, 123.0, 83.0, 76.0, 32.0, 95.0, 73.0, 123.0,
              94.0, 3.6, 64.2, 31.7, 84.7, 234.9, 32.1, 29.6, 33.7, 35.9, 10.7, 122.3,
              345.0, 365.3, 43.8, 55.0, 234.8, 435.0, 33.2, 22.0, 120.9, 30.4, 230.3, 120.5, 40.4,
              ]
      },
      {
          name: 'C相电压',
          data: [231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
             231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
              231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
               231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
              231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
               231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
              231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
             231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
              231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
             
               231.0, 232.0, 12.0, 23.0, 20.3, 120.4,303.6, 32.0, 96.1, 32.5, 93.3, 223.0,
              32.1, 93.4, 122.0, 322.1, 127.3,230.5, 103.0, 119.6, 322.0, 14.0, 93.3,222.0,
              12.2, 124.1, 109.2, 49.7, 232.7, 325.9, 96.1, 94.6, 99.7, 324.9, 1.1, 193.3,
              23.0, 332.8, 111.8, 121.0, 4.0, 32.0, 221.2, 1.0, 143.1, 94.5, 123.1, 32.1, 213.1,
              ]
      }
      ]
      ,
      navigation: {
          menuItemStyle: {
              fontSize: '10px'
          }
      },
      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>   

相关推荐