手写柱形图

Posted on | In |

其实自己定义几个div 设置背景颜色 根据数据设置div的高度 上传到gihub的你建的仓库就可以用啦

  • 个人还是喜欢直接用现成的图表组件 只用传数据和dom就行啦
  • 而且自己写丑不说，万一下次要画饼图呢?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function Histogrm(wnd, container, bname, count) {
	this._wnd = wnd || window;
	this._doc = this._wnd.document;
	this._container = container;
	this._bname = bname;
	this._count = count;

	this._initUI();
}
/**
 * 创建方法
 *
 */
Histogrm.create = function(wnd, container, bname, count) {
	return new Histogrm(wnd, container, bname, count);
}



Histogrm.prototype._initUI = function() {
	if (!this._inited) {
		//柱状图的柱子部分，不显示出来
		this._bigDiv = this._doc.createElement("div");
		this._bigDiv.className = "bigDiv";
		//柱状图的颜色部分
		this._innerDiv = this._doc.createElement("div");
		this._innerDiv.className = "innerDiv";
		this._innerDiv.style.height = this._count * 10 + "px";
		this._innerDiv.style.marginTop = 200 - this._count * 10 + "px";
		this._innerDiv.style.backgroundColor = this._colorRandom();
		this._bigDiv.appendChild(this._innerDiv);
		//显示图书名称
		this._font1 = this._doc.createElement("div");
		this._font1.className = "fontbookname";
		this._font1.innerHTML = this._bname;
		//显示统计次数
		this._font2 = this._doc.createElement("div");
		this._font2.className = "fontbooknumber";
		this._font2.innerHTML = "(" + this._count + ")";

		this._container.appendChild(this._bigDiv);
		this._container.appendChild(this._font1);
		this._container.appendChild(this._font2);

		this._inited = true;
	}
}
//随机生成颜色方法
Histogrm.prototype._colorRandom = function() {
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + ',' + g + ',' + b + ")";
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function _onShowPage4XPage1(pageindex, pagesize) {
	  //alert(pageindex);
	  var params = new Map();
      params.put("index", pageindex);
      params.put("action", "borrow");
      QueryObj.create("mgr.do", params, function(query){
			try {
				query.checkResult();
				var res = query.getResponseJSON();
				self._check();				
				if(document.getElementById("div_list1") != null){
					list1.clear();					
				}
				for(var i = 0; i < res.length; i++){
				var a = res[i];
				var b = a.split(",");
				var m = list1.addRow(b[0], b[1], b[2], b[3]);
				m.setUserObj(b[4]);
				if(allChecks){
				  if(allChecks.containsKey(b[4])){
						m.setChecked(true);
				  }
				}
				}		
				list1.setHeaderVisible();

			} catch(e) {
				hideWaitDialog();
				showError(e);
			}
      });
  }
}

/**
 * 列表的选中事件，并存储在map中
 */
BookMgr.prototype._check = function() {
	var self = this;
	// 获取当期全部选中项
	var item = list1.getCheckedItems();
	//self.allChecks = new Map();
	if (item) {
		for (var i = 0; i < item.length; i++) {
			// map的键为记录的id，值为书名
			var a = item[i];
			allChecks.put(a.getUserObj(), a.values[0]);
		}
	}
}
/**
 * 获取存储在map中图书的名字和次数
 */
BookMgr.prototype.dataAn = function() {
	var self = this;
	self._check();
	if(allChecks){
		var m = allChecks.valueSet();
		m.sort();
		for(var i = 0; i < m.length; i++){
			var count = 0;
			for(var j = 0; j < m.length; j++){
				if(m[i]==m[j]){
					count++;
				}
			}
			result.push([m[i],count]);
			i += count;
		}
	}
}