现在有很多js库可以方便地在web客户端绘制出漂亮的统计图表,显示效果和开发易用性并不亚于在JSP Server端使用诸如JFreeChart组件生成图片流传递到客户端。
一般要求浏览器支持html5的canvas功能,为兼容不支持的浏览器,js库另外提供了canvas脚本库。
本例记录了采用免费开源基于jquery的js绘图库—— jqplot、MS ActiveX框架、MS Acess 开发学习实例.
部分源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Statistics</title>
<link type="text/css" rel="stylesheet" href="../css/pagestyle.css"/>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/excanvas.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../js/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../css/jquery.jqplot.min.css" />
<script type="text/javascript">
var drawline = function(obj,areaid,tt){
//var line1=[['2008-08-12 4:00PM',4], ['2008-09-12 4:00PM',6.5], ['2008-10-12 4:00PM',5.7], ['2008-11-12 4:00PM',9], ['2008-12-12 4:00PM',8.2]];
var line1 = obj;
var plot1 = $.jqplot(areaid, [line1], {
title:tt,
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y/%#m/%#d'}
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
}
var getData = function(sql,a1,line){
//查询数据
// var a = new Array(3);
// a[0] = new Array(1,2,3);
// a[1] = new Array(3,4,5);
var filefolder = location.href.substring(0, location.href.indexOf("statistics.html"));