股票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