基于Bootstrap3的简单柱状图表插件 A JQuery Charting Plugin Base on Bootstrap 3.x

This plugin will allow you to create a bar chart with raw data, either specified in a Javascript array, or in plain old HTML with some specific classes and attributes.

Requires JQuery 1.9.x and Twitter Bootstrap 3.0.x with tooltip enabled.

Live Demo

Mouse over bars to see their exact value.


500000
217500
119000
78000
466000
326000

Javascript Usage


You can create a basic bar chart on an html element by calling .jChart() on a JQuery object or collection.

				
$("#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"]
});
				
			

All parameters except for the values are optional. The HTML would look like this:

				
<div id="population_chart"></div>
				
			

HTML Usage


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

Then simply call $("#bar_of_pies").jChart(); without any options specified to generate the chart like below:

13
24
17
26
12
8