好久没写博客了,这次来个质量点的。
K线图,相信每个股民都不陌生,如何用SVG画好一个K线图是一个难题。
我选择用highstock做为画图组件,适当的修改了一下源码,参考了数个财经网站的案例,完成了一个不太成熟的K线图,欢迎大家批评指正。
上图就是整个K线图的样子,图的上半部分是K线图和5日均线,10日均线,30日均线,下半部分是成交量,用柱状图显示,tooltips显示了用户选择点的股票指标,所有颜色符合红涨绿跌的原则。
实现的功能主要有:
1.根据用户选择的时间区间,显示最高价和最低价。
2.点击最高价或最低价的flags会显示出相应的时间。
3.动态改变X轴时间显示格式(%Y %Y-%m %m-%d),防止样式重叠在一起。
4. 动态改变Y轴的最大值最小值,防止K线图画出去。
5.根据当前点的开盘价和收盘价改变柱状图的颜色。
6.本地化一些常量,本地化日期格式。
7.根据鼠标指向的当前点的位置。动态改变tooltip的位置
下面附上源码
//highstock K线图
var highStockChart = function(divID,result,crrentData){
var $reporting = $("#report");
var firstTouch = true;
//开盘价^最高价^最低价^收盘价^成交量^成交额^涨跌幅^换手率^五日均线^十日均线^20日均线^30日均线^昨日收盘价 ^当前点离左边的相对距离
var open,high,low,close,y,zde,zdf,hsl,MA5,MA10,MA20,MA30,zs,relativeWidth;
//定义数组
var ohlcArray = [],volumeArray = [],MA5Array = [],MA10Array=[],MA20Array=[],MA30Array=[],zdfArray=[],zdeArray=[],hslArray=[],data=[],dailyData = [],data =[];
/*
* 这个方法用来控制K线上的flags的显示情况,当afterSetExtremes时触发该方法,通过flags显示当前时间区间最高价和最低价
* minTime 当前k线图上最小的时间点
* maxTime 当前k线图上最大的时间点
* chart 当前的highstock对象
*/
var showTips = function (minTime,maxTime,chart){
// console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M',minTime));
// console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M',maxTime));
chart.showLoading();
//定义当前时间区间中最低价的最小值,最高价的最大值 以及对应的时间
var lowestPrice,highestPrice,array=[],highestArray=[],lowestArray=[],highestTime,lowestTime,flagsMaxData_1=[],flagsMaxData_2=[],flagsMinData_1,flagsMinData_2;
// var chartData = chart.series[0].data;
// for(var i=0;i<chartData.length-1;i++){
// if(chartData[i].x>minTime && chartData[i].x<=maxTime){
// array.push([
// chartData[i].x,
// chartData[i].high, //最高价
// chartData[i].low //最低价
// ])
// }
// }
for(var i=0;i<ohlcArray.length-1;i++){
if(ohlcArray[i][0]>=minTime && ohlcArray[i][0]<=maxTime){
array.push([
ohlcArray[i][0],
ohlcArray[i][2], //最高价
ohlcArray[i][3] //最低价
])
}
}
if(!array.length>0){
return;
}
highestArray = array.sort(function(x, y){ return y[1] - x[1];})[0];// 根据最高价降序排列
highestTime =highestArray[0];
highestPrice =highestArray[1].toFixed(2);
lowestArray = array.sort(function(x, y){ return x[2] - y[2];})[0]; //根据最低价升序排列
lowestTime =lowestArray[0];
lowestPrice =lowestArray[2].toFixed(2);
var formatDate1 = Highcharts.dateFormat('%Y-%m-%d',highestTime)
var formatDate2 = Highcharts.dateFormat('%Y-%m-%d',lowestTime)
flagsMaxData_1 = [
{
x : highestTime,
title : highestPrice+"("+formatDate1+")"
}
];
flagsMaxData_2 = [
{
x : highestTime,
title : highestPrice
}
];
flagsMinData_1 = [
{
x : lowestTime,
title : lowestPrice+"("+formatDate2+")"
}
];
flagsMinData_2 = [
{
x : lowestTime,
title : lowestPrice
}
];
var min = parseFloat(flagsMinData_2[0].title) - parseFloat(flagsMinData_2[0].title)*0.05;
var max = parseFloat(flagsMaxData_2[0].title)+parseFloat(flagsMaxData_2[0].title)*0.05;
var tickInterval = (( max-min)/5).toFixed(1)*1;
var oneMonth = 1000*3600*24*30;
var oneYear = 1