jchart是一款简单小巧的基于Bootstrap3.x的jquery柱状图表插件。该柱状图片表插件通过简单的设置，就可以生成非常漂亮的水平柱状图，并带有水平和垂直标签以及图表的头部和尾部。
在线演示 下载
使用方法
该jQuery柱状图插件可以通过javascript来调用，也可以直接使用HTML标签来生成。
通过JavaScript来调用
< div id="population_chart">
$( "#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" class="jChart chart-sm" name="My Favorite Pies">< div class="define-chart-row" data-color="red" title="Pumpkin">13< div class="define-chart-row" data-color="gray" title="Pecan">24< div class="define-chart-row" data-color="green" title="Cherry">17< div class="define-chart-row" data-color="orange" title="Apple">26< div class="define-chart-row" data-color="black" title="Rhubarb">12< div class="define-chart-row" data-color="blue" title="Chocolate Cream">8< div class="define-chart-footer">10< div class="define-chart-footer">20< div class="define-chart-footer">30
配置参数
| 参数 | 默认值 | 描述 |
| width | 750 | 图表的宽度，单位像素 |
| name | null | 图表的标题，显示在图表上方 |
| type | "bar" | 图表的类型，目前只支持柱状图 |
| headers | null (没有标签) | 柱状图的标签，一个Javascript数组 |
| values | null | 显示在柱状图左侧的每一条柱子的数字，一个Javascript数组 |
| footers | null | 显示在柱状图下面的一组数字，一个Javascript数组 |
| colors | #6b9bd6（深蓝色） | 一组颜色 |
| sort | false | 是否进行排序 |
