highstock实现股票分时
时间： 21:32:16
&&&& 阅读：1663
&&&& 评论：
&&&& 收藏：0
highchart学习网站
/docs/index.php
/api/highstock.php
//谷歌手机浏览器酷似有bug，不过在iPhone5上图正确显示
传入数据：股票交易的时间早上9:30-11:30 下午13:00-15:00 & 对应的最新价、成交量、平均价
请求地址如下：:8081/quote/v1/trend?prod_code=600570.SS&fields=last_px,business_amount,avg_px数据格式如下：{"data":{"trend":{"fields":["min_time","last_px","business_amount","avg_px"],"600570.SS":[[,115.00,115.990000],...}
技术难点：1.刻度分隔问题：由于highstock的x轴是按照时间升序的，但是中间11:30到13:00无数据，故x与y轴刻度分隔问题，同时中间位11:30/13:00可见x轴坐标需要定制化？在x与y坐标提供labels：{formatter:function(){return this.//这里改变}}和tickPositioner:function(){return array[]}来定制输出的标签和那些数据显示。2.y轴左右两边问题，一般坐标轴只有1份或在左边或在右边，如何使y轴左右两边都有并且数据对应？图表的右边的y轴，存的数据与图表左边y轴的一样，但是显示的时候labels:{}这里处理输出的值
3.基线问题：在0.00%处需要定制化一条基线如上图蓝色的基线利用var chart = $(DIVID).highcharts();chart.removePlotLine();chart.addPlotLine({});4.标注问题：如上图 112 13:02
-5.08%的显示采用标志带：chart.removePlotBand();chart.addPlotBand({});5.手指触摸问题：本应用可实现上下整体拖动，左右十字线移动。
touchmove、touchstart事件的绑定
document.getElementById("line_map").removeEventListener("touchstart",createKlineChart.kline_touchstart,false); document.getElementById("line_map").addEventListener("touchstart", createTrendChart.trend_touchstart); document.getElementById("line_map").removeEventListener("touchmove",createKlineChart.kline_touchmove,false);
6：手指左右移动十字线跟随移动问题
首先判断手指斜向上角度大于45度就判断为上下移动，否则则判断手指左右移动。
当手指左右移动的时候捕获事件获取pagex,pageY针对父控件手指的x、y坐标，然后做映射
i=x/chart.width*data.
data.length与 chart.plotwidth宽度 &对应i为平均分布在宽度chart.plotwidth上的数据,找到i之后就可以从data中取值data[i][0]x轴事件 data[i][1]y轴的值
需要引入highstock.js &jquery.js
1 &div id="report" class="klineMap-report"&&/div&
2 &div class="kline_map" id="line_map" style="height: 200width: 100%" &
1 var Trend_Url=js_lib.getTrendUrl();
2 //:8081/quote/v1/trend?prod_code=600570.SS&fields=last_px,business_amount,avg_px
3 var Real_Url=js_lib.getCommonRealUrl();
4 //:8081/quote/v1/real?en_prod_code=600570.SS&fields=open_px,preclose_px
5 var DIVID=‘#line_map‘;
6 //接收个股代码
7 var STOCK_CODE = js_lib.getQueryStringByName("stock_code");
11 if(STOCK_CODE==""){
STOCK_CODE="600570.SS";
14 function clickTrend(obj){
var price_param="en_prod_code="+STOCK_CODE+"&fields=open_px,preclose_px";
js_lib.ajax(Real_Url,callbackReal, ‘get‘,price_param,failCallback);
$(obj).parent().parent().children().each(function(){
$(this).removeClass("hover");
$(obj).parent().addClass("hover");
22 function clickTrend_Show(val){
var jsonText = JSON.parse(val);
if(typeof(jsonText.error_info)!=‘undefined‘){
failCallback();
var data=jsonText.data.
data=data[STOCK_CODE];
trendChart(DIVID,data);
33 //图表上的成交量第一条的数据红绿的判断 是根据昨日的收盘价preclose_px 和今日的最新价last_px进行对比
34 //同时获取的昨日收盘价
用于涨幅的计算
35 var isFirstLineColorflag=true;
36 //保存昨收数据
37 var yesterdayC
38 //可以获取今开 与昨收
39 function callbackReal(val){
var jsonText = JSON.parse(val);
var price_data=jsonText.data.
if(typeof(price_data[STOCK_CODE])==‘undefined‘){
failCallback();
var open_px=price_data[STOCK_CODE][2];
var preclose_px=price_data[STOCK_CODE][3];
yesterdayClose=preclose_
isFirstLineColorflag=open_px&preclose_px?true:false;
//获取分时数据
var kline_params = "prod_code="+STOCK_CODE+"&fields=last_px,business_amount,avg_px";
js_lib.ajax(Trend_Url, clickTrend_Show, ‘get‘,kline_params,failCallback);
59 function clickFiveDayTrend(obj){
$(obj).parent().parent().children().each(function(){
$(this).removeClass("hover");
$(obj).parent().addClass("hover");
65 var avg_pxyAxisM
66 var avg_pxyAxisM
67 var percentageyAxisM
68 var percentageyAxisM
69 var volume_yAxisM
70 var volume_yAxisM
71 var red="#ff0000";
72 var blue="#00a800";
73 function trendChart(DIVID,data)
var ohlc = [],
volume = [],//昨日开盘价
//容错判断
if(data!=undefined&&data!=null&&data.length==0){
failCallback();
// split the data set into ohlc and volume
//数据处理
for (i; i & data. i += 1) {
var dateUTC=getDateUTCOrNot(data[i][0],true);
var business_amount=data[i][2];
var columnColor =
if(i==0){//第一笔的 红绿柱 判断依据是根据 今天开盘价与昨日收盘价比较
if(isFirstLineColorflag==false){
columnColor =
avg_pxyAxisMin=data[i][3];
avg_pxyAxisMax=data[i][3];
percentageyAxisMin=Number(100*(data[i][1]/yesterdayClose-1));
percentageyAxisMax=Number(100*(data[i][1]/yesterdayClose-1));
volume_yAxisMin=data[i][2];
volume_yAxisMax=data[i][2];
//除了第一笔，其它都是
返回的 last_px 与前一个对比
if(data[i-1][1]-data[i][1]&0){
columnColor =
business_amount=data[i][2]-data[i-1][2];
avg_pxyAxisMin=avg_pxyAxisMin&data[i][1]?data[i][1]:avg_pxyAxisM
avg_pxyAxisMax=avg_pxyAxisMax&data[i][1]?avg_pxyAxisMax:data[i][1];
percentageyAxisMin=percentageyAxisMin&Number(100*(data[i][1]/yesterdayClose-1))?Number(100*(data[i][1]/yesterdayClose-1)):percentageyAxisM
percentageyAxisMax=percentageyAxisMax&Number(100*(data[i][1]/yesterdayClose-1))?percentageyAxisMax:Number(100*(data[i][1]/yesterdayClose-1));
volume_yAxisMin=volume_yAxisMin&business_amount?business_amount:volume_yAxisM
volume_yAxisMax=volume_yAxisMax&business_amount?volume_yAxisMax:business_
//将数据放入 ohlc volume 数组中
ohlc.push({x:dateUTC,y:Number(data[i][1])});
volume.push({x:dateUTC,y:Number(business_amount),color:columnColor});
//将剩下的时间信息补全
appendTimeMessage(ohlc,volume,data);
createTrendChart(data,ohlc,volume);
121 function createTrendChart(data,ohlc,volume){
if(data.length&0){
date=data[data.length-1][0]+"";
var dArr = new Array();
for(var hh=0;hh&5;hh++){
if(hh==0){
numb = Number(date.slice(0,4));
numb= Number(date.slice((hh-1)*2+4,hh*2+4));
dArr.push(numb);
var last_dataTime=new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]);
var $reporting = $("#report");
$reporting.html("");
// Create the chart
var am_startTime=new Date(last_dataTime);
am_startTime.setHours(9, 30, 0, 0);
var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes()));
var am_midTime=new Date(last_dataTime);
am_midTime.setHours(10, 30, 0, 0);
var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes()));
//股票交易早上最后的时间
var am_lastTime=new Date(last_dataTime);
am_lastTime.setHours(11, 30, 0, 0);
var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes()));
//股票交易下午最后的时间
var pm_startTime=new Date(last_dataTime);
pm_startTime.setHours(13, 1, 0, 0);
var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes()));
var pm_midTime=new Date(last_dataTime);
pm_midTime.setHours(14, 0, 0, 0);
var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes()));
var pm_lastTime=new Date(last_dataTime);
pm_lastTime.setHours(15, 0, 0, 0);
var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes()));
//常量本地化
Highcharts.setOptions({
global : {
useUTC : true
var startX,startY,swipeX,swipeY;
createTrendChart.trend_touchstart=function(event){
var touch = event.touches[0];
startX=touch.pageX;
startY=touch.pageY;
swipeX=swipeY=false;
document.getElementById("line_map").addEventListener("touchmove", createTrendChart.trend_touchmove);
createTrendChart.trend_touchmove=function (event){
var touch = event.touches[0];
var currenX=touch.pageX;
var currentY=touch.pageY;
if(true==swipeX){//先左右就一直左右
上下也不影响
swipeY=false;
else if(true==swipeY){//向上下移动的标志
swipeX=false;
if(Math.abs(currentY-startY)&Math.abs(currenX-startX)){//上下移动
swipeY=true;
swipeX=true;
if(true==swipeY){//上下移动
先重画线 人后删除事件
document.getElementById("line_map").removeEventListener("touchmove", createTrendChart.trend_touchmove,false);
}else if(true==swipeX){
event.stopPropagation();
event.preventDefault();
//不管 上下 还是 左右 都需要先画标示线
var chart = $(DIVID).highcharts();
var left=chart.yAxis[0].left+(chart.yAxis[0].axisLine.strokeWidth==undefined?0:chart.yAxis[0].axisLine.strokeWidth);
var x = touch.pageX-left-7;
//x点 =x/chart宽度 * 总体点的个数
x=(x/chart.plotWidth)*ohlc.
i=Number(Math.ceil(x));
if(i&=data.length||i&0){
//计算图表x轴
x=ohlc[i].x;//utc格式时间数据
y=data[i][1];
var last_px=data[i][1].toFixed(2);
var business_amount=data[i][2];
var avg_price=data[i][3].toFixed(2);
var zfz=(100*(ohlc[i].y/yesterdayClose-1)).toFixed(2);
var time=Highcharts.dateFormat(‘%H:%M ‘, x);
//除了第一笔，其它都是
返回的 last_px 与前一个对比
business_amount=data[i][2]-data[i-1][2];
$reporting.html(
‘&div class="detail"&‘+
‘&li class="value-2"&‘+ ‘价格:
&span&‘+last_px+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘成交量:
&span&‘+business_amount+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘均价:
&span&‘+avg_price+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘涨幅值:
&span&‘+zfz+‘%&/span&&/li&‘+
‘&/ul&‘+
‘&/div&‘
var chart = $(DIVID).highcharts();
// Highcharts构造函数
chart.xAxis[0].removePlotBand("plotBand-x");
chart.xAxis[0].addPlotBand({
borderColor:‘red‘,
borderWidth:0.1,
color: ‘red‘,
from: x-0.000001,//,Date.UTC(,10,50),
x+0.000001,//Date.UTC(,10,51),
useHTML:true,
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+time+‘&/span&‘,
textAlign: ‘bottom‘,
id:‘plotBand-x‘,
zIndex:1001
chart.yAxis[0].removePlotBand("plotBand-y0");
chart.yAxis[0].addPlotBand({
borderColor:‘red‘,
borderWidth:0.1,
color: ‘red‘,
from: y-0.000001,//,Date.UTC(,10,50),
y+0.000001,//Date.UTC(,10,51),
useHTML:true,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+y+‘&/span&‘,
verticalAlign:‘top‘,
textAlign: ‘left‘,
id:‘plotBand-y0‘,
zIndex:1001
chart.yAxis[0].removePlotBand("plotBand-y1");
chart.yAxis[0].addPlotBand({
color: ‘#BEBEBE‘,
borderColor:‘#BEBEBE‘,
borderWidth:0.1,
from: y-0.000001,//,Date.UTC(,10,50),
y+0.000001,//Date.UTC(,10,51),
useHTML:true,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+zfz+"%"+‘&/span&‘,
textAlign: ‘right‘,
verticalAlign:‘bottom‘,
id:‘plotBand-y1‘,
zIndex:1001
document.getElementById("line_map").removeEventListener("touchstart",createKlineChart.kline_touchstart,false);
document.getElementById("line_map").addEventListener("touchstart", createTrendChart.trend_touchstart);
document.getElementById("line_map").removeEventListener("touchmove",createKlineChart.kline_touchmove,false);
//开始画图
$(DIVID).highcharts(‘StockChart‘, {
//关闭平移
panning:false,
zoomType: ‘none‘,
pinchType:‘none‘,
renderTo : "line_map",
margin: [25, 25,25, 25],
spacing: [0,0,0,0],
plotBorderColor: ‘#3C94C4‘,
plotBorderWidth: 0,
load:function(){
x=ohlc[data.length-1].x;
y=ohlc[data.length-1].y;
var chart = $(DIVID).highcharts();
// Highcharts构造函数
chart.yAxis[0].addPlotLine({
//在x轴上增加
value:yesterdayClose,
//在值为2的地方
width:0.1,
//标示线的宽度为2px
color: ‘#FFA500‘,
//标示线的颜色
zIndex:1001
chart.xAxis[0].removePlotBand("plotBand-x");
chart.xAxis[0].addPlotBand({
borderColor:‘#BEBEBE‘,
borderWidth:0.1,
color: ‘#BEBEBE‘,
from: ohlc[data.length-1].x-0.000001,//,Date.UTC(,10,50),
ohlc[data.length-1].x+0.000001,//Date.UTC(,10,51),
useHTML:true,
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+Highcharts.dateFormat(‘%H:%M ‘, ohlc[data.length-1].x)+‘&/span&‘,
textAlign: ‘top‘,
id:‘plotBand-x‘,
zIndex:1001
chart.yAxis[0].removePlotBand("plotBand-y0");
chart.yAxis[0].addPlotBand({
borderColor:‘#BEBEBE‘,
borderWidth:0.1,
color: ‘#BEBEBE‘,
from: ohlc[data.length-1].y-0.0001,//,Date.UTC(,10,50),
ohlc[data.length-1].y+0.0001,//Date.UTC(,10,51),
useHTML:true,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+ohlc[data.length-1].y.toFixed(2)+‘&/span&‘,
verticalAlign:‘top‘,
textAlign: ‘left‘,
id:‘plotBand-y0‘,
zIndex:1001
chart.yAxis[0].removePlotBand("plotBand-y1");
chart.yAxis[0].addPlotBand({
color: ‘#BEBEBE‘,
borderWidth:0.1,
borderColor:‘#BEBEBE‘,
from: ohlc[data.length-1].y-0.0001,//,Date.UTC(,10,50),
ohlc[data.length-1].y+0.0001,//Date.UTC(,10,51),
useHTML:true,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
text: ‘&span class="value" style="font-size:10background-color:rgba(0,0,0,.6); color:# height:15 line-height:15 padding:0 5"&‘+(100*(ohlc[data.length-1].y/yesterdayClose-1)).toFixed(2)+"%"+‘&/span&‘,
textAlign: ‘right‘,
verticalAlign:‘bottom‘,
id:‘plotBand-y1‘,
zIndex:1001
$reporting.html(
‘&div class="detail"&‘+
‘&li class="value-2"&‘+ ‘价格:
&span&‘+data[data.length-1][1].toFixed(2)+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘成交量:
&span&‘+data[data.length-1][2]+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘均价:
&span&‘+data[data.length-1][3].toFixed(2)+‘&/span&&/li&‘+
‘&li class="value-2"&‘+ ‘涨幅值:
&span&‘+(100*(data[data.length-1][3]/yesterdayClose-1)).toFixed(2)+‘%&/span&&/li&‘+
‘&/ul&‘+
‘&/div&‘
enabled:false,
crosshairs:false
rangeSelector:{
enabled: false,
/*导出配置*/
exporting: {
enabled: false,
/*创建者信息*/
credits: {
enabled: false,
/*下部时间拖拉选择*/
navigator: {
enabled: false,
/*关闭时间选择*/
baseseries: 10
scrollbar: {
enabled: false /*关闭下方滚动条*/
/*底部滚动条*/
scrollbar: {
enabled: false
plotOptions:{
//去掉分时线上的hover事件
enabled: false
enabled: false
showFirstLabel: true,
showLastLabel:true,
scrollbar:{enabled:true},
// staggerLines:5
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
formatter:function(){
var returnTime=Highcharts.dateFormat(‘%H:%M ‘, this.value);
if(returnTime=="11:30 ")
return "11:30/13:00";
return returnT
tickPositioner:function(){
var positions=[am_startTimeUTC,am_midTimeUTC,am_lastTimeUTC,pm_midTimeUTC,pm_lastTimeUTC];
gridLineWidth: 1,
opposite: false,//是否把它显示到另一边（右边）
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
overflow: ‘justify‘,
align: ‘right‘,
formatter:function(){
px_last/preclose昨收盘-1
return (this.value).toFixed(2);
text: ‘‘
top:‘0%‘,
height: ‘65%‘,
lineWidth: 1,
showFirstLabel: true,
showLastLabel:true,
tickPositioner:function(){
//以yesterdayClose为界限，统一间隔值，从 最小到最大步进
positions = [],
tick = Number((avg_pxyAxisMin)),
increment = Number(((avg_pxyAxisMax - avg_pxyAxisMin) / 5));
var tickMin=Number((avg_pxyAxisMin)),tickMax=Number((avg_pxyAxisMax));
if(0==data.length){//还没有数据时，yesterdayClose 的幅值 在 -1% - 1%上下浮动
tickMin=0.99*yesterdayC
tickMax=1.01*yesterdayC
}else if(0==increment){//有数据了
但是数据都是一样的幅值
if(yesterdayClose&Number(avg_pxyAxisMin)){
tickMin=Number(avg_pxyAxisMin);
tickMax=2*yesterdayClose-Number(avg_pxyAxisMin);
}else if(yesterdayClose&Number(avg_pxyAxisMin)){
tickMax=Number(avg_pxyAxisMax);
tickMin=yesterdayClose-(Number(avg_pxyAxisMax)-yesterdayClose);
tickMin=0.99*yesterdayC
tickMax=1.01*yesterdayC
}else if(avg_pxyAxisMin-yesterdayClose&0&&avg_pxyAxisMax-yesterdayClose&0){//最小值在昨日收盘价下面，最大值在昨日收盘价上面
var limit=Math.max(Math.abs(avg_pxyAxisMin-yesterdayClose),Math.abs(avg_pxyAxisMax-yesterdayClose));
tickMin=yesterdayClose-
tickMax=yesterdayClose+
}else if(avg_pxyAxisMin&yesterdayClose&&avg_pxyAxisMax&yesterdayClose){//最小最大值均在昨日收盘价上面
tickMax=avg_pxyAxisM
tickMin=yesterdayClose-(tickMax-yesterdayClose);
}else if(avg_pxyAxisMin&yesterdayClose&&avg_pxyAxisMax&yesterdayClose){//最小最大值均在昨日收盘价下面
tickMin=avg_pxyAxisM
tickMax=yesterdayClose+(yesterdayClose-tickMin);
if(tickMax&2*yesterdayClose){//数据超过100%了
tickMax=2*yesterdayC
tickMin=0;
var interval=Number(tickMax-yesterdayClose)/10;
tickMin=yesterdayClose-(tickMax-yesterdayClose);
increment=(tickMax-yesterdayClose)/3;
tick=tickM
for (i ++ &7 tick += increment) {
positions.push(Number(tick));
opposite: true,//是否把它显示到另一边（右边）
showFirstLabel: true,
showLastLabel:true,
overflow: ‘justify‘,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
align: ‘right‘,
formatter:function(){//最新价
px_last/preclose昨收盘-1
return (100*(this.value/yesterdayClose-1)).toFixed(2)+"%";
text: ‘‘
lineWidth: 1,
top:‘0%‘,
height: ‘65%‘,
gridLineWidth: 1,
tickPositioner:function(){
opposite: false,//是否把它显示到另一边（右边）
overflow: ‘justify‘,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
align: ‘right‘,
formatter:function(){
if(this.value&){
return Number((this.value/).toFixed(2))+"G";
}else if(this.value&1000000){
return Number((this.value/1000000).toFixed(2))+"M";
}else if(this.value&1000){
return Number((this.value/1000).toFixed(2))+"K";
return Number(this.value.toFixed(2));
text: ‘‘
top: ‘70%‘,
height: ‘30%‘,
width:‘100%‘,
offset: 0,
lineWidth: 1,
showFirstLabel: true,
showLastLabel:true,
tickPositioner:function(){
var positions = [],
tickMax=volume_yAxisMax,
tickMin=volume_yAxisMin,
increment = 0;
var limit=tickMax/2;
increment=tickMax/2;
for ( tick
&= tickM tick += increment) {
positions.push(Number(tick.toFixed(2)));
if(increment==0){
series : [{
name : ‘AAPL Stock Price‘,
data : ohlc,
type : ‘areaspline‘,
tooltip : {
valueDecimals : 2
fillColor : {
linearGradient : {
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
name : ‘AAPL Stock Price‘,
data : ohlc,
type : ‘scatter‘,
cursor:‘pointer‘,
onSeries : ‘candlestick‘,
color:‘transparent‘,
tooltip : {
valueDecimals : 2
fontSize: ‘0px‘,
fontWeight: ‘0‘,
textAlign: ‘center‘
zIndex:-1000,
type: ‘column‘,
name: ‘成交量‘,
data: volume,
dataGrouping: {
enabled: false,
forced: true
zIndex:-1000
* 错误处理
669 function failCallback(){
var last_dataTime=new Date();
var $reporting = $("#report");
$reporting.html("");
// Create the chart
var am_startTime=new Date(last_dataTime);
am_startTime.setHours(9, 30, 0, 0);
var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes()));
var am_midTime=new Date(last_dataTime);
am_midTime.setHours(10, 30, 0, 0);
var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes()));
//股票交易早上最后的时间
var am_lastTime=new Date(last_dataTime);
am_lastTime.setHours(11, 30, 0, 0);
var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes()));
//股票交易下午最后的时间
var pm_startTime=new Date(last_dataTime);
pm_startTime.setHours(13, 1, 0, 0);
var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes()));
var pm_midTime=new Date(last_dataTime);
pm_midTime.setHours(14, 0, 0, 0);
var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes()));
var pm_lastTime=new Date(last_dataTime);
pm_lastTime.setHours(15, 0, 0, 0);
var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes()));
var data=[];
data.push({x:am_startTimeUTC,y:1});
data.push({x:am_midTimeUTC,y:2});
data.push({x:am_lastTimeUTC,y:3});
data.push({x:pm_midTimeUTC,y:4});
data.push({x:pm_lastTimeUTC,y:5});
//常量本地化
Highcharts.setOptions({
global : {
useUTC : true
$(DIVID).highcharts(‘StockChart‘, {
renderTo : "line_map",
margin: [25, 25,25, 25],
plotBorderColor: ‘#3C94C4‘,
plotBorderWidth: 0.3,
// zoomType:false,
enabled:false
rangeSelector:{
enabled: false,
/*导出配置*/
exporting: {
enabled: false,
/*创建者信息*/
credits: {
enabled: false,
/*下部时间拖拉选择*/
navigator: {
enabled: false,
/*关闭时间选择*/
baseseries: 10
/*底部滚动条*/
scrollbar: {
enabled: false
plotOptions:{
//去掉分时线上的hover事件
enabled: false
enabled: false
showFirstLabel: true,
showLastLabel:true,
tickInterval: 1,
//字体样式
font: ‘normal 5px Verdana, sans-serif‘
formatter:function(){
var labels=[‘9:30‘,‘10:30‘,‘11:30/13:00‘,‘14:00‘,‘15:00‘]
return labels[this.value];
categories:[‘9:30‘,‘10:30‘,‘11:30/13:00‘,‘14:00‘,‘15:00‘],
gridLineWidth: 1,
showFirstLabel: true,
showLastLabel:true,
opposite: false,//是否把它显示到另一边（右边）
align: ‘right‘,
text: ‘‘
height: ‘50%‘,
lineWidth: 1,
gridLineWidth: 1,
showFirstLabel: true,
showLastLabel:true,
opposite: false,//是否把它显示到另一边（右边）
align: ‘right‘,
text: ‘‘
top: ‘60%‘,
height: ‘40%‘,
offset: 0,
lineWidth: 1,
gridLindeWidth:1,
series : [{
name : ‘AAPL Stock Price‘,
data :[10,20,30,40,50],// [["9:30",200],["10:30",205]["11:30/13:00",210],["14:00",215],["15:00",220]],
type:‘column‘,
color:‘transparent‘,
fillColor : {
linearGradient : {
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
dataGrouping: {
enabled: false,
forced: true
type: ‘column‘,
name: ‘成交量‘,
fillColor : {
linearGradient : {
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
data : [10,20,30,40,50],//[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
//[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]],
color:‘transparent‘,
dataGrouping: {
enabled: false,
forced: true
* 获取日期对象，如果isUTC为true获取 日期的UTC对象，false则获取普通日期对象
* @param date
* @param isUTC
* @returns
864 function getDateUTCOrNot(date,isUTC){
if(! (date instanceof String))
var dArr = new Array();
for(var hh=0;hh&5;hh++){
if(hh==0){
numb = Number(date.slice(0,4));
numb= Number(date.slice((hh-1)*2+4,hh*2+4));
dArr.push(numb);
if(isUTC==false){
return new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]);
var dateUTC = Number(Date.UTC(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]));//得出的UTC时间
return dateUTC;
887 //数据补全
888 function appendTimeMessage(ohlc,volume,data){
var date=data[data.length-1][0]+"";
var last_dataTime=getDateUTCOrNot(date,false);
//股票交易早上最后的时间
var am_lastTime=new Date(last_dataTime);
am_lastTime.setHours(11, 30, 0, 0);
//股票交易下午最后的时间
var pm_startTime=new Date(last_dataTime);
pm_startTime.setHours(13, 1, 0, 0);
var pm_lastTime=new Date(last_dataTime);
pm_lastTime.setHours(15, 0, 0, 0);
//把时间日期格式转化成utc格式
function convertDateToUTC(date){
return Number(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes()));
904 //如果获取的时间11：:30之前的计算
if(last_dataTime&am_lastTime){
var i=last_dataT
i.setMinutes((i.getMinutes()+1));
for(;i&=am_lastTi.setMinutes((i.getMinutes()+1)))
ohlc.push({x:convertDateToUTC(i)});
volume.push({x:convertDateToUTC(i)});
i=pm_startT
for(;i&=pm_lastTi.setMinutes((i.getMinutes()+1)))
ohlc.push({x:convertDateToUTC(i)});
volume.push({x:convertDateToUTC(i)});
}else if(last_dataTime&pm_lastTime){
//获取的时间下午13:00之后的计算
if(Number(last_dataTime)==Number(am_lastTime)){
i=pm_startT
i=last_dataT
i.setMinutes((i.getMinutes()+1));
for(;i&=pm_lastTi.setMinutes((i.getMinutes()+1)))
ohlc.push({x:convertDateToUTC(i)});
volume.push({x:convertDateToUTC(i)});
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！