jQuery Google Charts封装google chart api的jquery插件
柱状图:
折线图:
饼图:
3d饼图:
这个插件只需要在头部引入：
<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>
—————–
转载请注明：jQuery Google Charts封装google chart api的jquery插件 - 前端开发
为您推荐
您可能还会对这些文章感兴趣
2016-12-20只会用jQuery前端到底low不low?
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，...
2016-12-17jquery的$().each,$.each的区别
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在d...
2016-12-15jquery加载外部文件（.txt .html)显示在网页上
在web开发中常常需要用到jquery去动态的加载文件显示在网页上面，下面是实现的小方法，希望给大家一点提示，达到抛砖引玉的作用哦！！！ 效果图： 要加载显示的文件： 网页加载...
2016-12-15javascript实现网页倒计时
web开发中常常需要使用到网页倒计时功能，下面是实现方法： 效果图： 代码截图：
2016-12-15jquery判断浏览器类型最新方法
web开发中常常需要去判断浏览器的类型来做出对应得调整设置，这时我们就需要学会判断绝大多数的浏览器类型。jquery在1.9之后便取消了$.browser用$.support取而代之，今天就来告诉...
2016-12-15jquery点击返回页面头部滑动动画
web开发中我们常常用点击返回头部的效果，下面我们就贴出代 码，共大家参考哈 代码截图： 说明：
2016-12-15jQuery实现文字闪烁特效
今天给大家介绍一个小特效–文字闪烁，web开发网页中常常使用到哦！ 效果截图： 代码截图：
2016-12-15jQuery中的clone的使用方法
clone：官方的解释是克隆匹配的DOM元素并且选中这些克隆的副本。如果想克隆DOM元素绑定的所有事件，可采用clone(true)，JQ1.5版本以上默认为false。 具体怎么用？ 先举例一个小例...
2016-12-15jquery所有版本(实时更新),jquery所有版本下载地址
百度压缩版引用地址: <script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script> 微软压缩版引用地址: <script src=”http://...
2016-12-15jQuery插件原理及封装
我们知道jQ插件，是通过$.fn来进行拓展的，但是为什么这样能拓展，可能就没多少人知道了。其实我们简单测试一下就明白了： console.log($.fn); 输出的结果发现全是jQ的api，这就...