基于Bootstrap3的简单柱状图表插件

bootstrap 图表 柱状图 2015-10-17

控件介绍
jchart是一款简单小巧的基于Bootstrap3.x的jQuery柱状图表插件。该柱状图片表插件通过简单的设置,就可以生成非常漂亮的水平柱状图,并带有水平和垂直标签以及图表的头部和尾部。
浏览器兼容

支持IE9+

演示下载 509
使用方法

使用方法

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

通过JavaScript来调用
1
<div id="population_chart"></div>               
1
2
3
4
5
6
7
$("#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-smchart-lg分别表示图表的大小,data-width是图表的宽度,data-sort用于排序。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="bar_of_pies" data-sort="true" data-width="300" class="jChart chart-sm" name="My Favorite Pies">
  <div class="define-chart-row" data-color="red" title="Pumpkin">13</div>
  <div class="define-chart-row" data-color="gray" title="Pecan">24</div>
  <div class="define-chart-row" data-color="green" title="Cherry">17</div>
  <div class="define-chart-row" data-color="orange" title="Apple">26</div>
  <div class="define-chart-row" data-color="black" title="Rhubarb">12</div>
  <div class="define-chart-row" data-color="blue" title="Chocolate Cream">8</div>
   
  <div class="define-chart-footer">10</div>
  <div class="define-chart-footer">20</div>
  <div class="define-chart-footer">30</div>
</div>               

配置参数

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

本文转载请注明出处:http://www.zhuiye.com/detail_40.html
评论区
  • 还没有评论,快来抢沙发吧!