highstock K线图 深入研究

好久没写博客了，这次来个质量点的。

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