jQuery jgCharts 图表插件
jgCharts并不是一个独立插件
实际他封装的是Google Charts，让Google Charts的调用变得更简便，更“jquery”化
调用实例：
$(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]] 点线图，[线宽,点宽,空白宽]
示例
$(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>
$(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>
