highstock 绘制K线行情

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/include/head_new.jsp"></jsp:include>
<style type="text/css">
.select_ul{
	height:30px;
	background:#ddd;
}
.select_ul li{
	height:22px;
	margin:4px 0 0 10px;
	float:left;
	cursor:pointer;
	line-height:22px;
	padding:0 4px;
}
.select_ul li.current{
	background:#bbb;
	border-radius:3px;
	font-weight:bold;
}
</style>
<script src="/sts/js/highcharts/highstock.src.js"></script>
		<script type="text/javascript">
		Date.prototype.Format = function (fmt) { //author: meizz
		    var o = {
		        "M+": this.getMonth() + 1, //月份
		        "d+": this.getDate(), //日
		        "h+": this.getHours(), //小时
		        "m+": this.getMinutes(), //分
		        "s+": this.getSeconds(), //秒
		        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
		        "S": this.getMilliseconds() //毫秒
		    };
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    for (var k in o)
		    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    return fmt;
		};
		var quoteTypeFlag = 0;
		/**
		quoteType:K线类型，1-1分钟，2-5分钟，3-15分钟，4-30分钟，5-1小时，6-2小时，7-4小时， * 8-1天，9-1星期，10-1个月，11-1季度，12一年
		*/
		$(function() {
			if(quoteTypeFlag == 0){
				// 如果用户没有触发   则默认显示1小时的数据K线
				listRealtimeQuote(5);
			}
		});

		function quoteType(type){
			// 显示 highstock
			listRealtimeQuote(type);
			// 如果是用户触发  则赋值给  quoteTypeFlag
			quoteTypeFlag = type;
		}
		</script>
		<div class="content ptlr10">
                    <ul class="select_ul">
                        <li onclick="quoteType(1)" id="l1">1分</li>
                        <li onclick="quoteType(2)" id="l2">5分</li>
                        <li onclick="quoteType(3)" id="l3">15分</li>
                        <li onclick="quoteType(4)" id="l4">30分</li>
						<li onclick="quoteType(5)" id="l5">1时</li>
                        <li onclick="quoteType(6)" id="l6">2时</li>
                        <li onclick="quoteType(7)" id="l7">4时</li>
						<li onclick="quoteType(8)" id="l8">1日</li>
                        <li onclick="quoteType(9)" id="l9">1周</li>
                        <li onclick="quoteType(10)" id="l10">1月</li>
                        <li onclick="quoteType(11)" id="l11">1季度</li>
                        <li onclick="quoteType(12)" id="l12">1年</li>
                    </ul>
		</div>
		<div id="container" style="height: 500px; min-width: 310px"></div>

 function listRealtimeQuote (quoteType) {
			var pointCode = 0,proName="";
			if(quoteType >5){
				pointCode = 4;
			}else if(0< pointCode<=7){
				pointCode = 4;
			}
			$.ajax({
				url: '/data/realtimeQuoteListMarket.do?quoteType='+quoteType,
				type: 'GET',
				dataType: 'json',
				success:function(json){
				// split the data set into ohlc and volume
				var ohlc = [],
					volume = [],
					data = json.object;

				if(data == null){
					return;
				}
				proName = data[0].contractCode;
				var arr=[];
				for (i = 0; i < data.length; i++) {
					var dt = data[i].quoteBeginDate;
					var time = dt.substring(0,4)+"/"+dt.substring(4,6)+"/"+dt.substring(6,8)+"/"+dt.substring(8,10)+":"+dt.substring(10,12)+":"+dt.substring(12,14);
					var dtime = new Date(Date.parse(time)).getTime();
					ohlc.push([
						dtime,//data[i].quoteBeginDate, // the date   (new Date(Date.parse("2014/03/28/09:05:01"))).getTime()
						parseFloat(data[i].open), // open
						parseFloat(data[i].high), // high
						parseFloat(data[i].low), // low
						parseFloat(data[i].close) // close
					]);
					volume.push([
						dtime, // the date
						parseFloat(data[i].endVol) // the volume
					]);
				}
				var quickSort = function(arr) {
					if (arr.length <= 1) { return arr; }
					var pivotIndex = Math.floor(arr.length / 2);
					var pivot = arr.splice(pivotIndex, 1)[0];
					var left = [];
					var right = [];
						for (var i = 0; i < arr.length; i++){
							if (arr[i][0] < pivot[0]) {
								left.push(arr[i]);
							} else {
								right.push(arr[i]);
							}
						}
						return quickSort(left).concat([pivot], quickSort(right));
					};
					ohlc.sort(function(a,b){return a[0]-b[0]});
					volume=quickSort(volume);
				// set the allowed units for data grouping
				var groupingUnits = [
				     				['minute',[1,5,15, 30]],
				     				['hour',[1, 2,4]],
				     				['day',[1]],
				     				['week',[1]],
				     				['month',[1]],
				     				['year',[1]]
					     		];
				// create the chart
				$('#container').highcharts('StockChart', {plotOptions: {// 绘制颜色
				    	candlestick: {
				    		color: '#1BA767',
				    		upColor: '#E24439'
				    	}
					},
				    rangeSelector: {
						enabled:false
				    },
				    inputDateFormat: '%H:%M:%S.%L',
		            inputEditDateFormat: '%H:%M:%S.%L',
		            lang:{
                        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
                        weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        exportButtonTitle:'导出PDF',
                        printButtonTitle:'打印报表'
                    },
				    credits :{
		            	enabled:false
		            },
		            tooltip: {
		            	valueDecimals: 2,
	                    useHTML: true,
		            	formatter: function() {
	                        var ctime = new Date('1970, 1, 1');
	                        ctime.setTime(parseInt(this.x));
	                        var year = ctime.getUTCFullYear();
	                        var month = ctime.getUTCMonth() + 1;
	                        var day = ctime.getUTCDate();
	                        var time = ctime.toLocaleTimeString();
	                        return year + '-' + month + '-' + day + " " + time +"<br/>"+
	                        		'<span style="color:{series.color}">\u25CF</span><b> '+proName+'</b><br/>'+
			                        '开盘价: '+this.points[0].point.open+'<br/>' +
				        			'收盘价: '+this.points[0].point.close+'<br/>' +
				        			'最高价: '+this.points[0].point.high+'<br/>' +
				        			'最低价: '+this.points[0].point.low+'<br/>' ;
                    			}
		        	},
				    title: {
				        text: '产品指数'
				    },
				    yAxis: [{
				        labels: {
				    		align: 'right',
				    		x: -3
				    	},
				        title: {
				            text: '蜡烛图'
				        },
				        height: '60%',
				        lineWidth: 2
				    }, {
				    	labels: {
				    		align: 'right',
				    		x: -3
				    	},
				        title: {
				            text: '条形图'
				        },
				        top: '65%',
				        height: '35%',
				        offset: 0,
				        lineWidth: 2
				    }],
				    series: [{
				        type: 'candlestick',
				        name: proName,
				        data: ohlc,
				        dataGrouping: {
				    		units: groupingUnits
				        }
				    	,pointWidth: pointCode  // 蜡烛图的宽度
				    }]
				});
				}});///