var can1 = document.getElementById("canvas");

var ctx = can1.getContext("2d");

nums = [268,1236,1273,1545,1988];

datas = ["11.1-11.2","11.3-11.9","11.10-11.16","11.17-11.23","11.24-11.30"];

//画出坐标线

function drawBorder(){

  ctx.beginPath();

  ctx.moveTo(100,50);

  ctx.lineTo(100,550);

  ctx.moveTo(100,550);

  ctx.lineTo(600,550);

  ctx.closePath();

  ctx.stroke();

}

//画出折线

function drawLine(){

  for (i = 0;i < nums.length-1;i ++){

    //起始坐标

    var numsY = 550-nums[i]/500*100;

    var numsX = i*100+150;

    //终止坐标

    var numsNY = 550-nums[i+1]/500*100;

    var numsNX = (i+1)*100+150;

    ctx.beginPath();

    ctx.moveTo(numsX,numsY);

    ctx.lineTo(numsNX,numsNY);

    ctx.lineWidth = 6;

    ctx.strokeStyle = "#80aa33";

    ctx.closePath();

    ctx.stroke();

  }

}

//绘制折线点的菱形和数值，横坐标值，纵坐标值

function drawBlock(){

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

    var numsY = 550-nums[i]/500*100;

    var numsX = i*100+150;

    ctx.beginPath();

    // 画出折线上的方块

    ctx.moveTo(numsX-4,numsY);

    ctx.lineTo(numsX,numsY-4);

    ctx.lineTo(numsX+4,numsY);

    ctx.lineTo(numsX,numsY+4);

    ctx.fill();

    ctx.font = "15px scans-serif";

    ctx.fillStyle = "black";

    //折线上的点值

    var text = ctx.measureText(nums[i]);

    ctx.fillText(nums[i],numsX-text.width,numsY-10);

    //绘制纵坐标

    var colText = ctx.measureText((nums.length-i)*500);

    ctx.fillText((nums.length-i)*500,90-colText.width,i*100+55);

    //绘制横坐标并判断

    if (i < 5){

      var rowText = ctx.measureText(datas[i]);

      ctx.fillText(datas[i],numsX-rowText.width/2,570);

    }else if(i == 5) {

      return;

    }

    ctx.closePath();

    ctx.stroke();

  }

}

drawBorder();

drawLine();

drawBlock();