动态折线图

HTML代码：ahttp-equiv="keywords"content="keyword1,keyword2,keyword3">tahttp-equiv="description"content="thisismypage">-equiv="content-type"content="text/html;charset=UTF-8">type="text/javascript"src="js/new_file.js">"stylesheet"href="css/new_file.css"type="text/css">dy>ht="500">ne"width="1000"height="500">id="div">vas>CSS代码：.div{position:absolute;left:ca
lc(50%-100px);top:100px;background:lightskyblue;}.boack{po
sition:absolute;left:150px;top:100px;/background-color:light
skyblue;/}.canvas{width:1000px;height:400px;}.line{transition
:cubic-bezier(.25,.1,.25,1);}JS代码：varcanvas=null;varcanva
sline=null;varstationCanvas=null;varctx=null;varlinectx
=null;varstationCtx=null;varwidth=0;//canvas的宽varheight
=0;//canvas的高varxMin=0;//X轴的最小标记坐标varxMax=0;//X轴的最大标记坐
标varxPx=0;//X轴的像素varyMax=0;//Y轴的最大标记坐标varyMin=0;//Y轴
的最小标记坐标varYMax=0;varYMin=10000;varyPx=0;//Y轴的像素varvXMa
x=30;//标注X轴最大值varvXMin=1;//标注X轴最小值varvYMax=9;//标注Y轴最大值var
vYMin=0;//标注Y轴最小值vardownx=0;vardowny=0;varupx=0;varu
py=0;//varsetp=0;//画线的步长varanaX=29;//将X分成几份varanaY=
9;varborder=20;//外边框varvXSetp=0;varvYSetp=0;varjson=
null;varindex=0;varindexEnd=0;varlength=0;window.onload
=function(){json=[{y:400},{y:120},{y:30},{y:100},{
y:160},{y:60},{y:70},{y:300},{y:200},{y:100},{y:200}
,{y:200},{y:30},{y:100},{y:56},{y:60},{y:70},{y:150
},{y:200},{y:100},{y:100},{y:203},{y:30},{y:100},{y:
56},{y:60},{y:70},{y:300},{y:200},{y:100}//{y:100},{
y:200},{y:100},{y:200},{y:100},{y:200},{y:100},{y:200},{y:100},{y
:200},{y:100},//{y:200},{y:100},{y:200},{y:100},{y:200},{y:100}
,{y:200},{y:100},{y:200},{y:100},{y:200},];length=json.length
;indexEnd=length-1;canvas=document.getElementById("backgr
ound");canvasline=document.getElementById("line");stationCanv
as=document.getElementById("station");width=canvas.width;he
ight=canvas.height;yMin=20;yMax=height-border;yPx=yM
ax-yMin;xMax=width-border;xMin=20;xPx=xMax-xMin;/
/setp=xPx/anaX;ctx=canvas.getContext("2d");linectx=can
vasline.getContext("2d");stationCtx=stationCanvas.getContext("
2d");set(vXMax,vXMin,vYMax,vYMin);};functionset(vxmax,vxmin
,vymax,vymin){//重置vMax和vMinvXMax=vxmax;vXMin=vxmin;v
YMax=vymax;vYMin=vymin;vXSetp=(vXMax-vXMin)/anaX;vYS
etp=(vYMax-vYMin)/anaY;//console.log(vYMax-vYMin);yJud
ge();draw();//drawStation();drawLine();}functiondrawLine(){
linectx.clearRect(0,0,width,height);stationCtx.clearRect(0,
0,width,height);linectx.save();linectx.lineWidth=0.5;linec
tx.strokeStyle="black";linectx.beginPath();vara=0;for(va
ri=index;i+1<=indexEnd;i++){varx1=a(xMax-xMin)
/(indexEnd-index)+border;varx2=(a+1)(xMax-xMin)
/(indexEnd-index)+border;//linectx.moveTo(x1,height-jso
n[i].y);//画连贯的线的时候，尽量别用moveTo,就在开头用一个就好。然后多用lineTo。//linectx.qu
adraticCurveTo((x1+x2)/2,(height-json[i].y+height-json
[i+1].y)/2,x2,height-json[i].y);linectx.lineTo(x2,heigh
t-json[i+1].y);a++;}//ctx.beginPath();linectx.fillStyle=
"#ffffff";linectx.strokeStyle="#156156";//linectx.moveTo(x2,
height-json[i+1].y);linectx.lineTo(x2,0);//linectx.moveTo(x2,0
);linectx.lineTo(border,0);//linectx.moveTo(border,0);linectx
.lineTo(border,height-json[0].y);//console.log(json[29].y);/
/linectx.closePath();linectx.fill();linectx.stroke();linectx.
restore();}functionyJudge(){for(vari=0;i++){YMax=yMax>json[i].y?yMax:json[i].y;YMin=yMinson[i].y?yMin:json[i].y;}//console.log(yMin,yMax);}functio
ndraw(){//ctx.strokeStyle="white";varlinearGradient1=ct
x.createLinearGradient(0,0,0,height-border);//渐变色设置linearGradi
ent1.addColorStop(0,''#00BBFF'');linearGradient1.addColorStop(1,
''#ffffff'');ctx.fillStyle=linearGradient1;ctx.fillRect(border,
0,width-2border,height-border);//ctx.fillStyle="#ffffff";//
ctx.fillRect(border,0,width-border2,height-border2)
;ctx.restore();ctx.save();ctx.strokeStyle="black";ctx.strok
eRect(border,0,width-2border,height-border);varlinearGradient1
=ctx.createLinearGradient(0,0,0,height-border);linearGradien
t1.addColorStop(0,''#00BBFF'');linearGradient1.addColorStop(1,''#
ffffff'');ctx.fillStyle=linearGradient1;ctx.fillRect(border,0,
width-2border,height-border);for(vari=0;i<=anaX;i++){
varvalue=vXMin+vXSetpi;varx=(value-vXMin)xPx/(
vXMax-vXMin);ctx.strokeText(value.toFixed(0),x+border,yMax+20);}for(vari=0;i<=anaY;i++){varvalue=vYMin+vYSetpi;varProperty=value(YMax-YMin)/(vYMax-vYMin);console.log(vYSetp);vary=(value-vYMin)yPx/(vYMax-vYMin);ctx.strokeText(Property.toFixed(0),xMin-border,height-y-border);}ctx.restore();}效果如下：