股票k线

与上一篇文章相比k线图主要的难点

1.tooltip的定制化显示：

当手指触摸手机屏幕上下拖动可能会手指的事件陷入图表无法进行上下拖动

tooltip:{followMouseMove}

followMouseMove为true的话手指左右移动框中数据会发生改变但是无法上下移动，false的话图表框可以上下移动但数据无法改变。

所以需要定制化tooltip,当手指上下移动的时候事件不会被捕获，左右移动的时候tooltip中的数据可以跟随变化。

 1 var tooltipChart = {//   
 2         chartVar: null,//highcharts() 对象传入  在load时传入
 3         SVGElements: {},
 4         tooltipWidth:null,
 5         buildTooltip: function(text, coord,isLeft) {
 6             // we've to check if exists and remove it
 7             try {
 8                 this.SVGElements.destroy();
 9             } catch(e) {
10                 // nothing
11             }
12             try {
13                 // first of all we've to build a group to put the elements
14                 this.SVGElements = this.chartVar.renderer.g().attr({'zIndex': 11}).add();
15                 //将tooltip放在左边  coord[0] 左坐标位置正确的，coord[1]传入的是图表高度
16                 // build tooltip text
17                 var textContainer = this.chartVar.renderer.text(text, coord[0],coord[1])
18                     .attr({
19                         'zIndex': 10
20                     })
21                     .add(this.SVGElements);
22                 // get text 'box'
23                 var box = textContainer.getBBox();
24                 tooltipChart.tooltipWidth=box.width;
25                 // build  tooltip square according to the text location, then place the container behind the text
26                 this.chartVar.renderer.rect(box.x , box.y, box.width , box.height , 1)
27                     .attr({
28                         'stroke-width': 1,            // border width
29                         'stroke': '#a8a8a8',        // border color
30                         'zIndex': 9,
31                         'fill': 'white',            // background color
32                         'fill-opacity': 0.85,        // background opacity
33                         'isShadow': false
34                     })
35                     .add(this.SVGElements);
36             } catch(e) {
37                 return false;
38             }
39         }
40     }

View Code

2.蜡烛的形状以及源码改写

 1  //修改colum条的颜色（重写了源码方法）
 2      var originalDrawPoints = Highcharts.seriesTypes.column.prototype.drawPoints;
 3         Highcharts.seriesTypes.column.prototype.drawPoints = function () {
 4             var merge  = Highcharts.merge,
 5                 series = this,
 6                 chart  = this.chart,
 7                 points = series.points,
 8                 i      = points.length;
 9             var seriesPointAttr ;
10             while (i--) {
11                 var candlePoint = chart.series[0].points[i];
12                 if(candlePoint.open != undefined && candlePoint.close !=  undefined){  //如果是K线图 改变矩形条颜色，否则不变
13                     var color = (candlePoint.open < candlePoint.close) ? '#DD2200' : '#33AA11';
14                     seriesPointAttr = merge(series.pointAttr);
15                     seriesPointAttr[''].fill = color;
16                     seriesPointAttr.hover.fill = Highcharts.Color(color).brighten(0.3).get();
17                     seriesPointAttr.select.fill = color;
18                 }else{
19                      seriesPointAttr = merge(series.pointAttr);
20                 }
21                 points[i].pointAttr = seriesPointAttr;
22             }
23             originalDrawPoints.call(this);
24         };

View Code

3.MA5、 MA10、MA30的显示

可以借助addPlotBand在x轴上label中写入数据

代码：

以下html来触发样式点击

 1     <ul class="clearfix">
 2                 <li class="hover">
 3                     <a href="javascript:void(0);" onclick="clickTrend(this)">分时</a>
 4                 </li>
 5                 <li>
 6                     <a href="javascript:void(0);" onclick="clickDayKLine(this)">日K</a>
 7                 </li>
 8                 <li>
 9                     <a href="javascript:void(0);" onclick="clickWeekKLine(this)">周K</a>
10                 </li>
11                 <li>
12                     <a href="javascript:void(0);" onclick="clickMonthKLine(this)">月K</a>
13                 </li>
14             </ul>

View Code

引入jquery.js highstock.js

html

1 <div id="report" class="klineMap-report"></div>
2 <div class="kline_map" id="line_map" style="height: 200px; 100%" >

