Html5canvas画趋势图柱状图.docVIP

Html5 canvas画趋势图、柱状图 首先，请确保你调试程序使用的浏览器支持html5。（火狐、google chrome、ie9） 然后，选择一个认识html5标签的开发环境，我使用的是vs2010。要让VS2010识别html5页面很简单，首先安装vs2010旗舰版，然后，升级到vs2010sp1，然后打开编程环境，在“工具”—“选项”—“文本编辑器”—“HTML”—“验证”—“目标”下拉列表中选“Html5”即可。值得一提的是，VS2010对javascript的联想能力比以前的版本要好得多。 下面进入主题，怎样在客户端绘制图像。本人已经将经常用到的方法写到一个js文件中，下面直接贴上js代码，读者可以把以下代码直接复制到一个js文件中即可，后面是对函数的说明： Js代码： function DrawTrend(canvas,title,titlefont, left, right, top, bottom, data, ySegment, sXaxis, sYaxis, axisFont, color, xSegment) { var height = Number($(canvas).attr(height)); var width = Number($(canvas).attr(width)); var cxt = canvas.getContext(2d); cxt.fillStyle = #f0f0f0; cxt.clearRect(0, 0, width, height); if (data == null || data.length 1) { DrawString(cxt, 无数据, titlefont, #000000, center, middle, width / 2, height / 2); } else { DrawLine(cxt, left, height - bottom, left, top, ); DrawLine(cxt, left, height - bottom, width - right, height - bottom, ); DrawString(cxt, title, titlefont, #000000, center, middle, width / 2, top / 2); var stime = ; var subx = 0; var i = 0; var tempdata = new Array(); for (i = 0; i data.length; i++) { tempdata[i] = data[i][1]; } var Yaxis = GetYaxis(tempdata, ySegment); var yinterval = (Yaxis[0] - Yaxis[1]) / ySegment; //画纵轴间隔线 var suby = 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); DrawLine(cxt, left, suby, width - right, suby, #aaaaaa); } DrawString(cxt, String(Yaxis[1]), axisFont, , right, middle, left - 3, height - bottom); //起始纵坐标 DrawString(cxt, sYaxis, axisFont, , center, bottom, left, top - 10); //纵坐标单位 DrawString(cxt, sXaxis, , , right, bottom, width - 3, height - bottom); //横坐标单位 if (x