html5画坐标图 - 编程论坛

只有本站会员才能查看附件，请登录

程序代码：

<html>
<head>
<meta charset="utf-8">
<style>
h1 {text-align:center}
</style>
<script>
//id:string画布的id,x标记:string,y标记:string,数据:array要展示的数据,单位:string,标记:array数据对应的标记
var $=function(a){return document.getElementById(a)}
function 画坐标(a){
    var id=a.id || 0;
    var canvas1=$(id);
    canvas1.width=1000;
    canvas1.height=500;
    var context=canvas1.getContext("2d");
    var 标记=a.标记 || [];
    var 单位=a.单位 || '';
    var x标记=a.x标记 || 'X轴';
    var y标记=a.y标记 || 'Y轴';
    var 数据=a.数据 || [1,2,3,4];
    var maxy=Math.max.apply(null,数据);
    var dn=(maxy>>0).toString().length-1;
    for(var i=0;i<数据.length;i++){
        数据[i]=Math.round(数据[i]/Math.pow(10,dn)*100)/100;
    }
    maxy/=Math.pow(10,dn);
    var bdy=maxy/3;
    var x=0;
    var y=0;
    var kd=0;
    var h=canvas1.height;
    var w=canvas1.width;
    var x0=0.1*w;
    var y0=0.9*h;
    //坐标轴起点
    context.moveTo(0.1*w,0.1*h);
    context.lineTo(0.1*w,0.9*h);
    context.lineTo(0.9*w,0.9*h);
    //坐标轴
    context.moveTo(0.09*w,0.115*h);
    context.lineTo(0.1*w,0.1*h);
    context.lineTo(0.11*w,0.115*h);
    context.moveTo(0.885*w,0.89*h);
    context.lineTo(0.9*w,0.9*h);
    context.lineTo(0.885*w,0.91*h);//箭头
    context.font="30pt Calibri";
    context.fillText('O',x0-40,y0+40);//原点
    context.strokeStyle='black';
    context.lineWidth=2;
    context.stroke();//以上是画坐标轴
    context.beginPath();
    context.font="20pt Calibri";
    kdx=0.8*w/(数据.length+1);
    x=x0+kdx;
    y=y0+40;//横坐标标度
    for(var i=0;i<数据.length;i++){
        context.fillText((标记.length==0)?i+1:标记[i],x,y);
        x+=kdx;
    }
    context.fillText(x标记,x,y);
    kdy=0.2*h;
    y=y0-kdy;//纵坐标标度
    x=x0-40;
    for(var i=0;i<3;i++){
        context.fillText('-',x,y);
        y-=kdy;
    }
    context.fillText(y标记,x,y);
    var t=[];
    for(var i=0;i<数据.length;i++){
        t[i]=数据[i]/bdy;
    }//画点的数值
    y=y0;
    x=x0+kdx;
    context.arc(x,y-kdy*t[0],6,0,2*Math.PI);
    context.fillStyle="red";
    context.fill();
    context.beginPath();
    context.moveTo(x,y-kdy*t[0]);
    context.fillText(数据[0],x,y-kdy*t[0]-20);
    context.fillText('单位:'+Math.pow(10,dn)+单位,0.8*w,0.1*h);
    for(var i=0;i<数据.length;i++){
        x+=kdx;
        context.lineTo(x,y-kdy*t[i+1]);
        context.fillText(数据[i+1],x,y-kdy*t[i+1]-20);
        context.strokeStyle='red';
        context.stroke();
        context.beginPath();
        context.fillStyle="red";
        context.arc(x,y-kdy*t[i+1],6,0,2*Math.PI);
        //context.stroke();
        context.fill();
        context.moveTo(x,y-kdy*t[i+1]);
    }
}
</script>
</head>
<body>
<h1>口服地高辛血药浓度（谷浓度）</h1>
<canvas id=1></canvas>
</body>
<script>
画坐标({数据:[.9,.5],标记:['预期','实测'],y标记:'浓度',id:1,单位:'ug/次'});
</script>
</html>