纯js原生-响应式柱状图表
话不多说，直接上代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>js柱状统计图</title>
<style type="text/css"> /*样式*/ body{ background-color: #eee; } #box{ border:solid 1px #B3B3DC; position: relative; margin: 0 auto; } #myChart{ position: relative; margin-top: 40px; } #yMes{ position: absolute; left: 0; top: 0; } #xMes{ position: absolute; right: 0; bottom: 0; } /*工具栏 -- 新增、删除*/ #tools{ width: 98%; height: 30px; line-height: 30px; margin: 10px auto; } #insert-box{ float: left; margin-left: 10px; } #clearAll-btn{ float: right; background-color: red; margin-right: 10px; color: #fff; margin-top: 2px; } button{ border-radius: 5px; border: 0; width: 80px; height: 28px; outline:none; background-color: #B3B3DC; cursor: pointer; } input{ border-radius: 5px; border: 0; width: 150px; height: 25px; outline:none; } #black-shade{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: black; opacity: .5; z-index: 10; display: none; } #white-shade{ width: 30%; height: 200px; position: fixed; top: 25%; left: 35%; background-color: #fff; z-index: 20; border-radius: 10px; display: none; text-align: center; } #white-shade-title{ width: 100%; height: 30px; line-height: 30px; background-color: #eee; border-radius: 10px 10px 0 0; } #white-shade-content{ width: 100%; height: 100px; line-height: 100px; } #white-shade-btns{ width: 100%; height: 70px; line-height: 70px; } #yesClearAll-btn{ background-color: red; } </style>
</head>
<body>
<div id="box">
<span id="yMes">GDP数值（亿）</span>
<span id="xMes">城市</span>
<!--图表块-->
<div id="myChart">
</div>
</div>
<!--工具栏-->
<div id="tools">
<div id="insert-box">
<input id="newCity" type="text" placeholder="城市">
<input id="newNumber" type="number" placeholder="GDP数值（亿）">
<button id="insert-btn">新增</button>
</div>
<button id="clearAll-btn">清空</button>
</div>
<!--弹出确认框-->
<div id="black-shade"></div>
<div id="white-shade">
<div id="white-shade-title">提示</div>
<div id="white-shade-content">确认删除所有记录？</div>
<div id="white-shade-btns">
<button id="yesClearAll-btn">确认</button>
<button id="close-btn">关闭</button>
</div>
</div>
<script type="text/javascript"> var myData = [["北京", 30000], ["上海", 33000], ["广州", 20000], ["上海", 25000], ["北京", 28000], ["上海", 30000], ["北京", 26000], ["上海", 32000]]; var ic = document.getElementById("myChart"), //图表的容器 box = document.getElementById("box"); var myBoxWidth = window.innerWidth * 0.96, myBoxHeight = window.innerHeight - 100; box.style.width = myBoxWidth + "px"; box.style.height = myBoxHeight + "px"; var myWidth = myBoxWidth - 40, myHeight = myBoxHeight - 60; ic.style.width = myWidth + "px"; ic.style.height = myHeight + "px"; //响应式 window.onresize = function(){ myBoxWidth = window.innerWidth * 0.96; myBoxHeight = window.innerHeight - 100; box.style.width = myBoxWidth + "px"; box.style.height = myBoxHeight + "px"; myWidth = myBoxWidth - 40; myHeight = myBoxHeight - 60; ic.style.width = myWidth + "px"; ic.style.height = myHeight + "px"; // 清屏 ic.innerHTML = ""; toDrawingChart(myData); toShowTipMessage(); } window.onload = function () { toDrawingChart(myData); toShowTipMessage(); }; //绘制图标函数 function toDrawingChart(myData) { //数据处理 var xData = [], yData = [], yMaxData = 0, xDataLen, scale = 0; for(var i = 0, myDataLen = myData.length; i < myDataLen; i++){ xData.push(myData[i][0]); yData.push(myData[i][1]); } yMaxData = Math.max.apply(null, yData); xDataLen = xData.length; if (xData != null) { var heightPercent = myHeight / yMaxData, //计算以最大值为基准的每像素显示比例，百分比 widthNum = (myWidth-70) / xDataLen;//70包括左边标尺的65 还有右边空余的5 for (var i = 0, yDataLen = yData.length; i < yDataLen; i++) { //柱子 var col = document.createElement("div"); col.id = "col_" + i + "_" + yData[i]; col.style.left = widthNum*i + 65 + "px"; col.style.height = Math.round(heightPercent * yData[i]) + "px"; col.style.width = widthNum + "px"; col.style.position = "absolute"; col.style.overflow = "hidden"; col.style.background = "#1280ef"; col.style.borderLeft = "1px solid #eee"; col.style.display = "block"; col.style.top = myHeight - Math.round(heightPercent * yData[i]) + "px";//距离容器上边框的距离 ic.appendChild(col); //x轴 var cityrow = document.createElement("div"); cityrow.id = "cityrow_" + i; cityrow.style.left = widthNum * i + 65 + widthNum / 2.2 + "px";//每个city的位置 65是左边标尺 2.2为了居中 cityrow.style.width = widthNum + "px"; cityrow.style.position = "absolute"; cityrow.style.top = heightPercent * yMaxData + "px"; cityrow.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + xData[i] + '</span>'; ic.appendChild(cityrow); } //绘制标尺线 for (var i = 0; i < 10; i++) { var titley = document.createElement("div"); titley.setAttribute("class", "tity"); titley.style.width = "50px"; titley.style.position = "absolute"; titley.style.top = myHeight / 10 * i - 13 + "px"; //减13为了字与线平齐 titley.style.left = "15px"; titley.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + Math.round(yMaxData - (yMaxData / 10) * i) + '</span>'; ic.appendChild(titley); var liney = document.createElement("div"); liney.setAttribute("style", "left:60px; border-top:1px dotted #B9B9B9; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; "); liney.style.width = myWidth - 65 + "px"; liney.style.top = myHeight / 10 * i + "px"; ic.appendChild(liney); } } else { icArea.innerHTML = '<div style="color:#0066cc; font-size:12px; margin:20px 0 0 80px;">暂无统计数据</div>'; } } //鼠标提示显示详细数据 function toShowTipMessage() { var nodes = document.getElementById("myChart").getElementsByTagName("div"); for (var i = 0; i < nodes.length; i++) { nodes[i].onmouseover = function () { var temp = this.id.split("_"); var type = temp[0]; var num = temp[2]; var tipMessage = ""; if (type == "col") { var tip = document.createElement("div"); tip.id = "TipMessage"; tip.style.position = "absolute"; tip.style.top = (parseInt(document.getElementById(this.id).style.top.replace("px", "")) - 20) + "px"; tip.style.left = document.getElementById(this.id).style.left; tipMessage = "GDP数值" + num + "（亿）"; tip.innerHTML = '<span style="font-size:12px; display:block; height:20px; background-color:transparent; padding:0px 2px; line-height:20px;">' + tipMessage + '</span>'; document.getElementById("myChart").appendChild(tip); } } nodes[i].onmouseout = function () { var tip = document.getElementById("TipMessage"); document.getElementById("myChart").removeChild(tip); } } } //新增 document.getElementById('insert-btn').onclick = function () { var newCity = document.getElementById('newCity').value; var newNumber = document.getElementById('newNumber').value; if (newCity != '' && newNumber != ''){ myData.push([newCity, newNumber]); // 清屏 ic.innerHTML = ""; toDrawingChart(myData); toShowTipMessage(); document.getElementById('newCity').value = ""; document.getElementById('newNumber').value = ""; document.getElementById('newCity').focus(); } else { alert('城市或GDP数值不能为空！'); } }; document.onkeydown = function(event) { if (event.keyCode == 13) { console.log(1); document.getElementById('insert-btn').onclick(); } }; var blackShade = document.getElementById('black-shade'), whiteShade = document.getElementById('white-shade'); //清空 document.getElementById('clearAll-btn').onclick = function () { blackShade.style.display = 'block'; whiteShade.style.display = 'block'; } //确认清空 document.getElementById('yesClearAll-btn').onclick = function () { myData = []; // 清屏 ic.innerHTML = ""; toDrawingChart(myData); toShowTipMessage(); blackShade.style.display = 'none'; whiteShade.style.display = 'none'; } //关闭 document.getElementById('close-btn').onclick = function () { blackShade.style.display = 'none'; whiteShade.style.display = 'none'; } </script>
</body>
</html>