jQuery jgCharts 图表插件

 jgCharts并不是一个独立插件

实际他封装的是Google Charts，让Google Charts的调用变得更简便，更“jquery”化

<script type="text/javascript">
$(function(){
    var api = new jGCharts.Api(); 
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
    });
</script>
<div id="bar1"></div> 

显示结果

api.make的选项

 

data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]] - 二维数组

size : '400x400'//default 300x200 (width x height) - maximum size 300,000 pixels

type : 'bhg'//default bvg
 - 折线图 lc
 - 点线图 lxy
 - Sparkline 图 ls
 - 叠加型水平条形图 bhs
 - 叠加型垂直条形图 bvs
 - 水平条形图 bhg
 - 垂直条形图 bvg
 - 饼图 p
 - 三维饼图 p3
 - 维恩图 v
 - 散点图 s
 - 雷达图 r
 - 地图 t
 - 仪表 gom

xis_labels : ['2008','2007','2006'], //default 0,1,2 etc...  - 横轴文字

legend : ['serie1', 'serie2', 'serie3'] //default none  - 图例

bar_width : 10, //default 20  条形宽度

bar_spacing : 10 //default 1 条形间距

colors : ['4b9b41','81419b','41599b']

bg   : 'e0e0e0'//default false
 - bg_trasparency : 50 - default false - also chbg_trasparency  背景透明度
 - bg_offset : '000000', 渐变终结色
 - bg_angle  : '45',//default 90   渐变角度
 - bg_type   : 'gradient' //default solid 渐变方式
 - bg_width  : '10'//default 10 - min 10  渐变步伐

chbg        : 'FFFFFF',//default false  图表区颜色
 - chbg_offset : '4b9b41', 图表区渐变终结色
 - chbg_angle  : '45',//default 90    渐变角度
 - chbg_type   : 'gradient' //default solid  渐变方式

title       : 'Bar Chart', //default false 图表标题
 - title_color : 'a98147',
 - title_size  : 20 //default 10

grid        : true, //default false 网格
 - grid_x      : 5,    //default 10 X轴网格宽度
 - grid_y      : 5,    //default 10 Y轴网格宽度
 - grid_line   : 5,   //default 10 网格线宽度
 - grid_blank  : 0    //default 0 网络白色块宽度

fillarea : true //default false 填充图表区

fillbottom : true //default false 填充下端

filltop : true //default false  填充上端

lines: [[4,2,2],[6,3,3]] 点线图，[线宽,点宽,空白宽]

示例

<script type="text/javascript"> 
$(function(){ 
    var api = new jGCharts.Api();  
    jQuery('<img>').attr('src', api.make({
       data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
       axis_labels : ['2008','2007','2006'], //X轴显示文本
       legend : ['serie1', 'serie2', 'serie3'] //图例      
    })).appendTo("#bar1"); 
}); 
</script> 
<div id="bar1"></div> 

 

 

 

<script type="text/javascript"> 
$(function(){ 
    var api = new jGCharts.Api();  
    jQuery('<img>').attr('src', api.make({
      data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],  
      type : 'p3',
      size : '400x200' 
})).appendTo("#bar1"); 
    }); 
</script> 
<div id="bar1"></div> 

 

 

 

jgCharts链接 http://www.maxb.net/scripts/jgcharts/include/demo

 

评论

1 楼 dingding5060 2012-02-11  

jgcharts不好的地方就是需要去调用google的api!  有没有其他处理图表的jquery插件？