jquery+gchart制作图表，简单demo -

k0441258778983

浏览: 122612 次
性别:
来自: 广州

最近访客更多访客>>

zzy7075

k1g1h1

liangzi_001

lotus23333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery+gchart制作图表，简单demo

jQuery JavaScript Servlet HTML

在临近考试的时候，尽量学多点其他东西。:oops:
今天主要是研究如何用gchart 制作图表。 gchart是谷歌提供的一个API接口，必须要下载一个jar包，和电脑能联上网，才能看到图表；
   下面附上代码：
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Mygchart.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
    <script type="text/javascript" src="myjs/jquery-1.5.1.js"></script>
    <script type="text/javascript" src="myjs/jquery.gchart.js"></script>
    <style type="text/css">
#basicGChart { width: 450px; height: 300px }
</style>

    <script type="text/javascript">

$(function () {

//日期数组
var array2=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
$.post("servlet/GetgchartdataServlet",
       "",
       function(data){
           var d= eval(data);
           $('#basicGChart').gchart({
            type: 'line',//图表类型
            title: '2009年阿一电影下载量折线图', //图表标题
            series: [
                $.gchart.series(d,'red')//图表数据
            ],
            axes: [//图表坐标轴
                $.gchart.axis('left', 0, 100,'blue'),
                $.gchart.axis('bottom',array2,'008000')
            ],
            legend: 'top'
       });

           }
);
});
</script>


</head>

<body>
    <h2>一个简单的gchart示例</h2>
    <div id="basicGChart"></div>

</body>
</html>

后台简单的代码：返回一个list数组；
并用JavaScript的eval函数将返回的数据转换为数组类型。

type类型的设置：radar（雷达图） line（曲线图） map（地图类型） pie（平面圆饼图）

分享到：