highstock实现股票分时
highchart学习网站
www.highcharts.com
http://www.hcharts.cn/docs/index.php
http://www.hcharts.cn/api/highstock.php
实现效果:
//谷歌手机浏览器酷似有bug，不过在iPhone5上图正确显示传入数据：股票交易的时间早上9:30-11:30 下午13:00-15:00 对应的最新价、成交量、平均价
请求地址如下：
http://open.hundsun.com: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":[[201505050930,115.800000,48400,115.990000],...}
技术难点：
1.刻度分隔问题：由于highstock的x轴是按照时间升序的，但是中间11:30到13:00无数据，故x与y轴刻度分隔问题，同时中间位11:30/13:00可见x轴坐标需要定制化？
在x与y坐标提供labels：{formatter:function(){return this.value;//这里改变}}和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.length;
data.length与 chart.plotwidth宽度 对应i为平均分布在宽度chart.plotwidth上的数据,找到i之后就可以从data中取值data[i][0]x轴事件 data[i][1]y轴的值
代码：
需要引入highstock.js jquery.js
html
1 <div id="report" class="klineMap-report"></div> 2 <div class="kline_map" id="line_map" style="height: 200px;width: 100%" >
trend.js
1 var Trend_Url=js_lib.getTrendUrl(); 2 //http://open.hundsun.com:8081/quote/v1/trend?prod_code=600570.SS&fields=last_px,business_amount,avg_px 3 var Real_Url=js_lib.getCommonRealUrl(); 4 //http://open.hundsun.com: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"); 8 /* 9 * 分时 10 */ 11 if(STOCK_CODE==""){ 12 STOCK_CODE="600570.SS"; 13 } 14 function clickTrend(obj){ 15 var price_param="en_prod_code="+STOCK_CODE+"&fields=open_px,preclose_px"; 16 js_lib.ajax(Real_Url,callbackReal, 'get',price_param,failCallback); 17 $(obj).parent().parent().children().each(function(){ 18 $(this).removeClass("hover"); 19 }); 20 $(obj).parent().addClass("hover"); 21 } 22 function clickTrend_Show(val){ 23 var jsonText = JSON.parse(val); 24 if(typeof(jsonText.error_info)!='undefined'){ 25 failCallback(); 26 return ; 27 } 28 var data=jsonText.data.trend; 29 data=data[STOCK_CODE]; 30 //画图 31 trendChart(DIVID,data); 32 } 33 //图表上的成交量第一条的数据红绿的判断 是根据昨日的收盘价preclose_px 和今日的最新价last_px进行对比 34 //同时获取的昨日收盘价 用于涨幅的计算 35 var isFirstLineColorflag=true; 36 //保存昨收数据 37 var yesterdayClose; 38 //可以获取今开 与昨收 39 function callbackReal(val){ 40 var jsonText = JSON.parse(val); 41 var price_data=jsonText.data.snapshot; 42 if(typeof(price_data[STOCK_CODE])=='undefined'){ 43 failCallback(); 44 return ; 45 } 46 //今开 47 var open_px=price_data[STOCK_CODE][2]; 48 //昨收 49 var preclose_px=price_data[STOCK_CODE][3]; 50 yesterdayClose=preclose_px; 51 isFirstLineColorflag=open_px>preclose_px?true:false; 52 //获取分时数据 53 var kline_params = "prod_code="+STOCK_CODE+"&fields=last_px,business_amount,avg_px"; 54 js_lib.ajax(Trend_Url, clickTrend_Show, 'get',kline_params,failCallback); 55 } 56 /* 57 * 5日 58 */ 59 function clickFiveDayTrend(obj){ 60 $(obj).parent().parent().children().each(function(){ 61 $(this).removeClass("hover"); 62 }); 63 $(obj).parent().addClass("hover"); 64 } 65 var avg_pxyAxisMin; 66 var avg_pxyAxisMax; 67 var percentageyAxisMin; 68 var percentageyAxisMax; 69 var volume_yAxisMin; 70 var volume_yAxisMax; 71 var red="#ff0000"; 72 var blue="#00a800"; 73 function trendChart(DIVID,data) 74 { 75 var ohlc = [], 76 volume = [],//昨日开盘价 77 i = 0; 78 //容错判断 79 if(data!=undefined&&data!=null&&data.length==0){ 80 failCallback(); 81 return; 82 } 83 // split the data set into ohlc and volume 84 //数据处理 85 for (i; i < data.length; i += 1) { 86 var dateUTC=getDateUTCOrNot(data[i][0],true); 87 var business_amount=data[i][2]; 88 var columnColor = red; 89 if(i==0){//第一笔的 红绿柱 判断依据是根据 今天开盘价与昨日收盘价比较 90 if(isFirstLineColorflag==false){ 91 columnColor = blue; 92 } 93 avg_pxyAxisMin=data[i][3]; 94 avg_pxyAxisMax=data[i][3]; 95 percentageyAxisMin=Number(100*(data[i][1]/yesterdayClose-1)); 96 percentageyAxisMax=Number(100*(data[i][1]/yesterdayClose-1)); 97 volume_yAxisMin=data[i][2]; 98 volume_yAxisMax=data[i][2]; 99 } 100 else { 101 //除了第一笔，其它都是 返回的 last_px 与前一个对比 102 if(data[i-1][1]-data[i][1]>0){ 103 columnColor = blue; 104 } 105 business_amount=data[i][2]-data[i-1][2]; 106 } 107 avg_pxyAxisMin=avg_pxyAxisMin>data[i][1]?data[i][1]:avg_pxyAxisMin; 108 avg_pxyAxisMax=avg_pxyAxisMax>data[i][1]?avg_pxyAxisMax:data[i][1]; 109 percentageyAxisMin=percentageyAxisMin>Number(100*(data[i][1]/yesterdayClose-1))?Number(100*(data[i][1]/yesterdayClose-1)):percentageyAxisMin; 110 percentageyAxisMax=percentageyAxisMax>Number(100*(data[i][1]/yesterdayClose-1))?percentageyAxisMax:Number(100*(data[i][1]/yesterdayClose-1)); 111 volume_yAxisMin=volume_yAxisMin>business_amount?business_amount:volume_yAxisMin; 112 volume_yAxisMax=volume_yAxisMax>business_amount?volume_yAxisMax:business_amount; 113 //将数据放入 ohlc volume 数组中 114 ohlc.push({x:dateUTC,y:Number(data[i][1])}); 115 volume.push({x:dateUTC,y:Number(business_amount),color:columnColor}); 116 } 117 //将剩下的时间信息补全 118 appendTimeMessage(ohlc,volume,data); 119 createTrendChart(data,ohlc,volume); 120 }; 121 function createTrendChart(data,ohlc,volume){ 122 var date; 123 if(data.length>0){ 124 date=data[data.length-1][0]+""; 125 var dArr = new Array(); 126 for(var hh=0;hh<5;hh++){ 127 var numb ; 128 if(hh==0){ 129 numb = Number(date.slice(0,4)); 130 } 131 else { 132 numb= Number(date.slice((hh-1)*2+4,hh*2+4)); 133 }; 134 dArr.push(numb); 135 } 136 } 137 var last_dataTime=new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]); 138 var $reporting = $("#report"); 139 $reporting.html(""); 140 // Create the chart 141 var am_startTime=new Date(last_dataTime); 142 am_startTime.setHours(9, 30, 0, 0); 143 var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes())); 144 145 var am_midTime=new Date(last_dataTime); 146 am_midTime.setHours(10, 30, 0, 0); 147 var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes())); 148 149 //股票交易早上最后的时间 150 var am_lastTime=new Date(last_dataTime); 151 am_lastTime.setHours(11, 30, 0, 0); 152 var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes())); 153 //股票交易下午最后的时间 154 var pm_startTime=new Date(last_dataTime); 155 pm_startTime.setHours(13, 1, 0, 0); 156 var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes())); 157 158 var pm_midTime=new Date(last_dataTime); 159 pm_midTime.setHours(14, 0, 0, 0); 160 var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes())); 161 162 var pm_lastTime=new Date(last_dataTime); 163 pm_lastTime.setHours(15, 0, 0, 0); 164 var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes())); 165 //常量本地化 166 Highcharts.setOptions({ 167 global : { 168 useUTC : true 169 } 170 }); 171 172 var startX,startY,swipeX,swipeY; 173 createTrendChart.trend_touchstart=function(event){ 174 var touch = event.touches[0]; 175 startX=touch.pageX; 176 startY=touch.pageY; 177 swipeX=swipeY=false; 178 document.getElementById("line_map").addEventListener("touchmove", createTrendChart.trend_touchmove); 179 } 180 createTrendChart.trend_touchmove=function (event){ 181 var touch = event.touches[0]; 182 var currenX=touch.pageX; 183 var currentY=touch.pageY; 184 if(true==swipeX){//先左右就一直左右 上下也不影响 185 swipeY=false; 186 } 187 else if(true==swipeY){//向上下移动的标志 188 swipeX=false; 189 }else{ 190 if(Math.abs(currentY-startY)>Math.abs(currenX-startX)){//上下移动 191 swipeY=true; 192 } 193 else{ 194 swipeX=true; 195 } 196 } 197 if(true==swipeY){//上下移动 先重画线 人后删除事件 198 document.getElementById("line_map").removeEventListener("touchmove", createTrendChart.trend_touchmove,false); 199 }else if(true==swipeX){ 200 event.stopPropagation(); 201 event.preventDefault(); 202 } 203 //不管 上下 还是 左右 都需要先画标示线 204 var chart = $(DIVID).highcharts(); 205 var left=chart.yAxis[0].left+(chart.yAxis[0].axisLine.strokeWidth==undefined?0:chart.yAxis[0].axisLine.strokeWidth); 206 var y ; 207 var x = touch.pageX-left-7; 208 //x点 =x/chart宽度 * 总体点的个数 209 x=(x/chart.plotWidth)*ohlc.length; 210 var i=0; 211 i=Number(Math.ceil(x)); 212 if(i>=data.length||i<0){ 213 return;} 214 //计算图表x轴 215 x=ohlc[i].x;//utc格式时间数据 216 y=data[i][1]; 217 var last_px=data[i][1].toFixed(2); 218 var business_amount=data[i][2]; 219 var avg_price=data[i][3].toFixed(2); 220 var zfz=(100*(ohlc[i].y/yesterdayClose-1)).toFixed(2); 221 var time=Highcharts.dateFormat('%H:%M ', x); 222 //除了第一笔，其它都是 返回的 last_px 与前一个对比 223 if(i!=0){ 224 business_amount=data[i][2]-data[i-1][2]; 225 } 226 $reporting.html( 227 '<div class="detail">'+ 228 '<ul>'+ 229 '<li class="value-2">'+ '价格: <span>'+last_px+'</span></li>'+ 230 '<li class="value-2">'+ '成交量: <span>'+business_amount+'</span></li>'+ 231 '<li class="value-2">'+ '均价: <span>'+avg_price+'</span></li>'+ 232 '<li class="value-2">'+ '涨幅值: <span>'+zfz+'%</span></li>'+ 233 '</ul>'+ 234 '</div>' 235 ); 236 var chart = $(DIVID).highcharts(); // Highcharts构造函数 237 chart.xAxis[0].removePlotBand("plotBand-x"); 238 chart.xAxis[0].addPlotBand({ 239 borderColor:'red', 240 borderWidth:0.1, 241 color: 'red', 242 from: x-0.000001,//,Date.UTC(2015, 3, 27,10,50), 243 to: x+0.000001,//Date.UTC(2015, 3, 27,10,51), 244 label: { 245 useHTML:true, 246 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+time+'</span>', 247 textAlign: 'bottom', 248 y:5, 249 x:-30 250 }, 251 id:'plotBand-x', 252 zIndex:1001 253 }); 254 chart.yAxis[0].removePlotBand("plotBand-y0"); 255 chart.yAxis[0].addPlotBand({ 256 borderColor:'red', 257 borderWidth:0.1, 258 color: 'red', 259 from: y-0.000001,//,Date.UTC(2015, 3, 27,10,50), 260 to: y+0.000001,//Date.UTC(2015, 3, 27,10,51), 261 label: { 262 useHTML:true, 263 style: { //字体样式 264 font: 'normal 5px Verdana, sans-serif' 265 }, 266 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+y+'</span>', 267 verticalAlign:'top', 268 textAlign: 'left', 269 x:-25, 270 y:-2 271 }, 272 id:'plotBand-y0', 273 zIndex:1001 274 275 }); 276 chart.yAxis[0].removePlotBand("plotBand-y1"); 277 chart.yAxis[0].addPlotBand({ 278 color: '#BEBEBE', 279 borderColor:'#BEBEBE', 280 borderWidth:0.1, 281 from: y-0.000001,//,Date.UTC(2015, 3, 27,10,50), 282 to: y+0.000001,//Date.UTC(2015, 3, 27,10,51), 283 label: { 284 useHTML:true, 285 style: { //字体样式 286 font: 'normal 5px Verdana, sans-serif' 287 }, 288 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+zfz+"%"+'</span>', 289 textAlign: 'right', 290 verticalAlign:'bottom', 291 x:280, 292 y:-2 293 }, 294 id:'plotBand-y1', 295 zIndex:1001 296 }); 297 } 298 document.getElementById("line_map").removeEventListener("touchstart",createKlineChart.kline_touchstart,false); 299 document.getElementById("line_map").addEventListener("touchstart", createTrendChart.trend_touchstart); 300 document.getElementById("line_map").removeEventListener("touchmove",createKlineChart.kline_touchmove,false); 301 //开始画图 302 $(DIVID).highcharts('StockChart', { 303 chart:{ 304 //关闭平移 305 panning:false, 306 zoomType: 'none', 307 pinchType:'none', 308 renderTo : "line_map", 309 margin: [25, 25,25, 25], 310 spacing: [0,0,0,0], 311 plotBorderColor: '#3C94C4', 312 plotBorderWidth: 0, 313 events:{ 314 load:function(){ 315 x=ohlc[data.length-1].x; 316 y=ohlc[data.length-1].y; 317 var chart = $(DIVID).highcharts(); // Highcharts构造函数 318 //基准线 319 chart.yAxis[0].addPlotLine({ //在x轴上增加 320 value:yesterdayClose, //在值为2的地方 321 width:0.1, //标示线的宽度为2px 322 color: '#FFA500', //标示线的颜色 323 zIndex:1001 324 }); 325 chart.xAxis[0].removePlotBand("plotBand-x"); 326 chart.xAxis[0].addPlotBand({ 327 borderColor:'#BEBEBE', 328 borderWidth:0.1, 329 color: '#BEBEBE', 330 from: ohlc[data.length-1].x-0.000001,//,Date.UTC(2015, 3, 27,10,50), 331 to: ohlc[data.length-1].x+0.000001,//Date.UTC(2015, 3, 27,10,51), 332 label: { 333 useHTML:true, 334 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+Highcharts.dateFormat('%H:%M ', ohlc[data.length-1].x)+'</span>', 335 textAlign: 'top', 336 y:5, 337 x:-30 338 }, 339 id:'plotBand-x', 340 zIndex:1001 341 }); 342 chart.yAxis[0].removePlotBand("plotBand-y0"); 343 chart.yAxis[0].addPlotBand({ 344 borderColor:'#BEBEBE', 345 borderWidth:0.1, 346 color: '#BEBEBE', 347 from: ohlc[data.length-1].y-0.0001,//,Date.UTC(2015, 3, 27,10,50), 348 to: ohlc[data.length-1].y+0.0001,//Date.UTC(2015, 3, 27,10,51), 349 label: { 350 useHTML:true, 351 style: { //字体样式 352 font: 'normal 5px Verdana, sans-serif' 353 }, 354 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+ohlc[data.length-1].y.toFixed(2)+'</span>', 355 verticalAlign:'top', 356 textAlign: 'left', 357 x:-25, 358 y:-2 359 }, 360 id:'plotBand-y0', 361 zIndex:1001 362 }); 363 chart.yAxis[0].removePlotBand("plotBand-y1"); 364 chart.yAxis[0].addPlotBand({ 365 color: '#BEBEBE', 366 borderWidth:0.1, 367 borderColor:'#BEBEBE', 368 from: ohlc[data.length-1].y-0.0001,//,Date.UTC(2015, 3, 27,10,50), 369 to: ohlc[data.length-1].y+0.0001,//Date.UTC(2015, 3, 27,10,51), 370 label: { 371 useHTML:true, 372 style: { //字体样式 373 font: 'normal 5px Verdana, sans-serif' 374 }, 375 text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+(100*(ohlc[data.length-1].y/yesterdayClose-1)).toFixed(2)+"%"+'</span>', 376 textAlign: 'right', 377 verticalAlign:'bottom', 378 x:280, 379 y:-2 380 }, 381 id:'plotBand-y1', 382 zIndex:1001 383 }); 384 $reporting.html( 385 '<div class="detail">'+ 386 '<ul>'+ 387 '<li class="value-2">'+ '价格: <span>'+data[data.length-1][1].toFixed(2)+'</span></li>'+ 388 '<li class="value-2">'+ '成交量: <span>'+data[data.length-1][2]+'</span></li>'+ 389 '<li class="value-2">'+ '均价: <span>'+data[data.length-1][3].toFixed(2)+'</span></li>'+ 390 '<li class="value-2">'+ '涨幅值: <span>'+(100*(data[data.length-1][3]/yesterdayClose-1)).toFixed(2)+'%</span></li>'+ 391 '</ul>'+ 392 '</div>' 393 ); 394 } 395 } 396 }, 397 tooltip:{ 398 enabled:false, 399 crosshairs:false 400 }, 401 rangeSelector:{ 402 enabled: false, 403 }, 404 /*导出配置*/ 405 exporting: { 406 enabled: false, 407 }, 408 /*创建者信息*/ 409 credits: { 410 enabled: false, 411 }, 412 /*下部时间拖拉选择*/ 413 navigator: { 414 enabled: false, 415 /*关闭时间选择*/ 416 baseseries: 10 417 }, 418 scrollbar: { 419 enabled: false /*关闭下方滚动条*/ 420 }, 421 /*底部滚动条*/ 422 scrollbar: { 423 enabled: false 424 }, 425 plotOptions:{ 426 //去掉分时线上的hover事件 427 series:{ 428 states: { 429 hover: { 430 enabled: false 431 } 432 }, 433 line: { 434 marker: { 435 enabled: false 436 } 437 }, 438 } 439 }, 440 xAxis:{ 441 showFirstLabel: true, 442 showLastLabel:true, 443 scrollbar:{enabled:true}, 444 labels: { 445 // staggerLines:5 446 style: { //字体样式 447 font: 'normal 5px Verdana, sans-serif' 448 }, 449 formatter:function(){ 450 var returnTime=Highcharts.dateFormat('%H:%M ', this.value); 451 if(returnTime=="11:30 ") 452 { 453 return "11:30/13:00"; 454 } 455 return returnTime; 456 }, 457 }, 458 tickPositioner:function(){ 459 var positions=[am_startTimeUTC,am_midTimeUTC,am_lastTimeUTC,pm_midTimeUTC,pm_lastTimeUTC]; 460 return positions; 461 }, 462 gridLineWidth: 1, 463 }, 464 yAxis: [{ 465 opposite: false,//是否把它显示到另一边（右边） 466 labels: { 467 style: { //字体样式 468 font: 'normal 5px Verdana, sans-serif' 469 }, 470 overflow: 'justify', 471 align: 'right', 472 x: -3, 473 y:5, 474 formatter:function(){ 475 //最新价 px_last/preclose昨收盘-1 476 return (this.value).toFixed(2); 477 } 478 }, 479 title: { 480 text: '' 481 }, 482 top:'0%', 483 height: '65%', 484 lineWidth: 1, 485 showFirstLabel: true, 486 showLastLabel:true, 487 488 tickPositioner:function(){ //以yesterdayClose为界限，统一间隔值，从 最小到最大步进 489 positions = [], 490 tick = Number((avg_pxyAxisMin)), 491 increment = Number(((avg_pxyAxisMax - avg_pxyAxisMin) / 5)); 492 var tickMin=Number((avg_pxyAxisMin)),tickMax=Number((avg_pxyAxisMax)); 493 if(0==data.length){//还没有数据时，yesterdayClose 的幅值 在 -1% - 1%上下浮动 494 tickMin=0.99*yesterdayClose; 495 tickMax=1.01*yesterdayClose; 496 }else if(0==increment){//有数据了 但是数据都是一样的幅值 497 if(yesterdayClose>Number(avg_pxyAxisMin)){ 498 tickMin=Number(avg_pxyAxisMin); 499 tickMax=2*yesterdayClose-Number(avg_pxyAxisMin); 500 }else if(yesterdayClose<Number(avg_pxyAxisMin)){ 501 tickMax=Number(avg_pxyAxisMax); 502 tickMin=yesterdayClose-(Number(avg_pxyAxisMax)-yesterdayClose); 503 }else{ 504 tickMin=0.99*yesterdayClose; 505 tickMax=1.01*yesterdayClose; 506 } 507 }else if(avg_pxyAxisMin-yesterdayClose<0&&avg_pxyAxisMax-yesterdayClose>0){//最小值在昨日收盘价下面，最大值在昨日收盘价上面 508 var limit=Math.max(Math.abs(avg_pxyAxisMin-yesterdayClose),Math.abs(avg_pxyAxisMax-yesterdayClose)); 509 tickMin=yesterdayClose-limit; 510 tickMax=yesterdayClose+limit; 511 }else if(avg_pxyAxisMin>yesterdayClose&&avg_pxyAxisMax>yesterdayClose){//最小最大值均在昨日收盘价上面 512 tickMax=avg_pxyAxisMax; 513 tickMin=yesterdayClose-(tickMax-yesterdayClose); 514 515 }else if(avg_pxyAxisMin<yesterdayClose&&avg_pxyAxisMax<yesterdayClose){//最小最大值均在昨日收盘价下面 516 tickMin=avg_pxyAxisMin; 517 tickMax=yesterdayClose+(yesterdayClose-tickMin); 518 } 519 if(tickMax>2*yesterdayClose){//数据超过100%了 520 tickMax=2*yesterdayClose; 521 tickMin=0; 522 } 523 var interval=Number(tickMax-yesterdayClose)/10; 524 tickMax+=interval; 525 tickMin=yesterdayClose-(tickMax-yesterdayClose); 526 increment=(tickMax-yesterdayClose)/3; 527 tick=tickMin; 528 var i=0; 529 for (tick;i ++ <7 ; tick += increment) { 530 positions.push(Number(tick)); 531 } 532 533 return positions; 534 }, 535 }, 536 { 537 opposite: true,//是否把它显示到另一边（右边） 538 showFirstLabel: true, 539 showLastLabel:true, 540 labels: { 541 overflow: 'justify', 542 style: { //字体样式 543 font: 'normal 5px Verdana, sans-serif' 544 }, 545 align: 'right', 546 x: 25, 547 y:5, 548 formatter:function(){//最新价 px_last/preclose昨收盘-1 549 return (100*(this.value/yesterdayClose-1)).toFixed(2)+"%"; 550 } 551 }, 552 title: { 553 text: '' 554 }, 555 lineWidth: 1, 556 top:'0%', 557 height: '65%', 558 gridLineWidth: 1, 559 tickPositioner:function(){ 560 return positions; 561 } 562 }, 563 { 564 opposite: false,//是否把它显示到另一边（右边） 565 labels: { 566 overflow: 'justify', 567 style: { //字体样式 568 font: 'normal 5px Verdana, sans-serif' 569 }, 570 align: 'right', 571 x: -3, 572 y:5, 573 formatter:function(){ 574 if(this.value>1000000000){ 575 return Number((this.value/1000000000).toFixed(2))+"G"; 576 }else if(this.value>1000000){ 577 return Number((this.value/1000000).toFixed(2))+"M"; 578 }else if(this.value>1000){ 579 return Number((this.value/1000).toFixed(2))+"K"; 580 }else{ 581 return Number(this.value.toFixed(2)); 582 } 583 } 584 }, 585 title: { 586 text: '' 587 }, 588 top: '70%', 589 height: '30%', 590 width:'100%', 591 offset: 0, 592 lineWidth: 1, 593 showFirstLabel: true, 594 showLastLabel:true, 595 tickPositioner:function(){ 596 var positions = [], 597 tickMax=volume_yAxisMax, 598 tickMin=volume_yAxisMin, 599 tick = 0, 600 increment = 0; 601 var limit=tickMax/2; 602 tickMax+=limit; 603 increment=tickMax/2; 604 tick=0; 605 for (tick; tick <= tickMax; tick += increment) { 606 positions.push(Number(tick.toFixed(2))); 607 if(increment==0){ 608 break; 609 } 610 } 611 return positions; 612 }, 613 }], 614 series : [{ 615 name : 'AAPL Stock Price', 616 data : ohlc, 617 type : 'areaspline', 618 tooltip : { 619 valueDecimals : 2 620 }, 621 fillColor : { 622 linearGradient : { 623 x1: 0, 624 y1: 0, 625 x2: 0, 626 y2: 1 627 }, 628 stops : [ 629 [0, Highcharts.getOptions().colors[0]], 630 [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 631 ] 632 }, 633 yAxis:0, 634 }, 635 { 636 name : 'AAPL Stock Price', 637 data : ohlc, 638 type : 'scatter', 639 cursor:'pointer', 640 onSeries : 'candlestick', 641 color:'transparent', 642 tooltip : { 643 valueDecimals : 2 644 }, 645 style:{ 646 fontSize: '0px', 647 fontWeight: '0', 648 textAlign: 'center' 649 }, 650 zIndex:-1000, 651 yAxis:1, 652 }, 653 { 654 type: 'column', 655 name: '成交量', 656 data: volume, 657 dataGrouping: { 658 enabled: false, 659 forced: true 660 }, 661 yAxis:2, 662 zIndex:-1000 663 }] 664 }); 665 } 666 /** 667 * 错误处理 668 */ 669 function failCallback(){ 670 var last_dataTime=new Date(); 671 var $reporting = $("#report"); 672 $reporting.html(""); 673 // Create the chart 674 var am_startTime=new Date(last_dataTime); 675 am_startTime.setHours(9, 30, 0, 0); 676 var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes())); 677 678 var am_midTime=new Date(last_dataTime); 679 am_midTime.setHours(10, 30, 0, 0); 680 var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes())); 681 682 //股票交易早上最后的时间 683 var am_lastTime=new Date(last_dataTime); 684 am_lastTime.setHours(11, 30, 0, 0); 685 var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes())); 686 //股票交易下午最后的时间 687 var pm_startTime=new Date(last_dataTime); 688 pm_startTime.setHours(13, 1, 0, 0); 689 var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes())); 690 691 var pm_midTime=new Date(last_dataTime); 692 pm_midTime.setHours(14, 0, 0, 0); 693 var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes())); 694 695 696 var pm_lastTime=new Date(last_dataTime); 697 pm_lastTime.setHours(15, 0, 0, 0); 698 var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes())); 699 var data=[]; 700 data.push({x:am_startTimeUTC,y:1}); 701 data.push({x:am_midTimeUTC,y:2}); 702 data.push({x:am_lastTimeUTC,y:3}); 703 data.push({x:pm_midTimeUTC,y:4}); 704 data.push({x:pm_lastTimeUTC,y:5}); 705 //常量本地化 706 Highcharts.setOptions({ 707 global : { 708 useUTC : true 709 } 710 }); 711 $(DIVID).highcharts('StockChart', { 712 chart:{ 713 renderTo : "line_map", 714 margin: [25, 25,25, 25], 715 plotBorderColor: '#3C94C4', 716 plotBorderWidth: 0.3, 717 // zoomType:false, 718 }, 719 tooltip:{ 720 enabled:false 721 }, 722 rangeSelector:{ 723 enabled: false, 724 }, 725 /*导出配置*/ 726 exporting: { 727 enabled: false, 728 }, 729 /*创建者信息*/ 730 credits: { 731 enabled: false, 732 }, 733 /*下部时间拖拉选择*/ 734 navigator: { 735 enabled: false, 736 /*关闭时间选择*/ 737 baseseries: 10 738 }, 739 /*底部滚动条*/ 740 scrollbar: { 741 enabled: false 742 }, 743 plotOptions:{ 744 //去掉分时线上的hover事件 745 series: { 746 states: { 747 hover: { 748 enabled: false 749 } 750 }, 751 line: { 752 marker: { 753 enabled: false 754 } 755 }, 756 }, 757 }, 758 xAxis:{ 759 showFirstLabel: true, 760 showLastLabel:true, 761 tickInterval: 1, 762 labels: { 763 style: { //字体样式 764 font: 'normal 5px Verdana, sans-serif' 765 }, 766 formatter:function(){ 767 var labels=['9:30','10:30','11:30/13:00','14:00','15:00'] 768 return labels[this.value]; 769 }, 770 }, 771 categories:['9:30','10:30','11:30/13:00','14:00','15:00'], 772 gridLineWidth: 1, 773 }, 774 yAxis: [{ 775 showFirstLabel: true, 776 showLastLabel:true, 777 opposite: false,//是否把它显示到另一边（右边） 778 labels: { 779 align: 'right', 780 x: -3, 781 y:5 782 }, 783 title: { 784 text: '' 785 }, 786 height: '50%', 787 lineWidth: 1, 788 gridLineWidth: 1, 789 }, 790 { 791 showFirstLabel: true, 792 showLastLabel:true, 793 opposite: false,//是否把它显示到另一边（右边） 794 labels: { 795 align: 'right', 796 x: -3, 797 y:5 798 }, 799 title: { 800 text: '' 801 }, 802 top: '60%', 803 height: '40%', 804 offset: 0, 805 lineWidth: 1, 806 gridLindeWidth:1, 807 }], 808 series : [{ 809 name : 'AAPL Stock Price', 810 data :[10,20,30,40,50],// [["9:30",200],["10:30",205]["11:30/13:00",210],["14:00",215],["15:00",220]], 811 type:'column', 812 color:'transparent', 813 fillColor : { 814 linearGradient : { 815 x1: 0, 816 y1: 0, 817 x2: 0, 818 y2: 1 819 }, 820 stops : [ 821 [0, Highcharts.getOptions().colors[0]], 822 [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 823 ] 824 }, 825 dataGrouping: { 826 enabled: false, 827 forced: true 828 }, 829 yAxis:0, 830 }, 831 { 832 type: 'column', 833 name: '成交量', 834 fillColor : { 835 linearGradient : { 836 x1: 0, 837 y1: 0, 838 x2: 0, 839 y2: 1 840 }, 841 stops : [ 842 [0, Highcharts.getOptions().colors[0]], 843 [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 844 ] 845 }, 846 data : [10,20,30,40,50],//[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], 847 //[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]], 848 color:'transparent', 849 yAxis: 1, 850 dataGrouping: { 851 enabled: false, 852 forced: true 853 }, 854 yAxis:1, 855 }] 856 }); 857 } 858 /** 859 * 获取日期对象，如果isUTC为true获取 日期的UTC对象，false则获取普通日期对象 860 * @param date 861 * @param isUTC 862 * @returns 863 */ 864 function getDateUTCOrNot(date,isUTC){ 865 if(! (date instanceof String)) 866 { 867 date+=""; 868 } 869 var dArr = new Array(); 870 for(var hh=0;hh<5;hh++){ 871 var numb ; 872 if(hh==0){ 873 numb = Number(date.slice(0,4)); 874 } 875 else { 876 numb= Number(date.slice((hh-1)*2+4,hh*2+4)); 877 }; 878 dArr.push(numb); 879 } 880 if(isUTC==false){ 881 return new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]); 882 } 883 var dateUTC = Number(Date.UTC(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]));//得出的UTC时间 884 return dateUTC; 885 } 886 887 //数据补全 888 function appendTimeMessage(ohlc,volume,data){ 889 var date=data[data.length-1][0]+""; 890 var last_dataTime=getDateUTCOrNot(date,false); 891 892 //股票交易早上最后的时间 893 var am_lastTime=new Date(last_dataTime); 894 am_lastTime.setHours(11, 30, 0, 0); 895 //股票交易下午最后的时间 896 var pm_startTime=new Date(last_dataTime); 897 pm_startTime.setHours(13, 1, 0, 0); 898 var pm_lastTime=new Date(last_dataTime); 899 pm_lastTime.setHours(15, 0, 0, 0); 900 //把时间日期格式转化成utc格式 901 function convertDateToUTC(date){ 902 return Number(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes())); 903 } 904 //如果获取的时间11：:30之前的计算 905 if(last_dataTime<am_lastTime){ 906 var i=last_dataTime; 907 i.setMinutes((i.getMinutes()+1)); 908 for(;i<=am_lastTime;i.setMinutes((i.getMinutes()+1))) 909 { 910 ohlc.push({x:convertDateToUTC(i)}); 911 volume.push({x:convertDateToUTC(i)}); 912 } 913 i=pm_startTime; 914 for(;i<=pm_lastTime;i.setMinutes((i.getMinutes()+1))) 915 { 916 ohlc.push({x:convertDateToUTC(i)}); 917 volume.push({x:convertDateToUTC(i)}); 918 } 919 }else if(last_dataTime<pm_lastTime){ //获取的时间下午13:00之后的计算 920 var i; 921 if(Number(last_dataTime)==Number(am_lastTime)){ 922 i=pm_startTime; 923 }else{ 924 i=last_dataTime; 925 } 926 i.setMinutes((i.getMinutes()+1)); 927 for(;i<=pm_lastTime;i.setMinutes((i.getMinutes()+1))) 928 { 929 ohlc.push({x:convertDateToUTC(i)}); 930 volume.push({x:convertDateToUTC(i)}); 931 } 932 } 933 }
