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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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 归并排序 数组交集
2011/05/10 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php中__toString()方法用法示例
2016/12/07 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python中验证码连通域分割的方法详解
2018/06/04 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
保护野生动物倡议书
2014/05/16 职场文书
社区娱乐活动方案
2014/08/21 职场文书
超市采购员岗位职责
2015/04/07 职场文书
物业公司管理制度
2015/08/05 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python