var mycanvas;
var ctx;
var ar = [];
var ar2 = [];
var arMax, arMin;

for (var i = 0; i < 7; i++) {
    ar[i] = (parseInt($('.zxt_shuju>ul>li').eq(i).children('span').html()) + parseInt($('.zxt_shuju>ul>li').eq(i).children('b').html())) / 2

};//循环数据获取每日平均值
arMax = Math.max.apply(null, ar); //最大值
arMin = Math.min.apply(null, ar); //最小值
for (var i = 0; i < 7; i++) {
    ar2[i] = 60 + Math.abs((ar[i] - arMax) / (arMax - arMin) * 30);

};//获得每个点具体位置

$(document).ready(function(){
     draw(); 
});



function draw() {
    mycanvas = $('#canvas')[0];
    ctx = mycanvas.getContext('2d');
    mycanvas.width = 600;
    mycanvas.height = 140;


    ctx.beginPath(); //又开始画了
    ctx.strokeStyle = '#fff'; //加个描边颜色
    ctx.lineCap = "round"; //画个直线
    ctx.font = "18px Arial"; //字体大小
    
	var leftid = 52;
	var startd = leftid;
	ctx.moveTo(startd, ar2[0]); //起始点X Y坐标
	for (var i = 1; i < 7; i++) {
		startd += 82;
		ctx.lineTo(startd, ar2[i]); //起始点X Y坐标
		
	}

    /*ctx.lineTo(125, ar2[1]); //结束点X Y坐标
    ctx.lineTo(210, ar2[2]); //结束点X Y坐标
    ctx.lineTo(295, ar2[3]); //结束点X Y坐标
    ctx.lineTo(380, ar2[4]); //结束点X Y坐标
    ctx.lineTo(465, ar2[5]); //结束点X Y坐标
	ctx.lineTo(620, ar2[6]); //结束点X Y坐标*/
    ctx.stroke();

    ctx.beginPath(); //又开始画了	
    ctx.fillStyle = '#ff0';//文字颜色
    /*ctx.fillText($('.zxt_shuju>ul>li').eq(0).children('span').html() + '°', 65 - 10, ar2[0] - 20);//最高温度值
    ctx.fillText($('.zxt_shuju>ul>li').eq(1).children('span').html() + '°', 145 - 10, ar2[1] - 20);
    ctx.fillText($('.zxt_shuju>ul>li').eq(2).children('span').html() + '°', 230 - 10, ar2[2] - 20);
    ctx.fillText($('.zxt_shuju>ul>li').eq(3).children('span').html() + '°', 315 - 10, ar2[3] - 20);
    ctx.fillText($('.zxt_shuju>ul>li').eq(4).children('span').html() + '°', 400 - 10, ar2[4] - 20);
    ctx.fillText($('.zxt_shuju>ul>li').eq(5).children('span').html() + '°', 485 - 10, ar2[5] - 20);
	ctx.fillText($('.zxt_shuju>ul>li').eq(5).children('span').html() + '°', 570 - 10, ar2[6] - 20);
   

    ctx.fillText($('.zxt_shuju>ul>li').eq(0).children('b').html() + '°', 65 - 10, ar2[0] + 40);//最低温度值
    ctx.fillText($('.zxt_shuju>ul>li').eq(1).children('b').html() + '°', 145 - 10, ar2[1] + 40);
    ctx.fillText($('.zxt_shuju>ul>li').eq(2).children('b').html() + '°', 230 - 10, ar2[2] + 40);
    ctx.fillText($('.zxt_shuju>ul>li').eq(3).children('b').html() + '°', 315 - 10, ar2[3] + 40);
    ctx.fillText($('.zxt_shuju>ul>li').eq(4).children('b').html() + '°', 400 - 10, ar2[4] + 40);
    ctx.fillText($('.zxt_shuju>ul>li').eq(5).children('b').html() + '°', 485 - 10, ar2[5] + 40);
	ctx.fillText($('.zxt_shuju>ul>li').eq(5).children('b').html() + '°', 570 - 10, ar2[6] + 40);*/

	var srarttxt = leftid;
	for (var i = 0; i < 7; i++) {
		ctx.fillText($('.zxt_shuju>ul>li').eq(i).children('span').html() + '°', srarttxt - 10, ar2[i] - 20);//最高温度值
		ctx.fillText($('.zxt_shuju>ul>li').eq(i).children('b').html() + '°', srarttxt - 10, ar2[i] + 40);//最低温度值
		srarttxt += 82;
	}
    ctx.stroke(); //结束


    ctx.beginPath(); //又开始画了	
    ctx.arc(leftid, ar2[0], 4, 0, 2 * Math.PI); //画个园
    ctx.strokeStyle = '#fff'; //给圆加个描边颜色
    ctx.fillStyle = "#fff"; //给圆加个填充颜色
    ctx.fill(); //填充了
    ctx.stroke(); //结束

};


