highstock实现股票分时

highchart学习网站

www.highcharts.com

http://www.hcharts.cn/docs/index.php

http://www.hcharts.cn/api/highstock.php

实现效果:

//谷歌手机浏览器酷似有bug，不过在iPhone5上图正确显示

传入数据：股票交易的时间早上9:30-11:30 下午13:00-15:00   对应的最新价、成交量、平均价

请求地址如下：
http://open.hundsun.com:8081/quote/v1/trend?prod_code=600570.SS&fields=last_px,business_amount,avg_px
数据格式如下：
{"data":{"trend":{"fields":["min_time","last_px","business_amount","avg_px"],"600570.SS":[[201505050930,115.800000,48400,115.990000],...}

技术难点：
1.刻度分隔问题：由于highstock的x轴是按照时间升序的，但是中间11:30到13:00无数据，故x与y轴刻度分隔问题，同时中间位11:30/13:00可见x轴坐标需要定制化？
在x与y坐标提供labels：{formatter:function(){return this.value;//这里改变}}和tickPositioner:function(){return array[]}来定制输出的标签和那些数据显示。
2.y轴左右两边问题，一般坐标轴只有1份或在左边或在右边，如何使y轴左右两边都有并且数据对应？
图表的右边的y轴，存的数据与图表左边y轴的一样，但是显示的时候labels:{}这里处理输出的值

3.基线问题：在0.00%处需要定制化一条基线如上图蓝色的基线
利用var chart = $(DIVID).highcharts();
chart.removePlotLine();
chart.addPlotLine({});
4.标注问题：如上图 112 13:02  -5.08%的显示
采用标志带：
chart.removePlotBand();
chart.addPlotBand({});
5.手指触摸问题：本应用可实现上下整体拖动，左右十字线移动。

touchmove、touchstart事件的绑定

document.getElementById("line_map").removeEventListener("touchstart",createKlineChart.kline_touchstart,false);
document.getElementById("line_map").addEventListener("touchstart", createTrendChart.trend_touchstart);
document.getElementById("line_map").removeEventListener("touchmove",createKlineChart.kline_touchmove,false);

6：手指左右移动十字线跟随移动问题

首先判断手指斜向上角度大于45度就判断为上下移动，否则则判断手指左右移动。

当手指左右移动的时候捕获事件获取pagex,pageY针对父控件手指的x、y坐标，然后做映射

i=x/chart.width*data.length;

data.length与 chart.plotwidth宽度  对应i为平均分布在宽度chart.plotwidth上的数据,找到i之后就可以从data中取值data[i][0]x轴事件 data[i][1]y轴的值

 代码：

需要引入highstock.js  jquery.js

html

<div id="report" class="klineMap-report"></div>
<div class="kline_map" id="line_map" style="height: 200px; 100%" >       

trend.js

var Trend_Url=js_lib.getTrendUrl();
//http://open.hundsun.com:8081/quote/v1/trend?prod_code=600570.SS&fields=last_px,business_amount,avg_px
var Real_Url=js_lib.getCommonRealUrl();
//http://open.hundsun.com:8081/quote/v1/real?en_prod_code=600570.SS&fields=open_px,preclose_px
var DIVID='#line_map';
//接收个股代码
var STOCK_CODE = js_lib.getQueryStringByName("stock_code");
/*
 * 分时
 */
if(STOCK_CODE==""){
    STOCK_CODE="600570.SS";
}
function clickTrend(obj){
    var price_param="en_prod_code="+STOCK_CODE+"&fields=open_px,preclose_px";
    js_lib.ajax(Real_Url,callbackReal, 'get',price_param,failCallback);
    $(obj).parent().parent().children().each(function(){
        $(this).removeClass("hover");
    });
    $(obj).parent().addClass("hover");
}
function clickTrend_Show(val){
    var jsonText = JSON.parse(val);    
    if(typeof(jsonText.error_info)!='undefined'){
        failCallback();
        return ;
    }
    var data=jsonText.data.trend;
    data=data[STOCK_CODE];
    //画图
    trendChart(DIVID,data);
}
//图表上的成交量第一条的数据红绿的判断 是根据昨日的收盘价preclose_px 和今日的最新价last_px进行对比
//同时获取的昨日收盘价  用于涨幅的计算
var isFirstLineColorflag=true;
//保存昨收数据
var yesterdayClose;
//可以获取今开 与昨收
function callbackReal(val){
    var jsonText = JSON.parse(val);    
    var price_data=jsonText.data.snapshot;
    if(typeof(price_data[STOCK_CODE])=='undefined'){
        failCallback();
        return ;
    }
    //今开
    var open_px=price_data[STOCK_CODE][2];
    //昨收
    var preclose_px=price_data[STOCK_CODE][3];
    yesterdayClose=preclose_px;
    isFirstLineColorflag=open_px>preclose_px?true:false;
    //获取分时数据
    var kline_params = "prod_code="+STOCK_CODE+"&fields=last_px,business_amount,avg_px";
    js_lib.ajax(Trend_Url, clickTrend_Show, 'get',kline_params,failCallback);
}
/*
 * 5日
 */
function clickFiveDayTrend(obj){
    $(obj).parent().parent().children().each(function(){
        $(this).removeClass("hover");
    });
    $(obj).parent().addClass("hover");
}
var avg_pxyAxisMin;
var avg_pxyAxisMax;
var percentageyAxisMin;
var percentageyAxisMax;
var volume_yAxisMin;
var volume_yAxisMax;
var red="#ff0000";
var blue="#00a800";
function trendChart(DIVID,data)
{  
    var ohlc = [],
    volume = [],//昨日开盘价
    i = 0;
    //容错判断
    if(data!=undefined&&data!=null&&data.length==0){
        failCallback();
        return;
    }
    // split the data set into ohlc and volume
    //数据处理
    for (i; i < data.length; i += 1) {
        var dateUTC=getDateUTCOrNot(data[i][0],true);
        var business_amount=data[i][2];
        var columnColor = red;
        if(i==0){//第一笔的 红绿柱 判断依据是根据 今天开盘价与昨日收盘价比较
            if(isFirstLineColorflag==false){
                columnColor = blue;
            }
            avg_pxyAxisMin=data[i][3];
            avg_pxyAxisMax=data[i][3];
            percentageyAxisMin=Number(100*(data[i][1]/yesterdayClose-1));
            percentageyAxisMax=Number(100*(data[i][1]/yesterdayClose-1));
            volume_yAxisMin=data[i][2];
            volume_yAxisMax=data[i][2];
        }
        else {
            //除了第一笔，其它都是  返回的 last_px 与前一个对比
            if(data[i-1][1]-data[i][1]>0){
                columnColor = blue;
                }
            business_amount=data[i][2]-data[i-1][2];
            }
        avg_pxyAxisMin=avg_pxyAxisMin>data[i][1]?data[i][1]:avg_pxyAxisMin;
        avg_pxyAxisMax=avg_pxyAxisMax>data[i][1]?avg_pxyAxisMax:data[i][1];
        percentageyAxisMin=percentageyAxisMin>Number(100*(data[i][1]/yesterdayClose-1))?Number(100*(data[i][1]/yesterdayClose-1)):percentageyAxisMin;
        percentageyAxisMax=percentageyAxisMax>Number(100*(data[i][1]/yesterdayClose-1))?percentageyAxisMax:Number(100*(data[i][1]/yesterdayClose-1));
        volume_yAxisMin=volume_yAxisMin>business_amount?business_amount:volume_yAxisMin;
        volume_yAxisMax=volume_yAxisMax>business_amount?volume_yAxisMax:business_amount;
        //将数据放入 ohlc volume 数组中
        ohlc.push({x:dateUTC,y:Number(data[i][1])});
        volume.push({x:dateUTC,y:Number(business_amount),color:columnColor});
    }
    //将剩下的时间信息补全
    appendTimeMessage(ohlc,volume,data);
    createTrendChart(data,ohlc,volume);
};
function createTrendChart(data,ohlc,volume){
    var date;
    if(data.length>0){
        date=data[data.length-1][0]+"";
        var dArr = new Array();
        for(var hh=0;hh<5;hh++){
            var numb ;
            if(hh==0){
                numb = Number(date.slice(0,4));
            }
            else {
                numb= Number(date.slice((hh-1)*2+4,hh*2+4));
                };
            dArr.push(numb);
        }
    }
    var last_dataTime=new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]);
    var $reporting = $("#report");
    $reporting.html("");
     // Create the chart
    var am_startTime=new Date(last_dataTime);
    am_startTime.setHours(9, 30, 0, 0);
    var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes()));
    
    var am_midTime=new Date(last_dataTime);
    am_midTime.setHours(10, 30, 0, 0);
    var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes()));
    
    //股票交易早上最后的时间
    var am_lastTime=new Date(last_dataTime);
    am_lastTime.setHours(11, 30, 0, 0);
    var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes()));
    //股票交易下午最后的时间
    var pm_startTime=new Date(last_dataTime);
    pm_startTime.setHours(13, 1, 0, 0);
    var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes()));

    var pm_midTime=new Date(last_dataTime);
    pm_midTime.setHours(14, 0, 0, 0);
    var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes()));

    var pm_lastTime=new Date(last_dataTime);
    pm_lastTime.setHours(15, 0, 0, 0);
    var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes()));
    //常量本地化
    Highcharts.setOptions({
        global : {
            useUTC : true
        }
    });
    
    var startX,startY,swipeX,swipeY;
    createTrendChart.trend_touchstart=function(event){
        var touch = event.touches[0];
        startX=touch.pageX;
        startY=touch.pageY;
        swipeX=swipeY=false;
        document.getElementById("line_map").addEventListener("touchmove", createTrendChart.trend_touchmove);
    }
    createTrendChart.trend_touchmove=function (event){
        var touch = event.touches[0];
        var currenX=touch.pageX;
        var currentY=touch.pageY;
        if(true==swipeX){//先左右就一直左右  上下也不影响
            swipeY=false;
        }
        else if(true==swipeY){//向上下移动的标志
            swipeX=false;
        }else{
            if(Math.abs(currentY-startY)>Math.abs(currenX-startX)){//上下移动
                swipeY=true;
                }
            else{
                swipeX=true;
                }
        }
        if(true==swipeY){//上下移动   先重画线 人后删除事件
            document.getElementById("line_map").removeEventListener("touchmove", createTrendChart.trend_touchmove,false);
        }else if(true==swipeX){ 
            event.stopPropagation();
            event.preventDefault();
        }
        //不管 上下 还是 左右 都需要先画标示线
        var chart = $(DIVID).highcharts();
        var left=chart.yAxis[0].left+(chart.yAxis[0].axisLine.strokeWidth==undefined?0:chart.yAxis[0].axisLine.strokeWidth);
        var y ;
        var x = touch.pageX-left-7;
        //x点 =x/chart宽度 * 总体点的个数
        x=(x/chart.plotWidth)*ohlc.length;
        var i=0;
       i=Number(Math.ceil(x));
       if(i>=data.length||i<0){
           return;}
       //计算图表x轴
       x=ohlc[i].x;//utc格式时间数据
       y=data[i][1];
       var last_px=data[i][1].toFixed(2);
       var business_amount=data[i][2];
       var avg_price=data[i][3].toFixed(2);
       var zfz=(100*(ohlc[i].y/yesterdayClose-1)).toFixed(2);
       var time=Highcharts.dateFormat('%H:%M ', x);
         //除了第一笔，其它都是  返回的 last_px 与前一个对比
        if(i!=0){
             business_amount=data[i][2]-data[i-1][2];
         }
         $reporting.html(
                 '<div class="detail">'+
                               '<ul>'+
                         '<li class="value-2">'+ '价格:  <span>'+last_px+'</span></li>'+
                         '<li class="value-2">'+ '成交量:  <span>'+business_amount+'</span></li>'+
                                                         '<li class="value-2">'+ '均价:  <span>'+avg_price+'</span></li>'+
                     '<li class="value-2">'+ '涨幅值:  <span>'+zfz+'%</span></li>'+
                     '</ul>'+
                 '</div>'
                 );
         var chart = $(DIVID).highcharts();           // Highcharts构造函数
         chart.xAxis[0].removePlotBand("plotBand-x");
         chart.xAxis[0].addPlotBand({
            borderColor:'red',
            borderWidth:0.1,
            color: 'red',
            from: x-0.000001,//,Date.UTC(2015, 3, 27,10,50),
            to:  x+0.000001,//Date.UTC(2015, 3, 27,10,51),
            label: {
                useHTML:true,
                text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+time+'</span>',
                textAlign: 'bottom',
                y:5,
                x:-30
            },
            id:'plotBand-x',
            zIndex:1001
         });
         chart.yAxis[0].removePlotBand("plotBand-y0");
         chart.yAxis[0].addPlotBand({
             borderColor:'red',
             borderWidth:0.1,
             color: 'red',
                from: y-0.000001,//,Date.UTC(2015, 3, 27,10,50),
                to:   y+0.000001,//Date.UTC(2015, 3, 27,10,51),
                label: {
                    useHTML:true,
                    style: {         //字体样式
                        font: 'normal 5px Verdana, sans-serif'
                        },
                    text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+y+'</span>',
                    verticalAlign:'top',
                    textAlign: 'left',
                    x:-25,
                    y:-2
                },
                id:'plotBand-y0',
                zIndex:1001

         });
         chart.yAxis[0].removePlotBand("plotBand-y1");
         chart.yAxis[0].addPlotBand({
             color: '#BEBEBE',
             borderColor:'#BEBEBE',
             borderWidth:0.1,
                from: y-0.000001,//,Date.UTC(2015, 3, 27,10,50),
                to:  y+0.000001,//Date.UTC(2015, 3, 27,10,51),
                label: {
                    useHTML:true,
                    style: {         //字体样式
                        font: 'normal 5px Verdana, sans-serif'
                        },
                    text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+zfz+"%"+'</span>',
                    textAlign: 'right',
                    verticalAlign:'bottom',
                    x:280,
                    y:-2
                },
                id:'plotBand-y1',
                zIndex:1001
         });
    }
    document.getElementById("line_map").removeEventListener("touchstart",createKlineChart.kline_touchstart,false);
    document.getElementById("line_map").addEventListener("touchstart", createTrendChart.trend_touchstart);
    document.getElementById("line_map").removeEventListener("touchmove",createKlineChart.kline_touchmove,false);
    //开始画图
    $(DIVID).highcharts('StockChart', {
         chart:{
             //关闭平移
            panning:false,
            zoomType: 'none',
            pinchType:'none',
             renderTo : "line_map",
            margin: [25, 25,25, 25],
            spacing: [0,0,0,0],
             plotBorderColor: '#3C94C4',
             plotBorderWidth: 0,
            events:{
                load:function(){
                    x=ohlc[data.length-1].x;
                    y=ohlc[data.length-1].y;
                    var chart = $(DIVID).highcharts();           // Highcharts构造函数
                     //基准线
                     chart.yAxis[0].addPlotLine({           //在x轴上增加
                         value:yesterdayClose,                           //在值为2的地方
                         0.1,                           //标示线的宽度为2px
                         color: '#FFA500',                  //标示线的颜色
                         zIndex:1001
                     });
                     chart.xAxis[0].removePlotBand("plotBand-x");
                     chart.xAxis[0].addPlotBand({
                        borderColor:'#BEBEBE',
                        borderWidth:0.1,
                        color: '#BEBEBE',
                        from: ohlc[data.length-1].x-0.000001,//,Date.UTC(2015, 3, 27,10,50),
                        to:  ohlc[data.length-1].x+0.000001,//Date.UTC(2015, 3, 27,10,51),
                        label: {
                            useHTML:true,
                            text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+Highcharts.dateFormat('%H:%M ', ohlc[data.length-1].x)+'</span>',
                            textAlign: 'top',
                            y:5,
                            x:-30
                        },
                        id:'plotBand-x',
                        zIndex:1001
                     });
                     chart.yAxis[0].removePlotBand("plotBand-y0");
                     chart.yAxis[0].addPlotBand({
                         borderColor:'#BEBEBE',
                         borderWidth:0.1,
                         color: '#BEBEBE',
                            from: ohlc[data.length-1].y-0.0001,//,Date.UTC(2015, 3, 27,10,50),
                            to:  ohlc[data.length-1].y+0.0001,//Date.UTC(2015, 3, 27,10,51),
                            label: {
                                useHTML:true,
                                style: {         //字体样式
                                    font: 'normal 5px Verdana, sans-serif'
                                    },
                                text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+ohlc[data.length-1].y.toFixed(2)+'</span>',
                                verticalAlign:'top',
                                textAlign: 'left',
                                x:-25,
                                y:-2
                            },
                            id:'plotBand-y0',
                            zIndex:1001
                     });
                     chart.yAxis[0].removePlotBand("plotBand-y1");
                     chart.yAxis[0].addPlotBand({
                         color: '#BEBEBE',
                         borderWidth:0.1,
                         borderColor:'#BEBEBE',
                            from: ohlc[data.length-1].y-0.0001,//,Date.UTC(2015, 3, 27,10,50),
                            to:  ohlc[data.length-1].y+0.0001,//Date.UTC(2015, 3, 27,10,51),
                            label: {
                                useHTML:true,
                                style: {         //字体样式
                                    font: 'normal 5px Verdana, sans-serif'
                                    },
                                text: '<span class="value" style="font-size:10px;background-color:rgba(0,0,0,.6); color:#fff; height:15px; line-height:15px; padding:0 5px;">'+(100*(ohlc[data.length-1].y/yesterdayClose-1)).toFixed(2)+"%"+'</span>',
                                textAlign: 'right',
                                verticalAlign:'bottom',
                                x:280,
                                y:-2
                            },
                            id:'plotBand-y1',
                            zIndex:1001
                     });
                     $reporting.html(
                             '<div class="detail">'+
                             '<ul>'+
                             '<li class="value-2">'+ '价格:  <span>'+data[data.length-1][1].toFixed(2)+'</span></li>'+
                             '<li class="value-2">'+ '成交量:  <span>'+data[data.length-1][2]+'</span></li>'+
                             '<li class="value-2">'+ '均价:  <span>'+data[data.length-1][3].toFixed(2)+'</span></li>'+
                             '<li class="value-2">'+ '涨幅值:  <span>'+(100*(data[data.length-1][3]/yesterdayClose-1)).toFixed(2)+'%</span></li>'+
                             '</ul>'+
                             '</div>'
                     ); 
                }
            }
         },
         tooltip:{
            enabled:false,
            crosshairs:false
         },
        rangeSelector:{
            enabled: false,
        },
         /*导出配置*/
        exporting: {
            enabled: false,
        },
          /*创建者信息*/
        credits: {
            enabled: false,
        },
        /*下部时间拖拉选择*/
        navigator: {
            enabled: false,
            /*关闭时间选择*/
            baseseries: 10
        },
        scrollbar: {
            enabled: false /*关闭下方滚动条*/
        },
        /*底部滚动条*/
        scrollbar: {
            enabled: false
        },
        plotOptions:{
            //去掉分时线上的hover事件
            series:{
                states: {
                    hover: {
                        enabled: false
                    }
                },
            line: {
                marker: {
                    enabled: false
                }
             },
          }
        },
        xAxis:{
            showFirstLabel: true,
            showLastLabel:true,
            scrollbar:{enabled:true},
            labels: {
               // staggerLines:5
                style: {         //字体样式
                    font: 'normal 5px Verdana, sans-serif'
                    },
                formatter:function(){
                    var returnTime=Highcharts.dateFormat('%H:%M ', this.value);
                    if(returnTime=="11:30 ")
                    {
                        return "11:30/13:00";
                    }
                    return returnTime;
                },
            },
            tickPositioner:function(){
                var positions=[am_startTimeUTC,am_midTimeUTC,am_lastTimeUTC,pm_midTimeUTC,pm_lastTimeUTC];
                return positions;
            },
             gridLineWidth: 1,
        },
        yAxis: [{
            opposite: false,//是否把它显示到另一边（右边）
            labels: {
                style: {         //字体样式
                    font: 'normal 5px Verdana, sans-serif'
                    },
                     overflow: 'justify',
                align: 'right',
                x: -3,
                y:5,
                formatter:function(){
                    //最新价  px_last/preclose昨收盘-1
                    return (this.value).toFixed(2);
                  }
            },
            title: {
                text: ''
            },
            top:'0%',
            height: '65%',
            lineWidth: 1,
            showFirstLabel: true,
            showLastLabel:true,
            
            tickPositioner:function(){    //以yesterdayClose为界限，统一间隔值，从 最小到最大步进
                positions = [],
                tick = Number((avg_pxyAxisMin)),
                increment = Number(((avg_pxyAxisMax - avg_pxyAxisMin) / 5));
                  var tickMin=Number((avg_pxyAxisMin)),tickMax=Number((avg_pxyAxisMax));
                if(0==data.length){//还没有数据时，yesterdayClose 的幅值 在 -1% - 1%上下浮动
                    tickMin=0.99*yesterdayClose;
                    tickMax=1.01*yesterdayClose;
                }else if(0==increment){//有数据了  但是数据都是一样的幅值
                    if(yesterdayClose>Number(avg_pxyAxisMin)){
                        tickMin=Number(avg_pxyAxisMin);
                        tickMax=2*yesterdayClose-Number(avg_pxyAxisMin);
                    }else if(yesterdayClose<Number(avg_pxyAxisMin)){
                        tickMax=Number(avg_pxyAxisMax);
                        tickMin=yesterdayClose-(Number(avg_pxyAxisMax)-yesterdayClose);
                    }else{
                        tickMin=0.99*yesterdayClose;
                        tickMax=1.01*yesterdayClose;
                    }
                }else if(avg_pxyAxisMin-yesterdayClose<0&&avg_pxyAxisMax-yesterdayClose>0){//最小值在昨日收盘价下面，最大值在昨日收盘价上面
                    var limit=Math.max(Math.abs(avg_pxyAxisMin-yesterdayClose),Math.abs(avg_pxyAxisMax-yesterdayClose));
                    tickMin=yesterdayClose-limit;
                    tickMax=yesterdayClose+limit;
                }else if(avg_pxyAxisMin>yesterdayClose&&avg_pxyAxisMax>yesterdayClose){//最小最大值均在昨日收盘价上面
                    tickMax=avg_pxyAxisMax;
                    tickMin=yesterdayClose-(tickMax-yesterdayClose);
                    
                }else if(avg_pxyAxisMin<yesterdayClose&&avg_pxyAxisMax<yesterdayClose){//最小最大值均在昨日收盘价下面
                    tickMin=avg_pxyAxisMin;
                    tickMax=yesterdayClose+(yesterdayClose-tickMin);
                }
                if(tickMax>2*yesterdayClose){//数据超过100%了
                    tickMax=2*yesterdayClose;
                    tickMin=0;
                }
                var interval=Number(tickMax-yesterdayClose)/10;
                tickMax+=interval;
                tickMin=yesterdayClose-(tickMax-yesterdayClose);
                increment=(tickMax-yesterdayClose)/3;
                tick=tickMin;
                var i=0;
                for (tick;i ++ <7  ; tick += increment) {
                    positions.push(Number(tick));
                    }
                
            return positions;
            },
        },
        {
            opposite: true,//是否把它显示到另一边（右边）
            showFirstLabel: true,
            showLastLabel:true,
            labels: {
                overflow: 'justify',
                style: {         //字体样式
                    font: 'normal 5px Verdana, sans-serif'
                    },
                align: 'right',
                x: 25,
                y:5,
                formatter:function(){//最新价  px_last/preclose昨收盘-1
                    return (100*(this.value/yesterdayClose-1)).toFixed(2)+"%";
                  }
            },
            title: {
                text: ''
            },
            lineWidth: 1,
            top:'0%',
            height: '65%',
            gridLineWidth: 1,
            tickPositioner:function(){
                return positions;
            }
        },
        {
            opposite: false,//是否把它显示到另一边（右边）
            labels: {
                overflow: 'justify',
                style: {         //字体样式
                    font: 'normal 5px Verdana, sans-serif'
                    },
                align: 'right',
                x: -3,
                y:5,
                formatter:function(){
                    if(this.value>1000000000){
                        return Number((this.value/1000000000).toFixed(2))+"G";
                    }else if(this.value>1000000){
                        return Number((this.value/1000000).toFixed(2))+"M";
                    }else if(this.value>1000){
                        return Number((this.value/1000).toFixed(2))+"K";
                    }else{
                        return Number(this.value.toFixed(2));
                    }
                }
            },
            title: {
                text: ''
            },
            top: '70%',
            height: '30%',
            '100%',
            offset: 0,
            lineWidth: 1,
            showFirstLabel: true,
            showLastLabel:true,
            tickPositioner:function(){
                var positions = [],
                tickMax=volume_yAxisMax,
                tickMin=volume_yAxisMin,
                tick = 0,
                increment = 0;
                var limit=tickMax/2;
                tickMax+=limit;
                increment=tickMax/2;
                tick=0;
                for (tick; tick  <= tickMax; tick += increment) {
                    positions.push(Number(tick.toFixed(2)));
                    if(increment==0){
                        break;
                    }
                }
                return positions;
            },
        }],
        series : [{
                    name : 'AAPL Stock Price',
                    data : ohlc,
                    type : 'areaspline',
                    tooltip : {
                        valueDecimals : 2
                    },
                    fillColor : {
                        linearGradient : {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops : [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    yAxis:0,
                },
                {
                    name : 'AAPL Stock Price',
                    data : ohlc,
                    type : 'scatter',
                    cursor:'pointer',
                    onSeries : 'candlestick',
                    color:'transparent',
                    tooltip : {
                        valueDecimals : 2
                    },
                    style:{
                           fontSize: '0px',
                           fontWeight: '0',
                           textAlign: 'center'
                       },
                    zIndex:-1000,
                    yAxis:1,
                },
                {
                    type: 'column',
                    name: '成交量',
                    data: volume,
                    dataGrouping: {
                        enabled: false,
                        forced: true
                    },
                    yAxis:2,
                    zIndex:-1000
                }]
    });
}
/**
 * 错误处理
 */
function failCallback(){
    var last_dataTime=new Date();
    var $reporting = $("#report");
    $reporting.html("");
     // Create the chart
    var am_startTime=new Date(last_dataTime);
    am_startTime.setHours(9, 30, 0, 0);
    var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes()));
    
    var am_midTime=new Date(last_dataTime);
    am_midTime.setHours(10, 30, 0, 0);
    var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes()));
    
    //股票交易早上最后的时间
    var am_lastTime=new Date(last_dataTime);
    am_lastTime.setHours(11, 30, 0, 0);
    var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes()));
    //股票交易下午最后的时间
    var pm_startTime=new Date(last_dataTime);
    pm_startTime.setHours(13, 1, 0, 0);
    var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes()));

    var pm_midTime=new Date(last_dataTime);
    pm_midTime.setHours(14, 0, 0, 0);
    var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes()));

    
    var pm_lastTime=new Date(last_dataTime);
    pm_lastTime.setHours(15, 0, 0, 0);
    var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes()));
    var data=[];
    data.push({x:am_startTimeUTC,y:1});
    data.push({x:am_midTimeUTC,y:2});
    data.push({x:am_lastTimeUTC,y:3});
    data.push({x:pm_midTimeUTC,y:4});
    data.push({x:pm_lastTimeUTC,y:5});
    //常量本地化
    Highcharts.setOptions({
        global : {
            useUTC : true
        }
    });
    $(DIVID).highcharts('StockChart', {
         chart:{
             renderTo : "line_map",
             margin: [25, 25,25, 25],
              plotBorderColor: '#3C94C4',
              plotBorderWidth: 0.3,
             // zoomType:false,
         },
         tooltip:{
             enabled:false
        },
        rangeSelector:{
            enabled: false,
        },
         /*导出配置*/
        exporting: {
            enabled: false,
        },
          /*创建者信息*/
        credits: {
            enabled: false,
        },
        /*下部时间拖拉选择*/
        navigator: {
            enabled: false,
            /*关闭时间选择*/
            baseseries: 10
        },
        /*底部滚动条*/
        scrollbar: {
            enabled: false
        },
        plotOptions:{
            //去掉分时线上的hover事件
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
            line: {
                marker: {
                    enabled: false
                }
             },
            },
        },
        xAxis:{
            showFirstLabel: true,
            showLastLabel:true,
             tickInterval: 1,
            labels: {
                style: {         //字体样式
                    font: 'normal 5px Verdana, sans-serif'
                    },
                formatter:function(){
                    var labels=['9:30','10:30','11:30/13:00','14:00','15:00']
                    return labels[this.value];
                },
            },
            categories:['9:30','10:30','11:30/13:00','14:00','15:00'],
            gridLineWidth: 1,
        },
        yAxis: [{
            showFirstLabel: true,
            showLastLabel:true,
            opposite: false,//是否把它显示到另一边（右边）
            labels: {
                align: 'right',
                x: -3,
                y:5
            },
            title: {
                text: ''
            },
            height: '50%',
            lineWidth: 1,
            gridLineWidth: 1,
        },
        {
            showFirstLabel: true,
            showLastLabel:true,
            opposite: false,//是否把它显示到另一边（右边）
            labels: {
                align: 'right',
                x: -3,
                y:5
            },
            title: {
                text: ''
            },
            top: '60%',
            height: '40%',
            offset: 0,
            lineWidth: 1,
            gridLindeWidth:1,
        }],
        series : [{
                    name : 'AAPL Stock Price',
                    data :[10,20,30,40,50],// [["9:30",200],["10:30",205]["11:30/13:00",210],["14:00",215],["15:00",220]],
                    type:'column',
                    color:'transparent',
                    fillColor : {
                        linearGradient : {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops : [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    dataGrouping: {
                        enabled: false,
                        forced: true
                    },
                    yAxis:0,
                },
                {
                    type: 'column',
                    name: '成交量',
                    fillColor : {
                        linearGradient : {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops : [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                        },
                    data : [10,20,30,40,50],//[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
                                   //[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]],
                    color:'transparent',
                       yAxis: 1,
                    dataGrouping: {
                        enabled: false,
                        forced: true
                    },
                yAxis:1,
                }]
    });
}
/**
 * 获取日期对象，如果isUTC为true获取 日期的UTC对象，false则获取普通日期对象
 * @param date
 * @param isUTC
 * @returns
 */
function getDateUTCOrNot(date,isUTC){
        if(! (date instanceof String))
        {    
            date+="";
        }
        var dArr = new Array();
        for(var hh=0;hh<5;hh++){
            var numb ;
            if(hh==0){
                numb = Number(date.slice(0,4));
            }
            else {
                numb= Number(date.slice((hh-1)*2+4,hh*2+4));
                };
            dArr.push(numb);
        }
        if(isUTC==false){
            return new Date(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]);
        }
        var dateUTC = Number(Date.UTC(dArr[0],dArr[1]-1,dArr[2],dArr[3],dArr[4]));//得出的UTC时间
        return dateUTC;
}

//数据补全
function appendTimeMessage(ohlc,volume,data){
    var date=data[data.length-1][0]+"";
    var last_dataTime=getDateUTCOrNot(date,false);
    
    //股票交易早上最后的时间
    var am_lastTime=new Date(last_dataTime);
    am_lastTime.setHours(11, 30, 0, 0);
    //股票交易下午最后的时间
    var pm_startTime=new Date(last_dataTime);
    pm_startTime.setHours(13, 1, 0, 0);
    var pm_lastTime=new Date(last_dataTime);
    pm_lastTime.setHours(15, 0, 0, 0);
    //把时间日期格式转化成utc格式
    function convertDateToUTC(date){
        return Number(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes()));
    }
//如果获取的时间11：:30之前的计算
    if(last_dataTime<am_lastTime){
        var i=last_dataTime;
        i.setMinutes((i.getMinutes()+1));
        for(;i<=am_lastTime;i.setMinutes((i.getMinutes()+1)))
        {
            ohlc.push({x:convertDateToUTC(i)});
            volume.push({x:convertDateToUTC(i)});
        }
        i=pm_startTime;
        for(;i<=pm_lastTime;i.setMinutes((i.getMinutes()+1)))
        {
            ohlc.push({x:convertDateToUTC(i)});
            volume.push({x:convertDateToUTC(i)});
        }
    }else if(last_dataTime<pm_lastTime){    //获取的时间下午13:00之后的计算
        var i;
        if(Number(last_dataTime)==Number(am_lastTime)){
            i=pm_startTime;
        }else{
            i=last_dataTime;
        }
        i.setMinutes((i.getMinutes()+1));
        for(;i<=pm_lastTime;i.setMinutes((i.getMinutes()+1)))
        {
            ohlc.push({x:convertDateToUTC(i)});
            volume.push({x:convertDateToUTC(i)});
        }
    }
}