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


Posted in Javascript onMarch 13, 2017

本文实例讲述了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、运行效果图如下:

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 #Javascript
jsonp跨域请求实现示例
Mar 13 #Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 #Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 #Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php通过session防url攻击方法
2014/12/10 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
详解Python中的测试工具
2019/06/09 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
学生自我评语
2015/01/04 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书