<%@ 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 // 蜡烛图的宽度
}]
});
}});///////////////
分享到:
相关推荐
highstock实现K线图绘制,实现功能如下: 1.根据用户选择的时间区间,显示最高价和最低价。 2.点击最高价或最低价的flags会显示出相应的时间。 3.动态改变X轴时间显示格式(%Y %Y-%m %m-%d),防止样式重叠在一起...
vue vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-分时图和交易量图 vue+Echarts绘制k线图(二)-...
对于“k线图分成2种形式绘制”,这可能指的是普通k线图和蜡烛形k线图。普通k线图只显示开盘价、收盘价、最高价和最低价的线条,而蜡烛形k线图则包含了实体部分,视觉效果更直观。在MFC中,可以通过判断收盘价与开盘...
行情K线绘制工具是金融数据分析领域中不可或缺的一部分,主要用于展示股票、期货、外汇等市场的价格走势。K线图,也称为蜡烛图或日本烛台图,是一种视觉化的价格图表,能够清晰地显示一段时间内证券或商品的开盘价、...
1、资源内容:在前端开发中使用Vue2+ECharts.5.3+WebSocket自动绘制动态k线(支持缩放,平移K线) 2、使用/学习目标:实现K线的动态更新, 3、应用场景:前端K线动态显示 4、特点:已经封装了websocket,集成了演示...
在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 应用程序中使用amCharts库来绘制股票K线图。amCharts是一款强大的数据可视化工具,尤其适用于创建交互式的图表,包括股票K线图。K线图是金融...
本项目名为“C# K线绘制”,它涉及到的核心技术是金融图表的绘制以及与交易系统的交互,具体包括K线图的实现和CTP(China Trading Platform)接口的使用。 K线图,又称蜡烛图或日本烛台图,是股票、期货和外汇市场...
本文将深入探讨如何使用Python编程语言来绘制K线图,主要基于`绘制K线图源码.txt`文件中的内容。 首先,我们需要了解K线图的基本组成。K线由四个关键要素构成:开盘价、收盘价、最高价和最低价。在图形上,实体部分...
4. 动态更新:为了展示实时行情,你需要定期刷新数据并更新K线图。可以使用DispatcherTimer或async/await操作来异步加载新数据,并重新绘制K线。 5. 用户交互:添加滚动、缩放、鼠标点击等交互功能,以便用户查看...
3. K线绘制:根据数据,使用图形库提供的API来绘制K线。K线通常由一根代表开盘价和收盘价的矩形柱子(或“蜡烛”)和上下两个线段(“影线”)组成,分别表示当天的最高价和最低价。根据开盘价与收盘价的关系,矩形...
在本人开发的CChart曲线绘制库的基础上,拓展出了一个新工具,用于K线图的绘制。本工具的介绍见https://bbs.csdn.net/topics/392553980,CChart的介绍见https://bbs.csdn.net/topics/392520079。最主要的特点是调用...
行情K线JS Canvas绘制工具是一种基于JavaScript和HTML5 Canvas技术实现的用于绘制股票行情图表的解决方案。这个工具主要用于展示股票的开盘价、收盘价、最高价和最低价,也就是我们通常所说的K线图。K线图是金融市场...
5. **绘制K线图**:最后,调用Chart的validateData()方法来绘制图表。确保WebBrowser控件的IsScriptEnabled属性设置为true,以便JavaScript代码能够执行。 在提供的“StockAnalyse”文件中,可能包含了实现以上步骤...
本示例"delphi 绘制K线例子"提供了一个使用Delphi来绘制股票K线图的程序,这对于理解和实现股票分析软件具有很高的学习价值。 首先,我们来了解一下K线图。K线图,又称蜡烛图,是股票市场中一种常用的技术分析图表...
4. **绘制K线**:利用选定的图形库,你可以开始绘制K线。每个K线由四部分组成:上影线(最高价到收盘价)、下影线(开盘价到最低价)、实体(开盘价和收盘价之间)。根据开盘价和收盘价的关系,实体可以是实心(收盘...
"股票K线图绘制" 本文主要介绍股票K线图绘制的基本知识和绘制方法,并使用Python语言和相关库来实现股票K线图的绘制。 一、股票K线图基本知识 股票K线图是一种常用的股票技术分析工具,通过四个价格(开盘价、...
MFC代码中,K线的绘制需要考虑颜色的变化(上涨为阳线,下跌为阴线)以及实体和影线的长度,以清晰地展示价格波动情况。 2. **均线**:移动平均线(Moving Average,简称MA)是通过对一定时间段内的收盘价进行平均...
在股票行情软件中,PB可能用于高效地处理和传输大量实时的股票数据,确保K线图绘制的实时性和准确性。 在实现PB划K线图的过程中,首先需要收集股票市场的实时数据,包括每个交易时间段的开盘价、收盘价、最高价和...
本项目提供了一个简单的Java程序,用于绘制k线图,非常适合初学者学习和实践。 首先,让我们了解k线图的基本构成。一根k线由四个主要部分组成:开盘价(Open)、收盘价(Close)、最高价(High)和最低价(Low)。...
在本文中,我们将深入探讨如何使用Microsoft Foundation Class (MFC) 库以及ChartCtrl控件来实现基于Windows的K线图绘制与显示。MFC是一个C++类库,它为开发Windows应用程序提供了一种结构化的框架,而ChartCtrl是...