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>
