Bootstrap 3-based Bar Chart Plugin
Add-ons
Plugin Description: jt is a simple and lightweight jQuery bar chart plugin based on Bootstrap 3.x. With just a few simple settings, this plugin can generate attractive horizontal bar charts with horizontal and vertical labels, as well as chart headers and footers.
Usage
This jQuery bar chart plugin can be initialized using JavaScript or generated directly using HTML tags.
Initialize Using 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"]}); |
Generate Bar Charts Directly Using HTML Tags
In HTML tags, the name attribute specifies the chart title. Similar to Bootstrap labels, chart-sm or chart-lg specifies the chart size, data-width specifies the chart width, and data-sort controls sorting.
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
Configuration Parameters
| Parameters | Default Value | Description |
| width | 750 | Chart width in pixels |
| name | null | Chart title, displayed above the chart |
| type"bar" | "bar" | Chart type. Currently, only bar charts are supported. |
| headers | null | (No label)Bar chart labels, specified as a Javascript array |
| values | null | Numeric values displayed for each bar on the left side of the chart, specified as a Javascript array |
| footers | null | A set of numeric values displayed below the bar chart, specified as a Javascript array |
| colors | #6b9bd6 | #6b9bd6 (dark blue)An array of colors |
| sort | false | Whether to enable sorting |
评论