jQuery Google Charts----一个封装google chart api的jquery插件

简介:
Google Charts想必大家都已经耳熟能详了吧,它允许我们很轻松的通过简单的数据就能生成复杂的图表.而Jgcharts插件就是对这个api的封装,让我们调用google api更加容易.废话不多说,先来看看效果:

柱状图:

chart

chart1

chart2

折线图:

chart4

饼图:

chart5

3d饼图:

chart6

这个插件只需要在头部引入:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
 

这个插件的原理是根据拼接的url,Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。可以生成多种类型的图片,包括折线图、条形图和饼图。您可以为每种图片类型指定属性,例如大小、颜色和标签。

通过将网址嵌入 <img> 标签内,您可以将图表 API 图片包括在网页中。当网页在浏览器中显示时,图表 API 会呈现该网页中的这幅图片。

具体可以参考:http://code.google.com/intl/zh-CN/apis/chart/

 

这jgchart插件则可以帮助你动态的拼接这个url传递给google.

示例代码如下:

var api = new jGCharts.Api(); 
jQuery('<img>') 
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})) 
.appendTo("#bar1");
这就是最上面那个饼状图的生成方法,只需要生成jGCharts.api的实例并通过make方法来返回拼接好的字符串.通过data属性可以设置图表的数据,以js数组的方式进行.

我们还可以通过make内参数对象的type属性来设置不同的图表类型,比如折线图可以加上:“type : lc”来获取.

 

jGChart插件和Demo可以从这里获得:http://www.maxb.net/scripts/jgcharts/include/demo/

 

下面是我自己做的一个小Demo来对获得的图表进行简单的模拟:

第一个数字:
 
第二个数字:

加入数据清空数据 
 
生成图表
你可以加入相应的数字并且点击生成图表来进行模拟.也可以使用清空数据来将刚加入的数据清空.

上面Demo的代码如下:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://files.cnblogs.com/CareySon/jgcharts.pack.js" type="text/javascript"></script>
    <div style="border:1px dashed green; margin:30px 10px;">
    <div id="result"></div>
    <div id="bar1"></div>
    第一个数字:<input id="no1" />
    <br />
    第二个数字:<input id="no2" /><br />
    <input type="button" value="加入数据" id="add"/><input type="button" value="清空数据" id="clear" />
    <br />
    <select id="t">
    <option value="p">饼图</option>
    <option value="lc">折线图</option>
    <option value="">柱状图</option>
    <option value="p3">3d饼图</option>
    <option value="bhg">横向柱状图</option>
    </select>
    <br />
    <input type="button" value="生成图表" id="submitx" />
    <script type="text/javascript">
        var dataArray = new Array();
        $("#add").click(function() {
            var temp = new Array();
            temp.push($("#no1").val());
            temp.push($("#no2").val());

            dataArray.push(temp);
            $("#result").append("数据加入成功,数据为:" + $("#no1").val() + "," + $("#no2").val()+"<br />");
            temp = null;
            $("#no1")[0].value = "";
            $("#no2")[0].value = "";

        });
        $("#clear").click(function() {
            dataArray = new Array();
            $("#result").html("");
            $("#bar1").html("");

        });
        $("#submitx").click(function() {
        $("#bar1").html("");
            var api = new jGCharts.Api();
            var xdata = "[";
            for (i = 0; i < dataArray.length; i++) {
                xdata += "[";
                for (j = 0; j < dataArray[i].length; j++) {

                    xdata += dataArray[i][j];
                    xdata += ",";
                }
                xdata = xdata.slice(0, xdata.length - 1);
                xdata += "]";
                xdata += ",";
            }
            xdata = xdata.slice(0, xdata.length - 1);
            xdata += "]";
            jQuery('<img>').attr('src', api.make({ data:eval(xdata),type:$("#t").val() })).appendTo("#bar1");
        });
        
    </script>
    </div>
-----------------

enjoy it.By CareySon

分类: JQuery


本文转自CareySon博客园博客,原文链接:http://www.cnblogs.com/CareySon/archive/2009/12/26/1632733.html,如需转载请自行联系原作者

相关文章
|
18天前
|
JSON 搜索推荐 API
【2024更新】如何使用google index api来自动提交url
本文提供了一个详细的指南,说明如何创建并使用使用google index api,google自动提交url来优化seo。
16 0
|
24天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
18 3
|
1月前
|
前端开发 JavaScript 小程序
【uniapp】十分钟带你封装uniapp的api请求
【uniapp】十分钟带你封装uniapp的api请求
|
1月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
15 0
|
1月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
2月前
|
API 开发工具 开发者
通过解析封装关键词搜索速卖通商品列表数据接口,速卖通API接口
通过解析封装关键词搜索速卖通商品列表数据接口,速卖通API接口
25 0
|
2月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
2月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
41 1
|
2月前
|
XML JSON 安全
uni-app API请求封装:让接口调用更加简单高效
在进行uni-app开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。
57 0
uni-app API请求封装:让接口调用更加简单高效

热门文章

最新文章

相关产品

  • 云迁移中心