jquery+gchart制作图表，简单demo

最新推荐文章于 2025-01-07 09:00:00 发布

原创最新推荐文章于 2025-01-07 09:00:00 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Servlet #HTML #ViewUI

本文介绍如何使用GChart API创建动态图表，包括折线图等类型，并提供了完整的HTML和JavaScript示例代码。

在临近考试的时候，尽量学多点其他东西。: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 [color=red]d[/color]= eval(data);
$('#basicGChart').gchart({
type: 'line',//图表类型
title: '2009年阿一电影下载量折线图', //图表标题
series: [
$.gchart.series([color=red]d[/color],'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数组；
[color=red]并用JavaScript的eval函数将返回的数据转换为数组类型。[/color]

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