javascript柱狀統計圖程式碼例項

admin發表於2017-04-12
JavaScript

資料統計外掛其實非常多的，也都非常的好用，也可以說不但好用，而且非常的華麗。

本章節分享一個簡單的程式碼例項，效果也很不錯，並且外觀上也算是可以。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
/*樣式*/
#consuming_time {
  font-size: 12px;
  border: solid 1px #ccc;
  background-color: #f2f6fb;
  margin: 10px 20px;
  height: 40px;
  line-height: 20px;
  padding: 5px 10px;
  width: 260px;
}
#TwentyFourHourChart {
  width: 700px;
  height: 240px;
  border: solid 1px #B3B3DC;
  position: relative;
  top: 40px;
  left: 20px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var _time = "開始繪製時間：" + thisMomentTime();
  toDrawingChart([15, 26, 32, 33, 44, 55, 66, 57, 88, 92, 67, 42, 45, 61, 105, 33, 24, 15, 36, 27, 28, 29, 10, 22], [10, 20, 22, 23, 30, 35, 50, 40, 62, 78, 60, 40, 25, 58, 95, 15, 20, 8, 25, 20, 18, 20, 5, 12]);
  _time += "<br>繪製完成時間：" + thisMomentTime();
  document.getElementById("consuming_time").innerHTML = _time;
  //顯示提示資訊
  toShowTipMessage();
};
function thisMomentTime() {
  var m = (new Date).getHours() + "時 "
      + (new Date).getMinutes() + "分 "
      + (new Date).getSeconds() + "秒 "
      + (new Date).getMilliseconds() + "毫秒";
  return m;
}
/*Array 陣列擴充套件*/
Array.prototype.max = function () {
  return Math.max.apply({}, this);
};
Array.prototype.min = function () {
  return Math.min.apply({}, this);
};
//繪製24小時分時段呼入圖形報表的函式
function toDrawingChart(/*String*/inCallsPerHour, /*String*/inCompletePerHour) {
  //頁面上唯一的一個div，作為圖表的容器
  var ic = document.getElementById("TwentyFourHourChart"); 
  if (inCallsPerHour != null) {
    //從傳入的陣列中取得陣列最大值，用到了一個自己寫的array的擴充套件方法max()
    var inCallMax = inCallsPerHour.max();
    //計算以最大值為基準的每畫素顯示比例，百分比
    var topOffsetPercent = 180 / inCallMax;
    //迴圈24小時資料
    for (var i = 0; i < inCallsPerHour.length; i++) {
      //建立一個div元素sumrow
      var sumrow = document.createElement("div");
      //為剛剛建立的div元素sumrow新增id屬性（這裡把時間，呼入電話總量資料寫入到id中，後面顯示這些資訊的時候有用）
      sumrow.id = "sumrow_" + i + "_" + inCallsPerHour[i];
      //新增屬性
      sumrow.setAttribute("class", "incallchartsumrow"); 
      //設定元素的left（每個div寬度為10px，那麼第i個元素就應該是i*10，因為還有一列10畫素的組裝圖，所以還要*2，加上距離左側40px邊距 + 每2個柱狀圖為一組之間的間隔空隙6px，所以得出如下，）
      sumrow.style.left = (i * 10) * 2 + (i * 6) + 40 + "px";
      //高度的計算，Math.round四捨五入取值，百分比的基數 乘以 當前時段的呼入資料，為統計圖的高度
      sumrow.style.height = Math.round(topOffsetPercent * inCallsPerHour[i]) + "px";
      sumrow.style.width = "10px"; //寬度10px畫素
      sumrow.style.position = "absolute"; //絕對定位
      sumrow.style.overflow = "hidden"; //超出部分隱藏
      sumrow.style.background = "none repeat scroll 0 0 #1280ef"; //背景顏色
      sumrow.style.display = "block"; //塊狀顯示
      //距離容器上邊框的距離，圖表高度200 減去 當前這個柱狀圖圖表高度
      sumrow.style.top = 200 - Math.round(topOffsetPercent * inCallsPerHour[i]) + "px";
      ic.appendChild(sumrow); //將建立的sumcow元素新增到ic容器中去
      var timerow = document.createElement("div");
      timerow.id = "timerow_" + i;
      timerow.setAttribute("class", "callnum");
      timerow.style.left = (10 * i) * 2 + (i * 6) + 40 + "px";
      timerow.style.width = "10px";
      timerow.style.position = "absolute";
      timerow.style.top = "205px";
      timerow.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + i + '</span>';
      ic.appendChild(timerow);
      var cptrow = document.createElement("div");
      cptrow.id = "cptrow_" + i + "_" + inCompletePerHour[i];
      cptrow.setAttribute("class", "incallchartsumrow");
      cptrow.style.width = "10px";
      cptrow.style.height = Math.round(topOffsetPercent * inCompletePerHour[i]) + "px";
      cptrow.style.position = "absolute";
      cptrow.style.background = "none repeat scroll 0 0 #92be0f";
      cptrow.style.left = (i * 10) * 2 + 10 + (i * 6) + 40 + "px";
      cptrow.style.display = "block";
      cptrow.style.top = 200 - Math.round(topOffsetPercent * inCompletePerHour[i]) + "px";
      ic.appendChild(cptrow);
    }
    //繪製標尺線
    for (var i = 0; i < 5; i++) {
      var tity = document.createElement("div");
      tity.setAttribute("class", "tity");
      tity.style.width = "30px";
      tity.style.position = "absolute";
      tity.style.top = (36 * i) + (20 - 6) + "px";
      tity.style.left = "15px";
      tity.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + Math.round(inCallMax - (inCallMax / 5) * i) + '</span>';
      ic.appendChild(tity);
      var liney = document.createElement("div");
      liney.setAttribute("style", "width:620px; left:40px; border-top:1px dotted #B9B9B9; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; ");
      liney.style.top = (36 * i) + 20 + "px";
      ic.appendChild(liney);
    }
  }
  else {
    icArea.innerHTML = '<div style="color:#0066cc; font-size:12px; margin:20px 0 0 80px;">暫無統計資料</div>';
  }
}
//滑鼠提示顯示24小時實時>》呼入《<監控的詳細資料
function toShowTipMessage() {
  var nodes = document.getElementById("TwentyFourHourChart").getElementsByTagName("div");
  for (var i = 0; i < nodes.length; i++) {
    nodes[i].onmouseover = function () {
      var temp = this.id.split("_");
      var type = temp[0];
      var hour = temp[1];
      var times = temp[2];
      var tipMessage = "";
      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;
      if (type == "sumrow") {
        tipMessage = "今日" + hour + "時呼入" + times;
      }
      else if (type == "cptrow") {
        tipMessage = "今日" + hour + "時已接" + times;
      }
      tip.innerHTML = '<span style="font-size:12px; display:block; height:20px; background-color:#ffffff;padding:0px 2px; line-height:20px;">' + tipMessage + '</span>';
      document.getElementById("TwentyFourHourChart").appendChild(tip);
    }
    nodes[i].onmouseout = function () {
      var tip = document.getElementById("TipMessage");
      document.getElementById("TwentyFourHourChart").removeChild(tip);
    }
  }
}
</script>
</head>
<body>
  <!-- 下面這個div consuming_time 是為了顯示左上角，繪製圖表耗時顯示之用，在實際使用中午用處 -->
  <div id="consuming_time"></div>
  <div id="TwentyFourHourChart">
  </div>
</body>
</html>

相關文章