本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考,具体如下:
1、实例代码:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px; height: 200px; border-bottom: 2px solid #000; border-left: 2px solid #000; } </style> </head> <body> <div id="divContainer"> 铝锭价走势图<br/> <canvas id="cv">你的设备不支持图表数据显示</canvas> </div> <script> (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: 13370}, {x: "2015-04-28", y: 13380} ] //数据源提取 var len = dict.length; var xArr = [], yArr = [], tmp_yArr = []; for(var i=0; i<len; i++){ xArr.push(i * 60); tmp_yArr.push(dict[i].y); } var tmp_minY = Math.min.apply(Math, tmp_yArr);//最小值 var tmp_maxY = Math.max.apply(Math, tmp_yArr);//最大值 if(tmp_maxY - tmp_minY <= 100){ for(var i=0; i<len; i++){ yArr.push(tmp_yArr[i] - tmp_minY + 50);//与最小的做比较 } } else{//如果相差太大会导致图表不美观 for(var i=0; i<len; i++){ yArr.push(tmp_yArr[i] / 500); } } var minY = Math.min.apply(Math, yArr); var maxY = Math.max.apply(Math, yArr); //canvas 准备 var canvas = document.getElementById("cv");//获取canvas画布 var ctx = canvas.getContext("2d"); //画折线 for(var i=0 ;i<len; i++){ var x = xArr[i]; var y = maxY - yArr[i] + minY; if(i === 0){ ctx .moveTo(x, y); } else{ ctx .lineTo(x, y); } } ctx .stroke(); //画点 for(var i=0; i<len; i++){ var x = xArr[i]; var y = maxY - yArr[i] + minY; var xMemo = dict[i].x; var yMemo = "¥" + dict[i].y; ctx.beginPath(); ctx.fillStyle = "#000"; ctx.arc(x, y, 2, 0, 2*Math.PI);//画点 ctx.fill(); ctx.fillText(yMemo, x + 3, y - 10); ctx.fillText(xMemo, x + 3, canvas.height - 10, 40);//画文字 } } })(); </script> </body> </html>
2、运行效果图如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图形绘制技巧总结》、《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
问题内容: 在我的程序中,我想绘制一个简单的分数线图。我有一个文本文件,并且在每一行上是一个整数分数,我已阅读该分数,并希望将其作为参数传递给图形类。我在实现graph类时遇到了一些麻烦,我所看到的所有示例都将它们的方法和它们的main放在同一个类中,而我不会。 我希望能够将数组传递给对象并生成图形,但是在调用我的绘画方法时,它要求我提供Graphics g …这是到目前为止的内容: 现在,我已经
本文向大家介绍jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】,包括了jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery插件HighCharts绘制简单2D折线图效果。分享给大家供大家参考,具体如下: 1、实例代码: 2、运行效果图如下: 附:完整实例代码点击此处本站下
本文向大家介绍js实现简单的轮播图效果,包括了js实现简单的轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 代码: js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Python基于Matplotlib库简单绘制折线图的方法示例,包括了Python基于Matplotlib库简单绘制折线图的方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python基于Matplotlib库简单绘制折线图的方法。分享给大家供大家参考,具体如下: Matplotlib画折线图,有一些离散点,想看看这些点的变动趋势: 离散点的走势: 更多关于Pytho
本文向大家介绍JS+CSS实现的简单折叠展开多级菜单效果,包括了JS+CSS实现的简单折叠展开多级菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究
本文向大家介绍python绘制分布折线图的示例,包括了python绘制分布折线图的示例的使用技巧和注意事项,需要的朋友参考一下 用Python 绘制分布(折线)图,使用的是 plot()函数。 一个简单的例子: 结果: 以上就是python绘制分布折线图的示例代码的详细内容,更多关于python绘制分布折线图的资料请关注呐喊教程其它相关文章!
本文向大家介绍JS实现简单抖动效果,包括了JS实现简单抖动效果的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 好了,代码到此结束,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍js实现简单的联动菜单效果,包括了js实现简单的联动菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下: 这是一个最简单的js联动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。 运行效果截图如下: 在线演示地址如下: http://dem