JS html5画布实现的简单绘制折线图效果示例

本文实例讲述了JS html5画布实现的简单绘制折线图效果。分享给大家供大家参考，具体如下：

1、实例代码：

！DOCTYPE html html head meta charset=' utf-8 ' title画图/title style # DivContainer { margin-top : 20px；文本对齐：中心；} # cv { width: 300px高度： 200像素；边框-bottom: 2px实心# 000;边框-左侧： 2px实心# 000;}/style/head body div id=' div container '铝锭价走势图br/画布id='cv '你的设备不支持图表数据显示/canvas/div脚本(function(){ window。onload=function(){//数据源var dict=[ {x: '2015-04-24 '，y: 13400}，{x: '2015-04-25 '，y: 13380}，{x: '2015-04-26 '，y: 13370}，{x: '2015-04-27 '，y 3360 133370 }，数据源提取var len=dict.lengthvar xArr=[]，yArr=[]，tmp _ YarR=[]；for(var I=0；伊琳；I){ xarr。推(I * 60)；tmp_yArr.push(dict[i]).y)；} var tmp _ MinY=Math。量滴apply(Math，tmp _ YarR)；//最小值var tmp _ MaxY=Math。最大值apply(Math，tmp _ YarR)；//最大值if(tmp _ MaxY-tmp _ MinY=100){ for(var I=0；伊琳；I){ YarR。push(tmp _ YarR[I]-tmp _ MinY 50)；//与最小的做比较} } else{//如果相差太大会导致图表不美观for(var I=0；伊琳；I){ YarR。push(tmp _ YarR[I]/500)；} } var minY=Math.min.apply(Math，YarR)；var maxY=Math.max.apply(Math，YarR)；//画布准备var canvas=文档。getelementbyid(' cv ')；//获取帆布画布var CTX=画布。get context(' 2d ')；//画折线for(var I=0；伊琳；I){ var x=XaRR[I]；var y=MaxY-YarR[I]MinY；if(i===0){ ctx .moveTo(x，y)；} else{ ctx .lineTo(x，y)；} } ctx .笔画();//画点for(var I=0；伊琳；I){ var x=XaRR[I]；var y=MaxY-YarR[I]MinY；var xMemo=dict[i].x；var YmeMo=' dict[I].y；CTX。begin path()；ctx.fillStyle=' # 000(x，y，2，0，2 *数学. PI)；//画点CTX。fill()；ctx.fillText(yMemo，x 3，y-10)；ctx.fillText(xMemo，x 3，canvas.height - 10，40)；//画文字} } })();/script /body/html2、运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图形绘制技巧总结》 、 《JavaScript图片操作技巧大全》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。