素材牛VIP会员

利用Bootstrap3实现的柱状图表插件

 所属分类:网页特效-表格

 浏览:2561次  评论:0次  更新时间:2018-12-10
牛币素材VIP可免积分下载
利用Bootstrap3实现的柱状图表插件兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:一款简单小巧的基于Bootstrap3.x的jQuery柱状图表插件。该柱状图片表插件通过简单的设置,就可以生成非常漂亮的水平柱状图,并带有水平和垂直标签以及图表的头部和尾部。

详细介绍

使用方法:

该jQuery柱状图插件可以通过javascript来调用,也可以直接使用HTML标签来生成。

通过JavaScript来调用

<div id="population_chart"></div>
$("#population_chart").jChart({
   name: "North American Regional Population Loss 2014",
   headers: ["Arizona","Michigan","Ontario","British Columbia","Texas"],
   values: [250000,478000,88000,429000,423000],
   footers: [100000,200000,300000,400000,500000],
   colors: ["#1000ff","#006eff","#00b6ff","#00fff6","#00ff90"]
});

直接使用HTML标签生成柱状图

在HTML标签中,name属性是图表的标题,于Bootstrap标签相似,chart-sm或chart-lg分别表示图表的大小,data-width是图表的宽度,data-sort用于排序。

<div id="bar_of_pies" data-sort="true" data-width="300"  name="My Favorite Pies">
 <div  data-color="red" >13</div>
 <div  data-color="gray" >24</div>
 <div  data-color="green" >17</div>
 <div  data-color="orange" >26</div>
 <div  data-color="black" >12</div>
 <div  data-color="blue" >8</div>
  
 <div >10</div>
 <div >20</div>
 <div >30</div>
</div>

配置参数

参数 默认值 描述
width 750 图表的宽度,单位像素
name null 图表的标题,显示在图表上方
type"bar" "bar" 图表的类型,目前只支持柱状图
headers null (没有标签)柱状图的标签,一个Javascript数组
values null 显示在柱状图左侧的每一条柱子的数字,一个Javascript数组
footers null 显示在柱状图下面的一组数字,一个Javascript数组
colors #6b9bd6 #6b9bd6(深蓝色)一组颜色
sort false 是否进行排序

文件目录结构

  • css
    • ┝ default.css
    • ┝ main.css
  • ┝ index.html
  • js
    • ┝ jchart.js
    • ┝ jquery-2.1.1.min.js

相关素材 - 表格

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:2 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)