kline_chart.js

  1 //open.hundsun.com:8081/quote/v1/kline?get_type=range&prod_code=600570.SS&candle_period=6&fields=open_px,high_px,low_px,close_px,business_amount&data_count=5
  2 var KLINE_URL=js_lib.getkLineUrl();
  3 var DIVID="#line_map";
  4 //接收个股代码
  5 var STOCK_CODE = js_lib.getQueryStringByName("stock_code");
  6 var STOCKCODE="600570.SS";
  7 if(STOCK_CODE==""){
  8     STOCK_CODE="600570.SS";
  9 }
 10 //日K
 11 function clickDayKLine(obj){
 12     var kline_params = "get_type=range&prod_code="+STOCK_CODE+"&candle_period=6&fields=open_px,high_px,low_px,close_px,business_amount";
 13     js_lib.ajax(KLINE_URL, clickKLine_Show, 'get',kline_params,failCallback);
 14 
 15     $(obj).parent().parent().children().each(function(){
 16         $(this).removeClass("hover");
 17     });
 18     $(obj).parent().addClass("hover");
 19 }
 20 
 21 //周K
 22 function clickWeekKLine(obj){
 23     var kline_params = "get_type=range&prod_code="+STOCK_CODE+"&candle_period=7&fields=open_px,high_px,low_px,close_px,business_amount";
 24     js_lib.ajax(KLINE_URL, clickKLine_Show, 'get',kline_params,failCallback);
 25     $(obj).parent().parent().children().each(function(){
 26         $(this).removeClass("hover");
 27     });
 28     $(obj).parent().addClass("hover");
 29 }
 30 //月k
 31 function clickMonthKLine(obj){
 32     var kline_params = "get_type=range&prod_code="+STOCK_CODE+"&candle_period=8&fields=open_px,high_px,low_px,close_px,business_amount";
 33     js_lib.ajax(KLINE_URL, clickKLine_Show, 'get',kline_params,failCallback);
 34     $(obj).parent().parent().children().each(function(){
 35         $(this).removeClass("hover");
 36     });
 37     $(obj).parent().addClass("hover");
 38     
 39 }
 40 //年K
 41 function clickYearKLine(obj){
 42     var kline_params = "get_type=range&prod_code="+STOCK_CODE+"&candle_period=9&fields=open_px,high_px,low_px,close_px,business_amount&data_count=5";
 43     js_lib.ajax(KLINE_URL, clickKLine_Show, 'get',kline_params,failCallback);
 44     $(obj).parent().parent().children().each(function(){
 45         $(this).removeClass("hover");
 46     });
 47     $(obj).parent().addClass("hover");
 48 }
 49 
 50 function clickKLine_Show(val){
 51     var jsonText = JSON.parse(val);    
 52     if(typeof(jsonText.error_info)!='undefined'){
 53         failCallback();
 54         return ;
 55     }
 56     data=jsonText.data.candle;
 57     data=data[STOCK_CODE];
 58     createKlineChart(DIVID,data);
 59 }
 60 //定制化  tooltip
 61 var tooltipChart = {//   
 62         chartVar: null,//highcharts() 对象传入  在load时传入
 63         SVGElements: {},
 64         tooltipWidth:null,
 65         buildTooltip: function(text, coord,isLeft) {
 66             // we've to check if exists and remove it
 67             try {
 68                 this.SVGElements.destroy();
 69             } catch(e) {
 70                 // nothing
 71             }
 72             try {
 73                 // first of all we've to build a group to put the elements
 74                 this.SVGElements = this.chartVar.renderer.g().attr({'zIndex': 11}).add();
 75                 //将tooltip放在左边  coord[0] 左坐标位置正确的，coord[1]传入的是图表高度
 76                 // build tooltip text
 77                 var textContainer = this.chartVar.renderer.text(text, coord[0],coord[1])
 78                     .attr({
 79                         'zIndex': 10
 80                     })
 81                     .add(this.SVGElements);
 82                 // get text 'box'
 83                 var box = textContainer.getBBox();
 84                 tooltipChart.tooltipWidth=box.width;
 85                 // build  tooltip square according to the text location, then place the container behind the text
 86                 this.chartVar.renderer.rect(box.x , box.y, box.width , box.height , 1)
 87                     .attr({
 88                         'stroke-width': 1,            // border width
 89                         'stroke': '#a8a8a8',        // border color
 90                         'zIndex': 9,
 91                         'fill': 'white',            // background color
 92                         'fill-opacity': 0.85,        // background opacity
 93                         'isShadow': false
 94                     })
 95                     .add(this.SVGElements);
 96             } catch(e) {
 97                 return false;
 98             }
 99         }
100     }
101 //放数据个数控制
102 var count=0;
103 //highstock K线图
104 var createKlineChart = function (divID,data,crrentData){
105     var $reporting = $("#report");
106     $reporting.html("");
107     var firstTouch = true;
108     //开盘价^最高价^最低价^收盘价^成交量^成交额^涨跌幅^换手率^五日均线^十日均线^30日均线^昨日收盘价 
109     var  open,high,low,close,y,zde,zdf,MA5=0,MA10=0,MA30=0,zs=0;
110     //定义数组
111     var ohlcArray = [],volumeArray = [],MA5Array = [],MA10Array=[],MA30Array=[];    
112     //容错处理
113     if(data==undefined&&data==null&&data.length==0){
114         failCallback();
115         return;
116     }
117      //修改colum条的颜色（重写了源码方法）
118      var originalDrawPoints = Highcharts.seriesTypes.column.prototype.drawPoints;
119         Highcharts.seriesTypes.column.prototype.drawPoints = function () {
120             var merge  = Highcharts.merge,
121                 series = this,
122                 chart  = this.chart,
123                 points = series.points,
124                 i      = points.length;
125             var seriesPointAttr ;
126             while (i--) {
127                 var candlePoint = chart.series[0].points[i];
128                 if(candlePoint.open != undefined && candlePoint.close !=  undefined){  //如果是K线图 改变矩形条颜色，否则不变
129                     var color = (candlePoint.open < candlePoint.close) ? '#DD2200' : '#33AA11';
130                     seriesPointAttr = merge(series.pointAttr);
131                     seriesPointAttr[''].fill = color;
132                     seriesPointAttr.hover.fill = Highcharts.Color(color).brighten(0.3).get();
133                     seriesPointAttr.select.fill = color;
134                 }else{
135                      seriesPointAttr = merge(series.pointAttr);
136                 }
137                 points[i].pointAttr = seriesPointAttr;
138             }
139             originalDrawPoints.call(this);
140         };
141     //常量本地化
142     Highcharts.setOptions({
143         global : {
144             useUTC : true
145         },
146     lang: {
147         rangeSelectorFrom:"日期:",
148         rangeSelectorTo:"至",
149         rangeSelectorZoom:"间隔",
150         loading:'加载中...',
151         shortMonths:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
152         weekdays:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
153     }});
154     //格式化数据，准备绘图 ,把当前最新K线数据加载进来,count至多50个数据
155     count = data.length<50?data.length:50;
156     //限制数据输入个数
157     var i;
158     for (i = data.length-count; i <data.length; i++) {
159         //日期的原始格式 20141205,转换成highstock的日期格式
160         var dateUTC =  getDateUTC(data[i][0]);//得出的UTC时间
161         ohlcArray.push([
162             parseInt(dateUTC), // the date
163             parseFloat(data[i][1]), // open
164             parseFloat(data[i][2]), // high
165             parseFloat(data[i][3]), // low
166             parseFloat(data[i][4]) // close
167         ]);
168         if(i>=4){
169             var ma5=0.00;
170             for( var j=0;j<5;j++){
171                 ma5+=parseFloat(data[i-j][4]);
172             }
173             MA5Array.push([
174                  parseInt(dateUTC), // the date
175                  parseFloat(ma5/5)
176              ]);
177         }
178         if(i>=9){
179             var ma10=0.00;
180             for( var j=0;j<10;j++){
181                 ma10+=parseFloat(data[i-j][4]);
182             }
183             MA10Array.push([
184                 parseInt(dateUTC),
185                 parseFloat(ma10/10),
186              ]);
187         }
188         if(i>=29){
189             var ma30=0.00;
190             for( var j=0;j<30;j++){
191                 ma30+=parseFloat(data[i-j][4]);
192             }
193             MA30Array.push([
194                          parseInt(dateUTC),
195                         parseFloat(ma30/30)
196                 ]);
197         }        
198       volumeArray.push([
199             parseInt(dateUTC), // the date
200             parseInt(data[i][5]) // 成交量
201         ]);
202         
203     }
204     var swipeX=false,//左右移动标志
205     swipeY=false;//上下移动标志
206     //触屏触摸
207     createKlineChart.kline_touchstart=function(event){
208         var touch = event.touches[0];
209         startX=touch.pageX;
210         startY=touch.pageY;
211         swipeX=swipeY=false;
212         document.getElementById("line_map").addEventListener("touchmove", createKlineChart.kline_touchmove);
213     }
214     //触屏手指移动
215     createKlineChart.kline_touchmove=function(event){
216         var touch = event.touches[0];
217         var currenX=touch.pageX;
218         var currentY=touch.pageY;
219         var chart = $(DIVID).highcharts();
220 
221         if(true==swipeX){//先左右就一直左右  上下也不影响
222             swipeY=false;
223         }
224         else if(true==swipeY){//向上下移动的标志
225             swipeX=false;
226         }else{
227             if(Math.abs(currentY-startY)>Math.abs(currenX-startX)){//判断上下移动
228                 swipeY=true;
229             }
230             else{
231                 swipeX=true;
232                 }
233         }
234         if(true==swipeY){//上下移动  x  先重画线 然后删除事件
235             document.getElementById("line_map").removeEventListener("touchmove", createKlineChart.kline_touchmove,false);
236         }else if(true==swipeX){ 
237             event.preventDefault();
238         }
239         //不管 上下 还是 左右 都需要先画标示线
240         //画图区左边距离
241         var left=chart.yAxis[0].left+(chart.yAxis[0].axisLine.strokeWidth==undefined?0:chart.yAxis[0].axisLine.strokeWidth);
242         var y ;
243         var x = touch.pageX-left-10;
244         //x点 =x/chart宽度 * 总体点的个数
245         x=(x/chart.plotWidth)*ohlcArray.length;
246         var i=0;
247         i=Number(Math.ceil(x));
248         if(i>=ohlcArray.length||i<0){
249             return;}
250         //计算图表x轴
251         x=ohlcArray[i][0];//utc格式时间数据
252         y=ohlcArray[i][3];
253         chart = $(DIVID).highcharts();           // Highcharts构造函数
254         chart.xAxis[0].removePlotBand("plotBand-x");
255         chart.xAxis[0].addPlotBand({
256             borderColor:'#BEBEBE',
257             borderWidth:0.1,
258             color: '#BEBEBE',
259             from: x-0.0001,//,Date.UTC(2015, 3, 27,10,50),
260             to:  x+0.0001,//Date.UTC(2015, 3, 27,10,51),
261             label: {
262                 useHTML:true,
263                 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('%Y-%m-%d ', x)+'</span>',
264                 textAlign: 'bottom',
265                 x:-30,
266                 y:5
267             },
268          id:'plotBand-x',
269          zIndex:1001
270          });
271         chart.yAxis[0].removePlotBand("plotBand-y0");
272         chart.yAxis[0].addPlotBand({
273              borderColor:'#BEBEBE',
274              borderWidth:0.1,
275              color: '#BEBEBE',
276                 from: y-0.0001,//,Date.UTC(2015, 3, 27,10,50),
277                 to:   y+0.0001,//Date.UTC(2015, 3, 27,10,51),
278                 label: {
279                     useHTML:true,
280                     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.toFixed(2)+'</span>',
281                     verticalAlign:'left',
282                     textAlign: 'left',
283                     x:-25,
284                     y:-2
285                 },
286                 id:'plotBand-y0',
287                 zIndex:1001
288          });
289          var open=0,high=0,low=0,close=0,MA5=0,MA10=0,MA30=0;
290          if(ohlcArray.length>0){
291              open=Number(ohlcArray[i][1].toFixed(2));
292              high=Number(ohlcArray[i][2].toFixed(2));
293              low=Number(ohlcArray[i][3].toFixed(2));
294              close=Number(ohlcArray[i][4].toFixed(2));
295              if(i>=4){
296                  MA5=Number(MA5Array[i-4][1].toFixed(2));
297              }
298              if(i>=9){
299              MA10=Number(MA10Array[i-9][1].toFixed(2));
300              }
301              if(i>=29){
302                  MA30=Number(MA30Array[i-29][1].toFixed(2));
303              }
304          }
305          $reporting.html(
306                   '<div class="detail">'+
307                   '<ul>'+
308                   '<li class="value-4">'+
309                         ' <span>开:</span>'+ open.toFixed(2)
310                   +'</li>'
311                   +'<li>'        
312                         +' <span>高:</span>'+ high.toFixed(2)
313                   +'</li>'
314                   +'<li>'
315                         +' <span>低:</span>'+ low.toFixed(2)
316                   +'</li>'
317                   +'<li>'
318                         +'<span>收:</span>'+close.toFixed(2)
319                   +'</li>'
320                   +'</ul>'
321                         +'</div>'
322                         );
323               chart.xAxis[0].removePlotBand("plotBand-whole-x");
324              chart.xAxis[0].addPlotBand({
325                 borderColor:'transparent',
326                 borderWidth:1,
327                 color: 'transparent',
328                 from: ohlcArray[0][0]-0.00001,//,Date.UTC(2015, 3, 27,10,50),
329                 to:  ohlcArray[0][0]+0.000001,//Date.UTC(2015, 3, 27,10,51),
330                 label: {
331                     useHTML:true,
332                     text:'<p>'
333                       + '    <b style="color:#1aadce;padding-left:25px">MA5</b> '+ MA5
334                       +'  <b style="color: #8bbc21;padding-left:25px">MA10 </b> '+ MA10
335                       +'  <b style="color:#910000;padding-left:25px">MA30</b> '+ MA30
336                      +'</p>' ,
337                     textAlign: 'top',
338                     y:20,
339                     x:-25
340                 },
341                 id:'plotBand-whole-x',
342                 zIndex:1001
343              });
344                         
345             //左右移动,显示tooltip关联tooltipChart对象
346             var coord=null ;
347             //手指在图表中间的右侧
348             if(i>ohlcArray.length/2){
349                 coord = [left,chart.yAxis[0].top+30];
350             }else{
351                 coord=[chart.chartWidth-left-tooltipChart.tooltipWidth,chart.yAxis[0].top+30];
352             }
353             var text = getTooltipHTML(ohlcArray,volumeArray,i);
354             tooltipChart.buildTooltip(text, coord);
355         }
356         document.getElementById("line_map").removeEventListener("touchstart",createTrendChart.trend_touchstart,false);
357         document.getElementById("line_map").addEventListener("touchstart",createKlineChart.kline_touchstart);
358         document.getElementById("line_map").removeEventListener("touchmove",createTrendChart.trend_touchmove,false);
359         //开始绘图
360         $(DIVID).highcharts('StockChart',  {
361             chart:{
362                 renderTo : DIVID,
363                 //关闭平移
364                 panning:false,
365                 zoomType: 'none',
366                 pinchType:'none',
367             //修改左右位置  
368                 margin: [10, 25,25, 25],
369                 spacing: [0,0,0,0],
370                 plotBorderColor: '#3C94C4',
371                 plotBorderWidth: 0,
372                 zoomType:false,
373                 events:{
374                         load:function(){
375                             x=ohlcArray[ohlcArray.length-1][0];
376                             y=ohlcArray[ohlcArray.length-1][3];
377                             var chart = $(DIVID).highcharts();           // Highcharts构造函数
378                              //时间线
379                              chart.xAxis[0].removePlotBand("plotBand-x");
380                              chart.xAxis[0].addPlotBand({
381                                 borderColor:'#BEBEBE',
382                                 borderWidth:0.1,
383                                 color: '#BEBEBE',
384                                 from: x-0.0001,//,Date.UTC(2015, 3, 27,10,50),
385                                 to:  x+0.0001,//Date.UTC(2015, 3, 27,10,51),
386                                 label: {
387                                     useHTML:true,
388                                     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('%Y-%m-%d ', x)+'</span>',
389                                     textAlign: 'bottom',
390                                     y:5,
391                                     x:-30
392                                 },
393                              id:'plotBand-x',
394                              zIndex:1001
395                              });
396                              chart.yAxis[0].removePlotBand("plotBand-y0");
397                              chart.yAxis[0].addPlotBand({
398                                  borderColor:'#BEBEBE',
399                                  borderWidth:0.1,
400                                  color: '#BEBEBE',
401                                     from: y-0.0001,//,Date.UTC(2015, 3, 27,10,50),
402                                     to:   y+0.0001,//Date.UTC(2015, 3, 27,10,51),
403                                     label: {
404                                         useHTML:true,
405                                         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.toFixed(2)+'</span>',
406                                         verticalAlign:'left',
407                                         textAlign: 'left',
408                                         x:-25,
409                                         y:-2
410                                     },
411                                     id:'plotBand-y0',
412                                     zIndex:1001
413                              });
414                              var open=0,high=0,low=0,close=0,MA5=0,MA10=0,MA30=0;
415                              if(ohlcArray.length>0){
416                                  open=Number(ohlcArray[ohlcArray.length-1][1].toFixed(2));
417                                  high=Number(ohlcArray[ohlcArray.length-1][2].toFixed(2));
418                                  low=Number(ohlcArray[ohlcArray.length-1][3].toFixed(2));
419                                  close=Number(ohlcArray[ohlcArray.length-1][4].toFixed(2));
420                                  if(ohlcArray.length>=5-1){
421                                      MA5=Number(MA5Array[MA5Array.length-1][1].toFixed(2));
422                                  }
423                                  if(ohlcArray.length>=10-1){
424                                  MA10=Number(MA10Array[MA10Array.length-1][1].toFixed(2));
425                                  }
426                                  if(ohlcArray.length>=30-1){
427                                      MA30=Number(MA30Array[MA30Array.length-1][1].toFixed(2));
428                                  }
429                              }
430                               $reporting.html(
431                                       '<div class="detail">'+
432                                       '<ul>'+
433                                       '<li class="value-4">'+
434                                             ' <span>开:</span>'+ open.toFixed(2)
435                                       +'</li>'
436                                       +'<li>'        
437                                             +' <span>高:</span>'+ high.toFixed(2)
438                                       +'</li>'
439                                       +'<li>'
440                                             +' <span>低:</span>'+ low.toFixed(2)
441                                       +'</li>'
442                                       +'<li>'
443                                             +'<span>收:</span>'+close.toFixed(2)
444                                       +'</li>'
445                                       +'</ul>'
446                                             +'</div>'
447                                             );
448                               chart.xAxis[0].removePlotBand("plotBand-whole-x");
449                                  chart.xAxis[0].addPlotBand({
450                                     borderColor:'transparent',
451                                     borderWidth:1,
452                                     color: 'transparent',
453                                     from: ohlcArray[0][0]-0.000001,//,Date.UTC(2015, 3, 27,10,50),
454                                     to:  ohlcArray[0][0]+0.000001,//Date.UTC(2015, 3, 27,10,51),
455                                     label: {
456                                         useHTML:true,
457                                         text:'<p>'
458                                           + '    <b style="color:#1aadce;padding-left:25px">MA5</b> '+ MA5
459                                           +'  <b style="color: #8bbc21;padding-left:25px">MA10 </b> '+ MA10
460                                           +'  <b style="color:#910000;padding-left:25px">MA30</b> '+ MA30
461                                          +'</p>' ,
462                                         textAlign: 'top',
463                                         y:20,
464                                         x:-25
465                                     },
466                                     id:'plotBand-whole-x',
467                                     zIndex:1001
468                                  });
469                         //显示tooltip
470                            var chart = $(DIVID).highcharts(); 
471                            var left=chart.yAxis[0].left+(chart.yAxis[0].axisLine.strokeWidth==undefined?0:chart.yAxis[0].axisLine.strokeWidth);
472     
473                            //关联tooltipChart对象
474                            tooltipChart.chartVar=chart;
475                            var coord = [left,chart.yAxis[0].top+30];
476                            var text = getTooltipHTML(ohlcArray,volumeArray,ohlcArray.length-1);
477                            $textDiv=$(text);
478                            tooltipChart.buildTooltip(text, coord);
479                         }
480                 }
481                 
482             },
483 
484             loading: {
485                 labelStyle: {
486                     position: 'relative',
487                     top: '10em',
488                     zindex:1000
489                 }
490             },
491              credits:{
492                     enabled:false
493                 },
494             rangeSelector: {
495                 enabled:false
496             },
497             plotOptions: {
498                 //修改蜡烛颜色
499                 candlestick: {
500                     color: '#33AA11',
501                     upColor: '#DD2200',
502                     lineColor: '#33AA11',                
503                     upLineColor: '#DD2200', 
504                     maker:{
505                         enabled:false,
506                         states:{
507                             hover:{
508                                 enabled:false,
509                             }
510                         }
511                     },
512                     // cursor: 'pointer',
513                         dataLabels: {
514                             enabled: false,
515                             
516                            // y:-100
517                         }
518                 },
519                 //去掉曲线和蜡烛上的hover事件
520                 series: {
521                     states: {
522                         hover: {
523                             enabled: false
524                         }
525                     },
526                 line: {
527                     marker: {
528                         enabled: false
529                     }
530                  },
531                 },
532                 column:{
533                     //启用动画
534                     animation:true,
535                     states: {
536                         hover: {
537                             enabled: false
538                         }
539                     },
540                 },
541                 spline:{
542                     allowPointSelect:false,
543                     states: {
544                         hover: {
545                             enabled: false
546                         }
547                     },
548                 },
549                 
550             },
551             //格式化悬浮框
552             tooltip: {
553                 enabled:false,
554                 crosshairs:false,
555             },
556             title: {
557                 enabled:false
558             },
559             exporting: { 
560                 enabled: false  //设置导出按钮不可用 
561             }, 
562             scrollbar: {
563                 enabled:false
564             },
565              navigator: {
566                 enabled:false,
567              },
568             xAxis:{
569                 showFirstLabel: true,
570                 showLastLabel:true,
571                 labels: {  
572                     overflow: 'justify',
573                     style: {         //字体样式
574                         font: 'normal 4px Verdana, sans-serif'
575                     },
576                     formatter: function() {  
577                         var vDate=new Date(this.value);  
578                         return vDate.getFullYear()+"/"+(vDate.getMonth()+1)+"/"+vDate.getDate();  
579                     },  
580                     align: 'center'  
581                 } ,
582     
583                 gridLineWidth: 1,
584                 // X轴的步进值，决定隔多少个显示一个  
585                 tickPositioner:function(){
586                     var positions = [],
587                     tick = Number((this.dataMin)),
588                     increment = Number(((this.dataMax - this.dataMin) / 4));
589                     for (tick; tick - increment <= this.dataMax; tick += increment) {
590                         positions.push(Number(tick.toFixed(2)));
591                         if(increment==0){
592                             break;
593                         }
594                  }
595                  return positions;
596                 },
597             },
598             yAxis: [{
599                 title: {    
600                     text: ''
601                 },
602                 labels: {
603                     overflow: 'justify',
604                     style: {         //字体样式
605                         font: 'normal 5px Verdana, sans-serif'
606                         },
607                     align: 'right',
608                     x:-2,
609                     y:5,
610                     formatter: function() {  
611                         return this.value.toFixed(2);
612                     },  
613                 },
614                 //tickInterval: 10, 
615                 showFirstLabel: true,
616                 showLastLabel:true,
617                 height: '60%',
618                 lineWidth:2,//Y轴边缘线条粗细
619                 opposite:false,
620                 tickPositioner:function(){
621                     var positions = [],
622                     tickMin=Number(this.dataMin),
623                     tickMax=Number(this.dataMax),
624                     tick ,
625                     increment = Number(((tickMax-tickMin) / 5).toFixed(2));
626                     tickMin=tickMin-increment;
627                     tickMax=tickMax+increment;
628                     increment= Number(((tickMax-tickMin) / 5).toFixed(2));
629                     tick=tickMin;
630                     if(tick<0){
631                         tick=0;
632                         tickMin=0;
633                         tickMax=tickMax+(-tick);
634                         increment=tickMax/5;
635                     }
636                     var j=0;
637                     for (tick;j++<=6 &&increment!=0; tick =Number(tick+ increment)) {
638                         positions.push(Number(tick.toFixed(2)));
639                 }
640                 return positions;
641                 },
642             },{
643                 title: {
644                    text:''
645                 },
646                 showFirstLabel: true,
647                 showLastLabel:true,
648                 labels: {
649                     style: {         //字体样式
650                         font: 'normal 5px Verdana, sans-serif'
651                         },
652                     align: 'right',
653                     x: -2,
654                     y:5,
655                     formatter:function(){
656                         if(this.value>1000000000){
657                             return Number((this.value/1000000000).toFixed(2))+"G";
658                         }else if(this.value>1000000){
659                             return Number((this.value/1000000).toFixed(2))+"M";
660                         }else if(this.value>1000){
661                             return Number((this.value/1000).toFixed(2))+"K";
662                         }else{
663                             return Number(this.value.toFixed(2));
664                         }
665                     }
666                 },
667                 top: '65%',
668                 height: '35%',
669                 offset:0,
670                 lineWidth: 2,
671                 opposite:false,
672                 tickPositioner:function(){
673                     var positions = [],
674                     tick = Number((this.dataMin)),
675                     increment = Number(((this.dataMax - this.dataMin) / 2));
676                     for (tick; tick - increment <= this.dataMax; tick += increment) {
677                         positions.push(Number(tick.toFixed(2)));
678                         if(0==increment){break;}
679                 }
680                 return positions;
681                 }
682             }],
683             series: [
684             {
685                 type: 'candlestick',
686                 id:"candlestick",
687                 name: STOCK_CODE,
688                 data: ohlcArray,
689                 tooltip : {
690                 valueDecimals : 2
691             },
692                 dataGrouping: {
693                     enabled: false,
694                     forced: true
695                 }
696             }
697             ,{
698                 type: 'column',//2
699                 name: '成交量',
700                 data: volumeArray,
701                 yAxis: 1,
702                 dataGrouping: {
703                     enabled: false,
704                     forced: true
705                 }
706             } ,{
707                 type: 'spline',
708                 name: 'MA5',
709                 color:'#1aadce',
710                 data: MA5Array,
711                 lineWidth:1,
712                 dataGrouping: {
713                     enabled: false,
714                     forced: true
715                 }
716             },{
717                 type: 'spline',
718                 name: 'MA10',
719                 data: MA10Array,
720                 color:'#8bbc21',
721                 threshold: null, 
722                 lineWidth:1,
723                 dataGrouping: {
724                     enabled: false,
725                     forced: true
726                 }
727             },{
728                 type: 'spline',
729                 name: 'MA30',
730                 data: MA30Array,
731                 color:'#910000',
732                 threshold: null, 
733                 lineWidth:1,
734                 dataGrouping: {
735                     enabled: false,
736                     forced: true
737                 }
738             }
739             ]
740         });
741     Highcharts.seriesTypes.column.prototype.drawPoints = originalDrawPoints ;
742 }
743 //ohlcArray和volumeArray中的第i个数据
744 function getTooltipHTML(ohlcArray,volumeArray,i){
745      //涨跌幅=（今收最新价-昨收）/昨收
746        var time=ohlcArray[i][0];
747        var zde=0,zdf=0,zs=0;
748        if(i!=0){
749         zde = parseFloat(ohlcArray[i][4]-ohlcArray[i-1][4]).toFixed(2);
750            zdf = parseFloat((zde/(ohlcArray[i][4])).toFixed(2));
751            zs=parseFloat(ohlcArray[i-1][4]);    //昨天收盘价
752        }
753       var open = ohlcArray[i][1].toFixed(2),
754       high = ohlcArray[i][2].toFixed(2),
755       low = ohlcArray[i][3].toFixed(2),
756       close = ohlcArray[i][4].toFixed(2),
757       y = volumeArray[i][1];    //成交量
758       var tip= '<div><span style="font-size:8px;">'+ Highcharts.dateFormat('%Y-%m-%d  %A', this.x) +'</span><br/>';
759       if(open>zs){
760           tip += '<span style="font-size:8px;">开盘：</span><span style="font-size:8px;color: #DD2200;align:right;">'+open+' </span><br/>';
761       }else{
762           tip += '<span style="font-size:8px;">开盘：</span><span style="font-size:8px;color: #33AA11;align:right;">'+open+' </span><br/>';
763       } 
764       if(high>zs){
765           tip += '<span style="font-size:8px;">最高：</span></span><span style="font-size:8px;color: #DD2200;align:right;">'+high+' </span><br/>';
766       }else{
767           tip += '<span style="font-size:8px;">最高：</span></span><span style="font-size:8px;color: #33AA11;align:right;">'+high+' </span><br/>';
768       } 
769       if(low>zs){
770           tip += '<span style="font-size:8px;">最低：</span><span style="font-size:8px;color: #DD2200;align:right;">'+low+' </span><br/>';
771       }else{
772           tip += '<span style="font-size:8px;">最低：</span><span style="font-size:8px;color: #33AA11;align:right;">'+low+' </span><br/>';
773       }
774       if(close>zs){
775           tip += '<span style="font-size:8px;">收盘：</span><span style="font-size:8px;color: #DD2200;align:right;">'+close+' </span><br/>';
776       }else{
777           tip += '<span style="font-size:8px;">收盘：</span><span style="font-size:8px;color: #33AA11;align:right;">'+close+' </span><br/>';
778       }
779       if(zde>0){
780           tip += '<span style="font-size:8px;">涨跌额：</span><span style="font-size:8px;color: #DD2200;align:right;">'+zde+' </span><br/>';
781       }else{
782           tip += '<span style="font-size:8px;">涨跌额：</span><span style="font-size:8px;color: #33AA11;align:right;">'+zde+' </span><br/>';
783       }
784       if(zdf>0){
785           tip += '<span style="font-size:8px;">涨跌幅：</span><span style="font-size:8px;color: #DD2200;align:right;">'+zdf+'% </span><br/>';
786       }else{
787           tip += '<span style="font-size:8px;">涨跌幅：</span><span style="font-size:8px;color: #33AA11;align:right;">'+zdf+'% </span><br/>';
788       }
789       if(y>10000){
790           tip += '<span style="font-size:8px;">成交量 '+(y*0.0001).toFixed(2)+"(亿股)</sapn>";
791       }else{
792           tip += '<span style="font-size:8px;">成交量：'+y+"(万股)</span>";
793       }
794       tip+="</div>"
795       return tip;
796 }
797 function failCallback(){
798     //常量本地化
799     Highcharts.setOptions({
800         global : {
801             useUTC : true
802         }
803     });
804     $(DIVID).highcharts('StockChart', {
805          chart:{
806              renderTo : DIVID,
807              margin: [0, 0,0, 0],
808              plotBorderColor: '#3C94C4',
809              plotBorderWidth: 0,
810              panning:false,
811              pinchType:'x'
812          },
813          
814         rangeSelector:{
815             enabled: false,
816         },
817          /*导出配置*/
818         exporting: {
819             enabled: false,
820         },
821           /*创建者信息*/
822         credits: {
823             enabled: false,
824         },
825         /*下部时间拖拉选择*/
826         navigator: {
827             enabled: false,
828             /*关闭时间选择*/
829             baseseries: 10
830         },
831 
832         scrollbar: {
833             enabled: false /*关闭下方滚动条*/
834         },
835         /*底部滚动条*/
836         scrollbar: {
837             enabled: false
838         },
839         plotOptions:{
840             //去掉分时线上的hover事件
841             series: {
842                 states: {
843                     hover: {
844                         enabled: true
845                     }
846                 },
847             line: {
848                 marker: {
849                     enabled: false
850                 }
851              },
852             },
853         },
854         yAxis: [{
855             opposite: false,//是否把它显示到另一边（右边）
856             labels: {
857                 align: 'right',
858                 x: -3
859             },
860             title: {
861                 text: ''
862             },
863             height: '60%',
864             lineWidth: 1,
865         },
866         {
867             opposite: true,//是否把它显示到另一边（右边）
868             labels: {
869                 align: 'right',
870                 x: 40,
871             },
872             title: {
873                 text: ''
874             },
875             lineWidth: 1,
876             height: '60%',
877             gridLineWidth: 1,
878         },
879         {
880             opposite: false,//是否把它显示到另一边（右边）
881             labels: {
882                 align: 'right',
883                 x: -3,
884             },
885             title: {
886                 text: ''
887             },
888             top: '65%',
889             height: '35%',
890             offset: 0,
891             lineWidth: 2,
892         }],
893 
894         series : [{
895                     name : 'AAPL Stock Price',
896                     data : [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
897                                 [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]],//[["9:30",200],["10:30",205]["11:30/13:00",210],["14:00",215],["15:00",220]],
898                     type : 'scatter',
899                     color:'transparent',
900                     type : 'areaspline',
901                     tooltip : {
902                         valueDecimals : 2
903                     },
904                     fillColor : {
905                         linearGradient : {
906                             x1: 0,
907                             y1: 0,
908                             x2: 0,
909                             y2: 1
910                         },
911                         stops : [
912                             [0, Highcharts.getOptions().colors[0]],
913                             [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
914                         ]
915                     },
916                     yAxis:0,
917                 },
918                 {
919                     type: 'column',
920                     name: '成交量',
921                     data: "",
922                     yAxis: 1,
923                     dataGrouping: {
924                         enabled: false,
925                         forced: true
926                     },
927                 yAxis:2,
928                 }]
929     });
930 }
931 function getDateUTC(date){
932     var dArr = new Array();
933     date+="";
934     for(var hh=0;hh<3;hh++){
935         var numb ;
936         if(hh==0){
937             numb = Number(date.slice(0,4));
938         }
939         else {
940             numb= Number(date.slice((hh-1)*2+4,hh*2+4));
941             };
942         dArr.push(numb);
943     }
944     var dateUTC = Number(Date.UTC(dArr[0],dArr[1],dArr[2],0,0));//得出的UTC时间
945     return dateUTC;
946 }