上篇为大家讲解了股票分时的基本用法，这次接着上篇谈谈K线图，分时图和K线图都属于highstock里的功能图表，所以在使用上基本上相同，但也略有区别。
预期想要达成的效果图
highstock 开发股票K线图
准备工作
同样引入
highstock文件
[ 这里可以引用最新版，也可以引用旧版的。新版增添了左上角的按钮，旧版则需要自己添加]图表的初始化
UTC时间的设置和一些公共设置
1
2
3
4
5
6
7
8
9
10
11
12Highcharts.setOptions({
global: {
useUTC: true
},
lang : {
rangeSelectorZoom : '',
months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
shortMonths : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ],
weekdays : [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ]
}
});渲染图表方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193function initKline(){
var chart=null;
var path = "/highstock/intraday-area.json";
$.getJSON(path,function(result) {
if (result.data.length == 0) {
return;
}
var data = result.data;
var ohlc = [],ave5=[],ave10=[],ave30=[], dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([ data[i][0], data[i][1], data[i][2], data[i][3],data[i][4] ]);
ave5.push([
data[i][0],
data[i][1]
]);
ave10.push([
data[i][0],
data[i][2]
]);
ave30.push([
data[i][0],
data[i][3]
]);
}
var option={
chart:{
width:720,
height:400,
renderTo:"container",
plotBorderWidth: 1,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
}
},
rangeSelector : {
buttonSpacing:5,
buttonTheme: {
width:50,
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 4,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
enabled: true,
selected:0,
inputEnabled : false,
buttons : [ {
type : 'day',
count : 1,
text : '日K'
}, {
type : 'day',
count : 7,
text : '周K'
}, {
type : 'month',
count : 1,
text : '月K'
}, {
type : 'minute',
count : 5,
text : '5分钟'
} , {
type : 'minute',
count : 15,
text : '15分钟'
}, {
type : 'minute',
count : 30,
text : '30分钟'
}, {
type : 'hour',
count : 1,
text : '60分钟'
} ]
},
credits:{enabled:false},
exporting : {
enabled : false
},
colors : [ '#000000','#0000ff','#ff00ff','#f7a35c','#8085e9' ],
title : {
text : 'K线图实例'
},
yAxis : [ {
lineWidth: 0,
labels: {
align: 'right',
x: 0,
y: 0,
formatter: function () {
return this.value.toFixed(0);
}
},
opposite: false
} ],
tooltip : {
formatter : function() {
var s = Highcharts.dateFormat('<span> %Y-%m-%d %H:%M:%S</span>',this.x);
s += '<br />开盘:<b>'
+this.points[0].point.open
+ '</b><br />最高:<b>'
+ this.points[0].point.high
+ '</b><br />最低:<b>'
+ this.points[0].point.low
+ '</b><br />收盘:<b>'
+ this.points[0].point.close
+ '</b>';
return s;
},
shared : true,
useHTML : true,
valueDecimals : 2, //有多少位数显示在每个系列的y值
crosshairs : [ {
color : '#b9b9b0'
}, {
color : '#b9b9b0'
} ]
},
scrollbar : {
enabled : true
},
plotOptions : {
candlestick : {
color : '#6d9e81',
upColor : '#cc5444'
},
line : {
marker : {
states : {
hover : {
enabled : false
},
select : {
enabled : true
}
}
},
states : {
hover : {
enabled : false
}
}
}
},
navigator: { enabled: true },
series : [
{
type : 'candlestick',
name : '股票走势',
data : ohlc
},
{
type: 'line',
lineWidth:0.8,
data: ave5
},
{
type: 'line',
lineWidth:0.8,
data: ave10
},
{
type: 'line',
lineWidth:0.8,
data: ave30
}
]
};
chart=new Highcharts.StockChart(option);
});
}
方法解释说明
1
var ohlc = [],ave5=[],ave10=[],ave30=[]
这三个数组分别代表 k线数据 和 三条均线数据
1
ohlc.push([ data[i][0], data[i][1], data[i][2], data[i][3],data[i][4] ]);
注意这里参数的顺序及意义：
- 第一个参数代表时间 必须是时间戳
- 第二个参数代表开盘价
- 第三个参数代表最高价
- 第四个参数代表最低价
- 第五个参数代表收盘价
在来谈谈rangeSelector里的buttons参数，它是个数组，里面可以定义很多按钮，类似我上面写到的，我一共设置了7个按钮，每个按钮的参数都不太一样，具体代表什么意思呢？
按钮接受三个参数type、count、text分别对应类型、数值、文本，type 的单位可以是millisecond, second, minute, day, week, month, year，count 代表对应单位的数值，text 对应按钮显示的文本
例如这里如果type 设置成 day，count 设置成7。点击按钮就会显示K线图最近7天的数据，其他的单位同理可得！
K线图的讲解就到这里，随后若有新的思路和idea会与大家分享