<%@ 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 // 蜡烛图的宽度 }] }); }});///////////////