资源描述:
《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;i5、
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