前端框架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下载的的吧。那边要收费的、我这儿不要钱、悄悄下了就行,不要声张。手动滑稽(▽)! 资源已上传