首页 > 代码库 > highstock高级篇之股票分时图
highstock高级篇之股票分时图
一直在用 highchart
在做图表,最近一段时间突然接到一活,需要用 highstock
帮客户完成一个股票K线图和分时图。虽然用法和 api
上与 highchart
没什么区别,但还是研究一番做出了对应的DEMO,于是抽空与大家分享下。
预期想要达成的效果图
highstock 开发股票或者财经的分时图
准备工作
引入 highstock
文件
[ 这里需要重点注意了,需要引入 highstock
的版本 为 v1.2.5 版本,最新版和老版本有很大的区别,至于为什么随后在代码结束后为大家解释 ! ]
图表的初始化
1. UTC时间的设置和一些公共设置
Highcharts.setOptions({ global: { useUTC: true }, lang : { rangeSelectorZoom : ‘‘, months : [ ‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘ ], shortMonths : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘ ], weekdays : [ ‘周日‘, ‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘ ] } });
2. 渲染图表方法
function initHourChart(){ var chart=null; //需要请求的api action 地址 var path="/highstock/hour.json"; $.getJSON(path,function(data) { if(data.datas.length==0) { return; } var Price = []; //获取首个变量的时间,用来计算获取时间的最小值和最大值 var firstData=http://www.mamicode.com/data.datas[0].updatetime; var minTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 8); var maxTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 20); for (i = 0; i < data.datas.length; i++) { Price.push([ UTC(data.datas[i].updatetime), parseFloat(data.datas[i].open) ]); } Price.sort(); var option={ colors:[‘#4d73a8‘], chart: { renderTo:"container",// 需要渲染的DIV 的ID名称 alignTicks: true }, navigator: false, scrollbar: false, rangeSelector: false, plotOptions: { line: { lineWidth: 1 } }, xAxis:[{ tickInterval:60 * 1000 * 60 *2.5, min:minTime, max:maxTime, startOnTick:true, endOntick:true, gridLineColor: ‘#ccc‘, gridLineDashStyle: ‘dotted‘, gridLineWidth: 1, tickColor:‘none‘, lineColor: ‘#ccc‘, labels:{ formatter:function(){ var date = new Date(this.value) var hours = date.getHours() if(hours<8){ hours = hours + 24 } return addZero(hours-8)+‘:‘+addZero(date.getMinutes()) } } }], yAxis:[{ gridLineWidth: 1, lineColor: ‘#f00‘, labels: { align: ‘right‘ }, offset:15, min:0, gridLineColor: ‘#ccc‘, gridLineDashStyle: ‘solid‘ }], credits: false, series : [{ name : ‘当前价‘, color: ‘#30527e‘, lineWidth: 1, type:‘line‘, yAxis:0, xAxis:0, pointStart: minTime, data:Price }] } chart=new Highcharts.StockChart(option); }); }
3. 渲染方法里需要用到的辅助方法,如UTC 的格式化,X轴时间的格式化等等
function addZero(str){ if(str<10){ return str = ‘0‘ + str } return str } function UTC(time){ if(time==undefined) return if (time.length < 10) { time = ‘‘ + time; return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6,8)); } else { time = ‘‘ + time; return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6, 8), time.substring(9, 11), time.substring(12, 14), time.substring(15, 17)); } }
4. 请求的 json
格式,当然格式可以自己定义 ,但是需要修改上面方法里的属性
{ "datas": [ { "open": 2055, "updatetime": "20150129 08:00:00", "status": 1, "high": 2055, "low": 2053, "close": 2054 }, { "open": 2055, "updatetime": "20150129 08:01:00", "status": 1, "high": 2055, "low": 2054, "close": 2054 }, { "open": 2055, "updatetime": "20150129 08:02:00", "status": 1, "high": 2055, "low": 2055, "close": 2055 }] }
5. 最后完成的效果图(当然样式和其他方面还得做调整)
-
方法解释说明
initHourChart
方法为渲染的核心方法,它先请求服务端的json数据
,拿到json数据
后,循环遍历开始组建图表所需要的data格式
,一个UTC
时间戳,另外一个就是对应的数据值 。需要注意的是 xAxis 属性里需要设置 tickInterval 、 min 和 max参数,而且必须要设置。因为股票的分时图一般会有开盘时间和收盘时间,这里的 min 和 max 决定了 x 轴时间的 开始 和 结束 ,tickInterval 决定了 x 的间隔时间(例子里我以2小时为间隔展示了一天的数据)。
接着我来解释为什么前面我说必须要用 v1.2.5 版本
- 旧版支持时间段固定显示模式,例如上图初始化 就可以显示 早上8点到晚上8点的刻度值,即使当前的数据没有16点以后的数据。而新版当没有16点以后的数据时,会无法显示后面时间段的空白区域,除非将时间点填充null的值,如果后面点有值了动态去更新。
- 定时器功能,我们会在load事件里增加一个定时器,动态为图表增加新的点。因为从开盘后,不是所有时间段的数据都会有。然而这点上,新版增加数据后整个线会向左移动,然后新添加的点才增加进来,具体看官网的DEMO。旧版的处理方式是图表不懂,自动在最后一个点上增加新的数据 。
附上2张图分别采用新版和旧版,解释上面2个观点
-
大家可以对比看看2张图的效果!也许新版有其他的解决方案。如果有也可以联系我与大家分享。今天就讲到这里,下篇为大家带来K线图的实例。
highstock高级篇之股票分时图