canvas 画折线图方法

function creatCanvas(){        //需要传入的数据        var data = [80,92,104,110,68,50,45];        //需要传入的x坐标        var time =["11","1.1","13.1","14.1","15.1","16.1","17.1"];        // 获取上下文        var a_canvas = document.getElementById('a_canvas');        var context = a_canvas.getContext("2d");        // 描绘边框        var grid_cols = data.length + 1;        var grid_rows = 4;        var cell_height =(a_canvas.height-50)/ grid_rows;        var cell_width = a_canvas.width / grid_cols;        context.lineWidth = 1;        context.strokeStyle = "#a0a0a0";        context.beginPath();         context.moveTo(0,0);                        // 准备画横线               var y = grid_rows*cell_height;        context.moveTo(0,y);        context.lineTo(a_canvas.width, y);                        context.moveTo(1,0);        context.lineTo(1,a_canvas.height-50);                                context.lineWidth = 2;        context.strokeStyle = "#c0c0c0";        context.stroke();        var max_v = 0;        for(var i = 0; i<data.length; i++){        if (data[i] > max_v) { max_v = data[i]};        }        max_v = max_v * 1.1;        // 将数据换算为坐标        var points = [];        for( var i=0; i < data.length; i++){        var v= data[i];        var px = cell_width *　(i+1);        var py = (a_canvas.height-50) - (a_canvas.height-50)*(v / max_v);        points.push({"x":px,"y":py});        }        // 绘制折线        context.beginPath();        context.moveTo(points[0].x, points[0].y);        for(var i= 1; i< points.length; i++){        context.lineTo(points[i].x,points[i].y);        }        context.lineWidth = 2;        context.strokeStyle = "#ee0000";        context.stroke();        //绘制坐标图形        for(var i in points){        var p = points[i];        context.beginPath();        context.arc(p.x,p.y,4,0,2*Math.PI);        context.fillStyle = "#ee0000";        context.fill();        }        //画x轴        for(var i in points){        var p = points[i];        context.beginPath();        context.arc(p.x,y,2,0,2*Math.PI);        context.fillStyle = "#ee0000";        context.fill();        context.beginPath();        context.font = 'thick 6px arial';        context.fillStyle = "green";                context.fillText(time[i], p.x-time[i].length*3, y+15);        }                 context.beginPath();        context.font = 'thick 10px arial';        context.fillStyle = "green";        context.fillText("y轴", 0, 10);        //        }