2回答

LeeVi_Dream

提问者

2017-06-28

//加入画布 数据层
    var canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');
    canvas.width=ctx.width=w;
    canvas.height=ctx.height=h;
    component.append(canvas);

    var draw=function(per){
        ctx.clearRect(0,0,w,h);
        ctx.beginPath();
    ctx.strokeStyle="#ff8878";
    ctx.lineWidth=3;
    var x1=0;
    var y1=0;
    //ctx.arc(10,10,5,0,2*Math.PI);
    //ctx.stroke();
    //绘制点
    var row_w=w/(cfg.data.length+1);
    for(i in cfg.data){
        var item=cfg.data[i];
        x1=row_w*i+row_w;
        y1=h-h*item[1]*per;
        ctx.moveTo(x1,y1);
        ctx.arc(x1,y1,5,0,2*Math.PI);
    }

    //点连线
    ctx.moveTo(row_w,h-h*cfg.data[0][1]*per);
    for(i in cfg.data){
        var item=cfg.data[i];
        x1=row_w*i+row_w;
        y1=h-h*item[1]*per;
        ctx.lineTo(x1,y1);
    }
    ctx.lineTo(x1,h);
    ctx.lineTo(row_w,h);
    ctx.closePath();
    ctx.fillStyle="rgba(180,180,180,0.5)";
    ctx.fill();

    //写数据
    for(i in cfg.data){
        var item=cfg.data[i];
        x1=row_w*i+row_w;
        y1=h-h*item[1]*per;
        ctx.fillStyle=item[2]?item[2]:"#458268";
        ctx.fillText((item[1]*100)+'%',x1-10,y1-10);
    }
    ctx.stroke();
    };

解决了，我在css中给canvas加了一个背景色，为了看效果，后面忘记取消了，后面全都可以了

0

0

Lyn

2017-06-27

具体代码贴一下，我猜测有可能是你清空了画布。

0

0