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中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
countup.js实现数字动态叠加效果
Oct 17 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 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自定义hash函数实例
2015/05/05 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
使用Python绘制图表大全总结
2017/02/11 Python
Mac 上切换Python多版本
2017/06/17 Python
Python检测网络延迟的代码
2018/05/15 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
篮球比赛策划方案
2014/06/05 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
区域经理岗位职责
2015/02/02 职场文书
企业计划生育责任书
2015/05/09 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang