当前位置：首页 > 网页特效 > 图表

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

分类：图表日期：2024-05-14 点击(8) 评论(0)

简介

#### 简要教程
jchart是一款简单小巧的基于Bootstrap3.x的jQuery柱状图表插件。该柱状图片表插件通过简单的设置，就可以生成非常漂亮的水平柱状图，并带有水平和垂直标签以及图表的头部和尾部。

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

通过JavaScript来调用
```html
<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用于排序。

```html
<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  |  是否进行排序 |

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果