var
        canvas = document.getElementById('stock-canvas'),
        width = canvas.width,
        height = canvas.height,
        ctx = canvas.getContext('2d');

ctx.fillStyle="#000000"; //设置画笔颜色为黑色
ctx.fillRect(0,0,width,height); //填充幕布

var candle_width=width/data.length; //定义蜡烛宽度
var ratio=0.5; //蜡烛缩放比例
var baseline=height/2;//定义基线

for(let i=0;i<data.length;i++){
var temp=data[i];
var up=(temp.close-temp.open>=0)?true:false; //今日上涨还是下跌
var candle_x=candle_width*i; //蜡烛的x坐标
var candle_height=Math.abs(temp.close-temp.open)*ratio; //蜡烛的高度
var candle_y=0; //蜡烛的y坐标

if (up){
    ctx.fillStyle="#ff0000"; //设置填充颜色
    ctx.strokeStyle="#ff0000";//设置线条颜色
    candle_y=baseline-candle_height; //蜡烛的y坐标
    ctx.fillRect(candle_x,candle_y,candle_width,candle_height); //画蜡烛的方块部分
    var stick_high_height=(temp.high-temp.close)*ratio; //上方火苗的高度
    var stick_low_height=(temp.open-temp.low)*ratio; //下方火苗的高度
    ctx.beginPath();
    ctx.moveTo(candle_x+candle_width/2,candle_y);
    ctx.lineTo(candle_x+candle_width/2,candle_y-stick_high_height);
    ctx.stroke(); //画上方火苗

    ctx.beginPath();
    ctx.moveTo(candle_x+candle_width/2,candle_y+candle_height);
    ctx.lineTo(candle_x+candle_width/2,candle_y+candle_height+stick_low_height);
    ctx.stroke(); //画下方火苗
    baseline=candle_y; //重新设置基线
}else{
    ctx.fillStyle="#00ff00";
    ctx.strokeStyle="#00ff00";
    candle_y=baseline;
    ctx.fillRect(candle_x,candle_y,candle_width,candle_height);
    ctx.beginPath();
    ctx.moveTo(candle_x+candle_width/2,candle_y);
    ctx.lineTo(candle_x+candle_width/2,candle_y-stick_high_height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(candle_x+candle_width/2,candle_y+candle_height);
    ctx.lineTo(candle_x+candle_width/2,candle_y+candle_height+stick_low_height);
    ctx.stroke();
    baseline=candle_y+candle_height;
}
}