数据遍历曲线图

function myCanvas(option,canvas){
    var cas=canvas.getContext("2d");

    var h=canvas.height,
        w=canvas.width,
        lengX=option.x.length,
        lengY=option.y.length,
        stepH=(h-100)/(lengY-1),
        stepW=(w-100)/(lengX-1);
        //alert(stepW);
        //竖线;
    var pyx=[50,50],
        pyy=[50,h-50];

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

        cas.font="20px 微软雅黑";
        cas.fillText(option.x[i], pyx[0]-15  , pyy[1]+25);

        cas.beginPath();
        cas.moveTo(pyx[0],pyx[1]);
        cas.lineTo(pyy[0],pyy[1]);
        pyx[0]+=stepW;
        pyy[0]+=stepW;
        //cas.closePath();
        cas.stroke();
    }

        //y轴的单位 万元/㎡

        cas.font="20px 微软雅黑";
        cas.fillText(option.utext, 25 ,30);

    //横线;
    var start=[50,50],
        end=[w-50,50];

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

        cas.font="20px 微软雅黑";
        cas.fillText(option.y[i],0,h-stepH*i-40);

        cas.beginPath();
        cas.moveTo(start[0],start[1]);
        cas.lineTo(end[0],end[1]);
        start[1]+=stepH;
        end[1]+=stepH;
        //cas.closePath();
        cas.stroke();
    }

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

        var obj=option.data[j].da;

        for(var n=0; n<obj.length; n++){
            
            cas.strokeStyle=option.data[j].color;//填充颜色
            cas.beginPath();
            cas.moveTo( 50+ stepW*n, h-(obj[n]/option.y[lengY-1])*(h-100) -50);
            cas.lineTo( 50+stepW*(n+1) ,h-(obj[n+1]/option.y[lengY-1])*(h-100)-50);
            cas.stroke();

            //画圈圈
            cas.fillStyle="#fff";
            cas.beginPath();
            cas.arc(50+ stepW*n, h-(obj[n]/option.y[lengY-1])*(h-100) -50,5,0,360*Math.PI/180,false);
            cas.fill();    
            cas.stroke();

        }

    }

}