基于Bootstrap3柱状图表插件

所属分类:UI-图表

 18541  223  查看评论 (0)
分享到微信朋友圈
X
基于Bootstrap3柱状图表插件 ie兼容9

使用方法

该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>

配置参数

参数默认值描述
width750图表的宽度,单位像素
namenull图表的标题,显示在图表上方
type"bar""bar"图表的类型,目前只支持柱状图
headersnull(没有标签)柱状图的标签,一个Javascript数组
valuesnull显示在柱状图左侧的每一条柱子的数字,一个Javascript数组
footersnull显示在柱状图下面的一组数字,一个Javascript数组
colors#6b9bd6#6b9bd6(深蓝色)一组颜色
sortfalse是否进行排序
相关插件-图表

jquery.jqplot 绘图插件

jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。
  图表
 38483  307

JS饼状图效果

基于highcharts.js实现的饼状图效果,报表
  图表
 41249  310

基于echarts双y轴折线图实时更新

双y轴折线图阴影图渐变效果混合实时更新
  图表
 33637  277

原生js表格插件systable

原生js表格插件systable,代码注释全
  图表
 28162  293

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复