jquery+gchart制作图表，简单demo
在临近考试的时候，尽量学多点其他东西。: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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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（平面圆饼图）
今天主要是研究如何用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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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（平面圆饼图）