前端框架BootStrap之柱状图模板

前端框架BootStrap之柱状图模板

• 写在前面：有段时间没更新博客了。本身是Java后端的、但是公司限制。后端在写、安卓在写、前端也在写。前端也和安卓一样比较菜，有不足的地方望路过的大佬指正。最近做了个数据统计的功能，就顺便研究了一下柱状图和饼状图，今天先来分享一下柱状图吧。后面有时间来更新一下其他数据展示功能。
• 动态生成柱状图、自动根据数据进行从大到小排行，一个数据统计比较实用的模板。自己稍微整理了一下（宽度、颜色、类目动态生成）、效果图如下：
  
• JS代码（这是我自己写的循环生成柱状条目，singleDealPart是后台传过来的Json解析出来的HashMap）

	for (var key in singleDealPercent) {
		var tdm = document.createElement("div");
		tdm.id = "bar_of_pies_single_"+i;
		tdm.innerHTML = '<div class="define-chart-row" data-color="red" title="'+key+'">'+singleDealPercent[key]+'</div>';
	   	document.getElementById("bar_of_pies_single").appendChild(tdm);
	}
	$("#bar_of_pies").jChart();	

• HTML代码

	<div class="col-sm-12">
		<div id="bar_of_pies" data-sort="true" data-width="400" class="jChart chart-sm" name="各监所告警处理率（%）">
			<div id="bar_of_pies_single"></div>
			<div class="define-chart-footer">25</div>
			<div class="define-chart-footer">50</div>
			<div class="define-chart-footer">75</div>
			<div class="define-chart-footer">100</div>
		</div>
		<div id="population_chart"></div>					
	</div>	

资源领取处：

这个模板需要引入两个文件，一个Css（main.css）、一个Js(jChar.js)，当然可以根据自己的需求进行修改，实际效果图也如文章开头，本来想发我的成品的，发现整理有点麻烦，就发个自己在某jquery模板网站充了个Vip下载的的吧。那边要收费的、我这儿不要钱、悄悄下了就行，不要声张。手动滑稽(^▽)！ 资源已上传

• 资源传送门