js绘制折线图,jsp页面实现折线图代码

　　XML/HTML代码复制内容到剪贴板html canvasid= a _ canvas width= 1000 height= 700 /canvas script(function(){ window。addevent listener( load ，function(){ vardata=[100，-1000，0，700]；//获取上下文vara _ canvas=文档。getelementbyid( a _ canvas )；var context=a _ canvas。获取上下文(“2d”)；//绘制背景var渐变=上下文。createlanegradient(0，0，0，300)；//gradient.addColorStop(0， # E0 E0 )；//gradient.addColorStop(1， # ffffff )；context . fill style=gradient context . fill rect(0，0，a_canvas.width，a_canvas。身高)；//描绘边框var grid _ cols=data。长度1；var grid _ rows=4；var cell _ height=a _画布。高度/grid _ rows；var cell _ width=a _画布。宽度/grid _ cols；语境。线宽=1；语境。笔画样式= # a0a0a 0//结束边框描绘语境。begin path()；//准备画横线/* for(var col=0；col=grid _ cols cl){ varx=col * cell _ width；context.moveTo(x，0)；context.lineTo(x，a _ canvas。身高)；} //准备画竖线for(varrow=0；row=grid _ rows row){ vary=row * cell _ height；context.moveTo(0，y)；context.lineTo(a_canvas.width，y)；}*///划横线context.moveTo(0，a _ canvas。身高/2)；context.lineTo(a_canvas.width，a_canvas。身高/2)；//画竖线context.moveTo(0，0)；context.lineTo(0，a _ canvas。身高)；语境。线宽=1；语境。笔画风格= # c0c0c 0语境。笔画()；var max _ v=0；for(vari=0；伊达。长度；I){ vard=0；if(data[I]0){ DD=d-data[I]；} else { d=data[I]；};if(dmax _ v){ max _ v=d }；} max _ vmax _ v=max _ v * 1.1//将数据换算为坐标var点数=[]；for(vari=0；伊达。长度；I){ varv=data[I]；varpx=cell _ width *(I 1)；varpy=a _ canvas。高度/2-a _ canvas。高度*(v/max _ v)/2；points.push({x:px， y :py })；} //绘制折现语境。begin path()；context.moveTo(points[0].x，点数[0]。y)；for(vari=1；I points . length I){ context . line to(points[I])。x，分[我].y)；}上下文。线宽=2；语境。笔画风格= # 8ba 9 ff语境。笔画()；//绘制坐标图形for(varin points){ varp=points[I]；语境。begin path()；context.arc(p.x，p.y，4，0，2*Math .PI)；//实心圆/*上下文。填充样式= # 000 ；*///空心圆context . stroke style= # 000 context。笔画()；context . fill style= white context。fill()；} //添加文字for(varin points){ varp=points[I]；语境。begin path()；context . fill style= black context . fill text(data[I]，p.x 1，p . y-15)；} },假);})();/script /html运行结果如下：

　　以上这篇用html5绘制折线图的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

　　原文地址：http://www。cn博客。com/shuniuniu/archive/2016/03/25/5318717。超文本标记语言

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。