// 声明所需变量

    var canvas,ctx;  //canvas DOM    canvas上下文

    // 图表属性

    var cWidth, cHeight, cMargin, cSpace;  //canvas中部的宽/高  canvas内边距/文字边距

    var originX, originY; //坐标轴原点

    // 图属性

    var bMargin, tobalBars, bWidth, maxValue, minValue;  //每个k线图间间距  数量 宽度   所有k线图的最大值/最小值

    var totalYNomber;  //y轴上的标识数量

    //鼠标移动

    var mousePosition = {};     //用户存放鼠标位置

    // 创建canvas并获得canvas上下文

    canvas = document.getElementById("stock-canvas");

    if(canvas && canvas.getContext){

        ctx = canvas.getContext("2d");

    }

    initChart(); // 图表初始化

    // 图表初始化

    function initChart(){

        // 图表信息

        cMargin = 70;

        cSpace = 80;

        //将canvas扩大2倍，然后缩小，以适应高清屏幕

        canvas.width = canvas.getAttribute("width")* 2 ;

        canvas.height = canvas.getAttribute("height")* 2;

        canvas.style.height = canvas.height/2 + "px";

        canvas.style.width = canvas.width/2 + "px";

        cHeight = canvas.height - cMargin*2-cSpace*2;

        cWidth = canvas.width - cMargin*2-cSpace*2;

        originX = cMargin + cSpace;

        originY = cMargin + cHeight;

        // 柱状图信息

        tobalBars = data.length;

        bWidth = parseInt( cWidth/tobalBars/3);

        bMargin = parseInt( (cWidth-bWidth*tobalBars)/(tobalBars+1) );

        //算最大值，最小值

        maxValue = 0;

        minValue = 9999999;

        for(var i=0; i<data.length; i++){

            var barVal =  data[i].high ;

            if( barVal > maxValue ){

                maxValue = barVal;

            }

            var barVal2 =  data[i].low;

            if( barVal2 < minValue ){

                minValue = barVal2;

            }

        }

        // console.log("@maxValue",maxValue);

        // console.log("@minValue",minValue);

        maxValue += 20; //上面预留20的空间

        minValue -= 20; //下面预留20的空间

        totalYNomber = 10;

    }

    //绘制坐标轴和标记

    drawLineLabelMarkers(); // 绘制图表轴、标签和标记

    // 绘制图表轴、标签和标记

    function drawLineLabelMarkers(){

        ctx.font = "24px Arial";

        ctx.lineWidth = 2;

        ctx.fillStyle = "#000";

        ctx.strokeStyle = "#000";

        // y轴

        drawLine(originX, originY, originX, cMargin);

        // x轴

        drawLine(originX, originY, originX+cWidth, originY);

        // 绘制标记

        drawMarkers();

    }

    // 画线的方法

    function drawLine(x, y, a, b){

        ctx.beginPath();

        ctx.moveTo(x, y);

        ctx.lineTo(a, b);

        ctx.stroke();

        ctx.closePath();

    }

    // 绘制标记

    function drawMarkers(){

        ctx.strokeStyle = "#E0E0E0";

        // 绘制 y

        var oneVal = (maxValue-minValue)/totalYNomber;

        ctx.textAlign = "right";

        for(var i=0; i<=totalYNomber; i++){

            var markerVal =  parseInt(i*oneVal+minValue);;

            var xMarker = originX-10;

            var yMarker = parseInt( originY-cHeight*(markerVal-minValue)/(maxValue-minValue) );

            ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字

            if(i>0){

                drawLine(originX+2, yMarker, originX+cWidth, yMarker);

            }

        }

        // 绘制 x

        var textNb = 6;

        ctx.textAlign = "center";

        for(var i=0; i<tobalBars; i++){

            if(tobalBars>textNb &&  i%parseInt(tobalBars/6) != 0 ){

                continue;

            }

            var markerVal = data[i].date;

            var xMarker = parseInt( originX+cWidth*(i/tobalBars)+bMargin+bWidth/2 );

            var yMarker = originY+30;

            ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字

        }

        // 绘制标题 y

        ctx.save();

        ctx.rotate(-Math.PI/2);

        ctx.fillText("指 数", -canvas.height/2, cSpace-20);

        ctx.restore();

        // 绘制标题 x

        ctx.fillText("日 期", originX+cWidth/2, originY+cSpace-20);

    };

    //绘制K柱子

    drawBarAnimate(); // 绘制柱状图的动画

            //绘制k形图

    function drawBarAnimate(mouseMove){

        for(var i=0; i<tobalBars; i++){

            var oneVal = parseInt(maxValue/totalYNomber);

            var color = "#30C7C9";

            var barVal = data[i].open;

            var disY = 0;

            //开盘0 收盘1 最低2 最高3  

            if(data[i].close>data[i].open){ //涨=收盘>开盘

                color = "#D7797F";

                barVal = data[i].close;

                disY = data[i].close-data[i].open;

            }else{

                disY = data[i].open-data[i].close;

            }

            var showH = disY/(maxValue-minValue)*cHeight;

            showH = showH>2 ? showH : 2 ;

            var barH = parseInt( cHeight*(barVal-minValue)/(maxValue-minValue));

            var y = originY - barH;

            var x = originX + ((bWidth+bMargin)*i + bMargin);

            drawRect(data[i], x, y, bWidth, showH, mouseMove, color,true);  //开盘收盘  高度减一避免盖住x轴

            //最高最低的线

            showH = (data[i].high-data[i].low)/(maxValue-minValue)*cHeight;

            showH = showH>2 ? showH : 2 ;

            y = originY - parseInt( cHeight*(data[i].high-minValue)/(maxValue-minValue));

            drawRect(data[i], parseInt(x+bWidth/2-1), y, 2, showH,mouseMove, color);  //最高最低  高度减一避免盖住x轴

        }

    }

    //绘制方块

    function drawRect(data, x, y, a, b, mouseMove, color, ifBigBar){

        ctx.beginPath();

        if( parseInt(x)%2 !== 0){  //避免基数像素在普通分辨率屏幕上出现方块模糊的情况

            x += 1;

        }

        if( parseInt(y)%2 !== 0){

            y += 1;

        }if( parseInt(a)%2 !== 0){

            a += 1;

        }

        if( parseInt(b)%2 !== 0){

            b += 1;

        }

        ctx.rect( parseInt(x), parseInt(y), parseInt(a), parseInt(b) );

        //console.log(x,y,a,b);

        canvas.style.cursor = "default";

        if(ifBigBar  && mouseMove && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){

            // console.log(23);

            ctx.strokeStyle = color;

            ctx.strokeWidth = 20;

            ctx.stroke();

            ctx.fillStyle= color;

            ctx.strokeRect(mousePosition.x*2+10,mousePosition.y*2-50,200,280);

            ctx.fillText('开盘价:'+data.open, mousePosition.x*2+100, mousePosition.y*2);

            ctx.fillText('收盘价:'+data.close, mousePosition.x*2+100, mousePosition.y*2+50);

            ctx.fillText('最高价:'+data.high, mousePosition.x*2+100, mousePosition.y*2+100);

            ctx.fillText('最低价:'+data.low, mousePosition.x*2+100, mousePosition.y*2+150);

            ctx.fillText('换手:'+data.change, mousePosition.x*2+100, mousePosition.y*2+200);

        }

        ctx.fillStyle = color;

        ctx.fill();

        ctx.closePath();

    }

    //检测鼠标移动

    var mouseTimer = null;

    addMouseMove();

    function addMouseMove(){

        canvas.addEventListener("mousemove",function(e){

            e = e || window.event;

            if( e.offsetX || e.offsetX==0 ){

                mousePosition.x = e.offsetX;

                mousePosition.y = e.offsetY;

            }else if( e.layerX || e.layerX==0 ){

                mousePosition.x = e.layerX;

                mousePosition.y = e.layerY;

            }

            clearTimeout(mouseTimer);

            mouseTimer = setTimeout(function(){

                ctx.clearRect(0,0,canvas.width, canvas.height);

                drawLineLabelMarkers();

                drawBarAnimate(true);

            },10);

        });

    }