JavaScript实现的DOM绘制柱状图效果示例


Posted in Javascript onAugust 08, 2018

本文实例讲述了JavaScript实现的DOM绘制柱状图效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3water.com JavaScript DOM绘制柱状图</title>
    <style>
      #chart-wrap{ 
        width:910px; 
        height:240px;
        border:solid 1px #B3B3DC;
        position:relative; 
        top:40px; 
        left:20px;
      } 
    </style>
  </head>
  <body>
    <div id="chart-wrap"></div>
    <script>
      function renderChart(data) {
        var cw = document.getElementById("chart-wrap"); 
        cw.innerHTML = ""; 
        var max = 0; 
        for (var index in data) {
          if (data[index] > max)
            max = data[index];
        }
        var percent = 180 / max; 
        var i = 0;
        for (var index in data) { 
          var bar = document.createElement("div"); 
          bar.id = index + "_" + data[index]; 
          bar.style.height = Math.round(percent * data[index]) + "px"; 
          bar.style.width = "40px";
          bar.style.left = (i * 40) + 165 + "px"; 
          bar.style.marginLeft = (i * 20) + "px"; 
          bar.style.position = "absolute"; 
          bar.style.background = "none repeat scroll 0 0 pink";
          bar.style.overflow = "hidden";
          bar.setAttribute("title", index + ":" + data[index]);
          bar.style.display = "block"; 
          bar.style.top = 200 - Math.round(percent * data[index]) + "px"; 
          cw.appendChild(bar); 
          var axis = document.createElement("div"); 
          axis.id = "axis_" + i; 
          axis.style.width = "40px"; 
          axis.style.left = (i * 40) + 165 + "px"; 
          axis.style.marginLeft = (i * 20) + "px";
          axis.style.textAlign = "center"; 
          axis.style.position = "absolute"; 
          axis.style.top = "205px"; 
          axis.innerHTML = '<span style="font-size:12px; color:grey;"> ' + i + '</span>'; 
          cw.appendChild(axis); 
          i++;
        }   
        for (var i = 0; i < 5; i++) { 
          var ayis = document.createElement("div"); 
          ayis.style.width = "30px"; 
          ayis.style.position = "absolute"; 
          ayis.style.top = (36 * i) + (20 - 6) + "px"; 
          ayis.style.left = "140px"; 
          ayis.innerHTML = '<span style="font-size:12px; color:grey;"> ' + Math.round(max - (max / 5) * i) + '</span>'; 
          cw.appendChild(ayis); 
          var line = document.createElement("div"); 
          line.setAttribute("style", "width:580px; left:165px; border-top:1px dotted grey; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; "); 
          line.style.top = (36 * i) + 20 + "px"; 
          cw.appendChild(line); 
        } 
      }
      var data = [10,60,50,30,40,80,20,70,100,90];
      renderChart(data);
    </script>
  </body>
</html>

运行效果如下:

JavaScript实现的DOM绘制柱状图效果示例

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

Javascript 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 #Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 #Javascript
详解如何在vue-cli中使用vuex
Aug 07 #Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
You might like
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js 代码优化点滴记录
2012/02/19 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python修改字典键(key)的方法
2019/08/05 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
办公室主任岗位职责
2013/11/08 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
开发房地产协议书
2014/09/14 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
数学教师求职信范文
2015/03/20 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记