Html5 canvas画趋势图、柱状图.doc

《Html5 canvas画趋势图、柱状图.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Html5canvas画趋势图、柱状图首先，请确保你调试程序使用的浏览器支持html5o(火狐、googlechromeie9)然后,选择一个认识html5标签的开发环境，我使用的是vS2010。要让VS2010识别html5页面很简单，首先安装vs2010旗舰版，然后，升级到vs2010spl,然后打开编程环境，在“工具”一“选项”一“文本编辑器”一“HTML”—“验证”一“目标”下拉列表中选即可。值得一提的是，VS2010对javascripl的联想能力比以前的版本要好得多。下而进入主题，怎样在客户端绘制

2、图像。本人己经将经常用到的方法写到一个js文件中，下面直接贴上js代码，读者可以把以下代码直接复制到一个js文件中即可，后面是对函数的说明：Js代码：ftinctionDrawTrend(canvas,title,titlefont,left,right,top,bottom,data,ySegment.sXaxis,sYaxis,axisFont,color,xSegment){varheight=Number($(canvjis).attr(,height,));varwidth=Nuniber($(ca

3、nvas).attr(,width,));varext=canvas.getContext(H2dH);cxt.fillStyle=”#FOfOfO”；cxt.clearRect(O,0,width,height);if(data==nullIIdatalength<1){DrawString(cxt,”无数据”,titlefimt,”#000000”,"center",,,middle,width/2,height/2);)else{DrawLinc(cxt,left,height-bottom,left

4、,top,HK);DrawLine(cxt,left,height・bottom,width-right,height・bottom,,M');DrawString(cxt,title,titlefont,"#000(X)0","center","middle",width/2,top/2);varstime=,M,;varsubx=0;vari=0;vartempdata=newArray();for(i=0;i

5、

6、11;}varYaxi

7、s=GetYaxis(tempdata,ySegment);varyinterval=(Yaxis[0]・Yaxis[l])/ySegment;〃画纵轴间隔线varsuby=0:for(i=1;i<=ySegment;i++){suby=height-bottom-(height-(bottom+top))*i/ySegment;//副横轴纵坐标DrawString(cxt,String(Yaxis[1]+i*yinterval),axisFont,"right","middle",left-3,suby);

8、DrawLine(cxt,left,suby,width-right,suby,H#aaaaaaH);}DrawString(cxt,String(Yaxis[l]),axisFont,HrightH,Mmiddlelleft-3,height-bottom);//起始纵坐标DrawString(cxt,sYaxis,axisFont,"「center","bottom”，left,top-10);〃纵坐标单位DrawString(cxt,sXaxis,"right","bottom*',width-3,h

9、eight-bottom);//横坐标单位if(xSegment!=null){〃找出横轴间隔点时间(分段)varn=datalength/xSegment;varxintcr=(width-(left+right))/xSegment;//画横轴间隔线for(i=1;i<=xSegment;i++){subx=left+xinter*i;//副横轴坐标stirne=String(data[parselnt(n*i)-l][0]);DrawString(cxt,stime,axisFont,HcenterM,

10、HtopH,subx,height-bottom+3);DrawLine(cxt,subx,top,subx,height-bottom,°#aaaaaaH);)//通过数值计算点坐标xinter=(width-(left+right))/(data.length-1);//横轴间隔像素数varpoints=newArrayO;f()r(i=0;i