用html5绘制折线图的实例代码


Posted in HTML / CSS onMarch 25, 2016
XML/HTML Code复制内容到剪贴板
  1. <html>    
  2. <canvas id="a_canvas" width="1000" height="700"></canvas>    
  3. <script>    
  4.          
  5.                (function (){    
  6.      
  7.         window.addEventListener("load", function(){    
  8.      
  9.           var data = [100,-1000,0,700];    
  10.      
  11.           // 获取上下文    
  12.           var a_canvas = document.getElementById('a_canvas');    
  13.           var context = a_canvas.getContext("2d");    
  14.      
  15.      
  16.           // 绘制背景    
  17.           var gradient = context.createLinearGradient(0,0,0,300);    
  18.      
  19.      
  20.          // gradient.addColorStop(0,"#e0e0e0");    
  21.           //gradient.addColorStop(1,"#ffffff");    
  22.      
  23.      
  24.           context.fillStyle = gradient;    
  25.      
  26.           context.fillRect(0,0,a_canvas.width,a_canvas.height);    
  27.      
  28.               
  29.           // 描绘边框    
  30.           var grid_cols = data.length + 1;    
  31.           var grid_rows = 4;    
  32.           var cell_height = a_canvas.height / grid_rows;    
  33.           var cell_width = a_canvas.width / grid_cols;    
  34.           context.lineWidth = 1;    
  35.           context.strokeStyle = "#a0a0a0";    
  36.      
  37.           // 结束边框描绘    
  38.           context.beginPath();    
  39.           // 准备画横线    
  40.          /*for (var col = 0; col <= grid_cols; col++) {    
  41.             var x = col * cell_width;    
  42.             context.moveTo(x,0);    
  43.             context.lineTo(x,a_canvas.height);    
  44.           }    
  45.           // 准备画竖线    
  46.           for(var row = 0; row <= grid_rows; row++){    
  47.             var y = row * cell_height;    
  48.             context.moveTo(0,y);    
  49.             context.lineTo(a_canvas.width, y);    
  50.           }*/    
  51.             //划横线    
  52.             context.moveTo(0,a_canvas.height/2);    
  53.             context.lineTo(a_canvas.width,a_canvas.height/2);    
  54.                  
  55.             //画竖线    
  56.           context.moveTo(0,0);    
  57.             context.lineTo(0,a_canvas.height);    
  58.              
  59.              
  60.           context.lineWidth = 1;    
  61.           context.strokeStyle = "#c0c0c0";    
  62.           context.stroke();    
  63.      
  64.           var max_v =0;    
  65.               
  66.           for(var i = 0; i<data.length; i++){    
  67.               var d=0;    
  68.               if(data[i]<0)    
  69.               {dd=d-data[i];    
  70.                   }    
  71.                   else{d=data[i];};    
  72.             if (d > max_v) { max_v =d};    
  73.           }    
  74.           max_vmax_v = max_v * 1.1;    
  75.           // 将数据换算为坐标    
  76.           var points = [];    
  77.           for( var i=0; i < data.length; i++){    
  78.             var vdata[i];    
  79.             var px = cell_width * (i +1);    
  80.             var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;    
  81.             points.push({"x":px,"y":py});    
  82.           }    
  83.           // 绘制折现    
  84.           context.beginPath();    
  85.           context.moveTo(points[0].x, points[0].y);    
  86.           for(var i1; i< points.length; i++){    
  87.             context.lineTo(points[i].x,points[i].y);    
  88.           }    
  89.      
  90.      
  91.           context.lineWidth = 2;    
  92.           context.strokeStyle = "#8BA9FF";    
  93.           context.stroke();    
  94.      
  95.           //绘制坐标图形    
  96.           for(var i in points){    
  97.             var p = points[i];    
  98.             context.beginPath();    
  99.             context.arc(p.x,p.y,4,0,2*Math.PI);    
  100.             //实心圆    
  101.            /*    
  102.             context.fillStyle = "#000";*/    
  103.             //空心圆    
  104.             context.strokeStyle = "#000";    
  105.             context.stroke();    
  106.             context.fillStyle="white";    
  107.             context.fill();    
  108.           }    
  109.           //添加文字    
  110.           for(var i in points)    
  111.           {  var p = points[i];    
  112.             context.beginPath();    
  113.             context.fillStyle="black";    
  114.             context.fillText(data[i], p.x + 1, p.y - 15);    
  115.                    
  116.               }    
  117.         },false);    
  118.       })();    
  119.      
  120.            
  121. </script>    
  122. </html>  

运行结果如下:

用html5绘制折线图的实例代码

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

原文地址:http://www.cnblogs.com/shuniuniu/archive/2016/03/25/5318717.html

HTML / CSS 相关文章推荐
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 #HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 #HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 #HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 #HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 #HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 #HTML / CSS
You might like
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
详解Document.Cookie
2015/12/25 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python操作mysql数据库
2017/03/05 Python
python:print格式化输出到文件的实例
2018/05/14 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
运动会跳远广播稿
2014/02/04 职场文书
高中生学习计划书
2014/09/15 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
python计算列表元素与乘积详情
2022/08/05 Python