`
annan211
  • 浏览: 459439 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    SVG绘制K线图

    highstock实现K线图绘制,实现功能如下: 1.根据用户选择的时间区间,显示最高价和最低价。 2.点击最高价或最低价的flags会显示出相应的时间。 3.动态改变X轴时间显示格式(%Y %Y-%m %m-%d),防止样式重叠在一起...

    vue+Echarts绘制k线图(二)-分时图和交易量图

    vue vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-...

    使用MFC绘制k线图成交量和平均线

    对于“k线图分成2种形式绘制”,这可能指的是普通k线图和蜡烛形k线图。普通k线图只显示开盘价、收盘价、最高价和最低价的线条,而蜡烛形k线图则包含了实体部分,视觉效果更直观。在MFC中,可以通过判断收盘价与开盘...

    行情k线绘制工具

    行情K线绘制工具是金融数据分析领域中不可或缺的一部分,主要用于展示股票、期货、外汇等市场的价格走势。K线图,也称为蜡烛图或日本烛台图,是一种视觉化的价格图表,能够清晰地显示一段时间内证券或商品的开盘价、...

    在前端开发中使用Vue2+ECharts5.3+WebSocket自动绘制动态k线(支持缩放,平移K线)

    1、资源内容:在前端开发中使用Vue2+ECharts.5.3+WebSocket自动绘制动态k线(支持缩放,平移K线) 2、使用/学习目标:实现K线的动态更新, 3、应用场景:前端K线动态显示 4、特点:已经封装了websocket,集成了演示...

    WPF中使用amCharts绘制股票K线图demo

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 应用程序中使用amCharts库来绘制股票K线图。amCharts是一款强大的数据可视化工具,尤其适用于创建交互式的图表,包括股票K线图。K线图是金融...

    c# K线绘制

    本项目名为“C# K线绘制”,它涉及到的核心技术是金融图表的绘制以及与交易系统的交互,具体包括K线图的实现和CTP(China Trading Platform)接口的使用。 K线图,又称蜡烛图或日本烛台图,是股票、期货和外汇市场...

    绘制K线图源码_K线源码_K线图_股票K线_pythonk线图_K线图python_

    本文将深入探讨如何使用Python编程语言来绘制K线图,主要基于`绘制K线图源码.txt`文件中的内容。 首先,我们需要了解K线图的基本组成。K线由四个关键要素构成:开盘价、收盘价、最高价和最低价。在图形上,实体部分...

    C#的Wpf实现K线图_.zip

    4. 动态更新:为了展示实时行情,你需要定期刷新数据并更新K线图。可以使用DispatcherTimer或async/await操作来异步加载新数据,并重新绘制K线。 5. 用户交互:添加滚动、缩放、鼠标点击等交互功能,以便用户查看...

    C++编写的K线图(源码)

    3. K线绘制:根据数据,使用图形库提供的API来绘制K线。K线通常由一根代表开盘价和收盘价的矩形柱子(或“蜡烛”)和上下两个线段(“影线”)组成,分别表示当天的最高价和最低价。根据开盘价与收盘价的关系,矩形...

    基于C++的K线图绘制工具KLineChart

    在本人开发的CChart曲线绘制库的基础上,拓展出了一个新工具,用于K线图的绘制。本工具的介绍见https://bbs.csdn.net/topics/392553980,CChart的介绍见https://bbs.csdn.net/topics/392520079。最主要的特点是调用...

    行情K线JS Canvas绘制工具

    行情K线JS Canvas绘制工具是一种基于JavaScript和HTML5 Canvas技术实现的用于绘制股票行情图表的解决方案。这个工具主要用于展示股票的开盘价、收盘价、最高价和最低价,也就是我们通常所说的K线图。K线图是金融市场...

    WPF中使用amCharts绘制股票K线图源码的demo

    5. **绘制K线图**:最后,调用Chart的validateData()方法来绘制图表。确保WebBrowser控件的IsScriptEnabled属性设置为true,以便JavaScript代码能够执行。 在提供的“StockAnalyse”文件中,可能包含了实现以上步骤...

    delphi 绘制K线例子

    本示例"delphi 绘制K线例子"提供了一个使用Delphi来绘制股票K线图的程序,这对于理解和实现股票分析软件具有很高的学习价值。 首先,我们来了解一下K线图。K线图,又称蜡烛图,是股票市场中一种常用的技术分析图表...

    delphi 作 的k线图

    4. **绘制K线**:利用选定的图形库,你可以开始绘制K线。每个K线由四部分组成:上影线(最高价到收盘价)、下影线(开盘价到最低价)、实体(开盘价和收盘价之间)。根据开盘价和收盘价的关系,实体可以是实心(收盘...

    股票K线图绘制.pdf

    "股票K线图绘制" 本文主要介绍股票K线图绘制的基本知识和绘制方法,并使用Python语言和相关库来实现股票K线图的绘制。 一、股票K线图基本知识 股票K线图是一种常用的股票技术分析工具,通过四个价格(开盘价、...

    MFC股票K线分析代码

    MFC代码中,K线的绘制需要考虑颜色的变化(上涨为阳线,下跌为阴线)以及实体和影线的长度,以清晰地展示价格波动情况。 2. **均线**:移动平均线(Moving Average,简称MA)是通过对一定时间段内的收盘价进行平均...

    PB划K线图,可用于股票行情软件实时K线图绘制

    在股票行情软件中,PB可能用于高效地处理和传输大量实时的股票数据,确保K线图绘制的实时性和准确性。 在实现PB划K线图的过程中,首先需要收集股票市场的实时数据,包括每个交易时间段的开盘价、收盘价、最高价和...

    k线图绘制的java程序

    本项目提供了一个简单的Java程序,用于绘制k线图,非常适合初学者学习和实践。 首先,让我们了解k线图的基本构成。一根k线由四个主要部分组成:开盘价(Open)、收盘价(Close)、最高价(High)和最低价(Low)。...

    基于MFC和ChartCtrl的K线图.rar

    在本文中,我们将深入探讨如何使用Microsoft Foundation Class (MFC) 库以及ChartCtrl控件来实现基于Windows的K线图绘制与显示。MFC是一个C++类库,它为开发Windows应用程序提供了一种结构化的框架,而ChartCtrl是...

Global site tag (gtag.js) - Google Analytics