ITPub博客

首页 > IT职业 > IT图书 > 一个封装google chart api的jquery插件

一个封装google chart api的jquery插件

IT图书 作者:populace 时间:2021-09-09 09:12:53 0 删除 编辑

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

柱状图:

图片描述


折线图:

图片描述

饼图:

图片描述

3d饼图:

图片描述

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

 

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

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

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

 

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

示例代码如下:

var api = new jGCharts.Api(); 
jQuery('')
.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的代码如下:

    
   
   

   

   

   第一个数字:
   

   第二个数字:

   
   

   
   

   
   
   

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3026/viewspace-2800661/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-30

  • 博文量
    74
  • 访问量
    488