HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

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

2015-10-19 11:06| 发布者: html5cn| 查看: 1614| 评论: 0|来自: jQuery之家

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

  简要教程

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

 

查看演示      下载插件

  使用方法

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

 

  通过JavaScript来调用

$("#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用于排序。

13
24
17
26
12
8

 

  配置参数

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

  来源jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 22:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部