现在有很多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"));
var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///" ,路径有效
var con = new ActiveXObject("ADODB.Connection"),
fso = new ActiveXObject("Scripting.FileSystemObject"), //①
connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 这种写法有效
con.Open(connstr); //①
var rs = new ActiveXObject("ADODB.Recordset");
rs.open(sql,con);
while(!rs.eof){
var theday = rs.Fields.item("date_jiayou").value;
var carnum =rs.Fields.item("carnumber").value; //号牌
var miles = rs.Fields.item("totalmileage").value; //总里程，整数
var oilleft = rs.Fields.item("oilboxpercent").value;
var price = rs.Fields.item("per_price").value; //价格，实数
var oiltype = rs.Fields.item("oiltype").value; //类型
var quantity = rs.Fields.item("quantity").value; //量，实数
var fee = rs.Fields.item("pay").value; //总费用，实数
var seller = rs.Fields.item("seller").value; //商家
var place = rs.Fields.item("location").value; //地点
var remark = rs.Fields.item("remark").value; //备注
palce = (place=="")?"":place;
remark = (remark=="")?"":remark;
var d = new Date(Date.parse(theday));
var y,m,day;
y = d.getFullYear();
m = d.getMonth()+1 ;
day = d.getDate();
theday = y +"/" + m + "/" + day;
oilleft = Number(oilleft).toFixed(4); //剩余百分比，小数
a1[line] = new Array();
a1[line][0] = Date.parse(theday);
a1[line][1] = new Number(oilleft);//这里必须new对象，否则还会传递原对象，导致本函数被调用处(111行)提示“对象不再有效”
a1[line][2] = new Number(miles);//这里必须new对象，否则还会传递原对象，导致本函数被调用处(111行)提示“对象不再有效”
a1[line][3] = new Number(price);//这里必须new对象，否则还会传递原对象，导致本函数被调用处(111行)提示“对象不再有效”
a1[line][4] = new Number(quantity);//这里必须new对象，否则还会传递原对象，导致本函数被调用处(111行)提示“对象不再有效”
//a1[line] = new Array(theday,oilleft,miles,price,quantity);
//alert(a1[line]);
line++;
rs.moveNext;
}
rs.close();
rs = null;
con.Close();
con = null;
// alert(a1[0]);
return a1;
}
var getPrices = function(sql,a2,line){
var filefolder = location.href.substring(0, location.href.indexOf("statistics.html"));
var dbpath = filefolder.substring(8) + "../db/oilcar.mdb" ; //去掉 "file:///" ,路径有效
var con = new ActiveXObject("ADODB.Connection"),
fso = new ActiveXObject("Scripting.FileSystemObject"), //①
connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fso.GetFile(dbpath); // ① 这种写法有效
con.Open(connstr); //①
var rs = new ActiveXObject("ADODB.Recordset");
rs.open(sql,con);
while(!rs.eof){
var theday = rs.Fields("date_jiayou");
var carnum =rs.Fields("carnumber"); //号牌
var miles = rs.Fields("totalmileage"); //总里程，整数
var oilleft = rs.Fields("oilboxpercent");
var price = rs.Fields("per_price"); //价格，实数
var oiltype = rs.Fields("oiltype"); //类型
var quantity = rs.Fields("quantity"); //量，实数
var fee = rs.Fields("pay"); //总费用，实数
var seller = rs.Fields("seller"); //商家
var place = rs.Fields("location"); //地点
var remark = rs.Fields("remark"); //备注
palce = (place=="")?"":place;
remark = (remark=="")?"":remark;
var d = new Date(Date.parse(theday));
var y,m,day;
y = d.getFullYear();
m = d.getMonth()+1 ;
day = d.getDate();
theday = y +"/" + m + "/" + day;
oilleft = Number(oilleft).toFixed(4); //剩余百分比，小数
a2[line] = new Array();
a2[line][0] = new Date(Date.parse(theday));
a2[line][1] = new Number(price);//这里必须new对象，否则还会传递原对象，导致本函数被调用处(111行)提示“对象不再有效”
line++;
rs.moveNext;
}
rs.close();
rs = null;
con.Close();
con = null;
return a2;
}
$(function(){
$("#st").click(function(){
var a1 = new Array();
var line = 0;
$("#dv_1").html("");
var y = Number($("#t1").val());//需要验证....
var d1 = y+"/"+ 1 + "/"+1;
var d2 = (y+1)+"/"+ 1+ "/"+1;
//alert(d2);
var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and date_jiayou<#"+ d2 +"# order by date_jiayou asc ";
//var arr = getData(sql);
var obj = getData(sql,a1,line);//二维数组 : /日期 /油剩余百分比 /里程 /单价 /加油量
//alert(obj[1]);
var bar_x = new Array(), bar_y = new Array() ;//x:日期 y:油耗
for(i=1;i<obj.length;i++){
var cur_oilleft = obj[i][1];//当前行剩油百分比
var oil_spent = 0 ;//油耗，指到上一次或前面某次加油时所加的油之和
var cur_miles = obj[i][2] ; //当前行里程
var miles_travel = 0 ;
var haspoint_calc = false;
for(j=i-1;j>=0;j--){
//剩油百分比小于等于1/16时，近似算作这次与计算行（待计算日）剩油百分比相同，以便累计待计算的总油耗：前几次到当前日期(当前日期不含)所加油量之和
var percent = cur_oilleft - obj[j][1];
oil_spent += obj[j][4];
miles_travel = cur_miles - obj[j][2];
if( percent <= 0.0625 ){
//找到可计算日期
haspoint_calc = true;
break;
}
}
if(haspoint_calc){
var d = new Date(obj[i][0]);
// var year = d.getFullYear() , month = d.getMonth + 1;
var date_calc = new String(d.getFullYear() + "/" + String(new Number(d.getMonth()) + 1) + "/" + new String(d.getDate()));
var oil = new Number(100*oil_spent/miles_travel);//百公里油耗 升/百公里
bar_x.push( date_calc );
bar_y.push( oil.toFixed(2) );
}
}
var obj = new Array();
for(k=0;k<bar_x.length;k++){
obj[k] = new Array(String(bar_x[k]),Number(bar_y[k]));
}
drawline(obj,'dv_1','汽车油耗统计(升/百公里)');
});
$("#oil").click(function(){
var a2 = new Array();
var line = 0;
$("#dv_1").html("");
var y = Number($("#t1").val());//需要验证....
var d1 = y+"/"+ 1 + "/"+1;
var d2 = (y+1)+"/"+ 1+ "/"+1;
var sql = "select * from oilcarlog where date_jiayou>=#"+ d1+"# and date_jiayou<#"+ d2 +"# order by date_jiayou asc ";
var obj = getPrices(sql,a2,line);//二维数组 : /日期 /单价
drawline(obj,'dv_1','汽油单价浮动');
});
});
</script>
</head>
<body>
<div style="height: 99%;">
<div style="height: 10%;">
<label style="font-size: 13px; font-style: normal; font-weight: bold;">统计年份:</label>
<input type="text" id="t1" name="theday" value="2015" /><span style="font-size: 10px">(如：2015)</span>
<input type="button" value="统计" class="btn_statistics" id="st" />|<input type="button" value="油价浮动" class="btn_statistics" id="oil" />
</div>
<div style="height: 90%;">
<fieldset style="font-size: 14px; color:blue; width: 90%; height:90% ">
<legend>查询图表</legend>
<div id="dv_1" style="width:600px; height:350px; margin-top:20px; margin-left:20px;">
</div>
</fieldset>
</div>
</div>
</body>
</html>
相关推荐
在本项目中，"Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)" 是一个基于Echarts和layui框架开发的数据可视化应用。Echarts是中国百度公司开源的一个JavaScript图表库，它提供了丰富的图表类型，如...
ECharts是一款基于JavaScript的数据可视化库，广泛应用于Web前端的数据图表制作，它提供了丰富的图表类型，灵活的交互功能，以及良好的性能。而Java Web则是通过Servlet、JSP等技术在服务器端处理业务逻辑，与前端...
### 基于JFreeChart的Web统计图表 #### 引言 随着互联网技术的快速发展，Web应用程序变得越来越普及且功能复杂。其中，基于Web的动态统计图表是一种典型的复杂功能需求。为了满足这一需求，一些开源项目凭借其公开...
此外，随着技术的发展，现在的Web应用程序更倾向于使用更新的数据库系统（如SQL Server 2016或Azure SQL Database）和前端图表库（如Highcharts或D3.js），但这个项目提供了一个基础的Asp.net绘图示例，对于理解Web...
- **图表库**：用于展示统计数据的图表组件。 ### 15. MooTools MooTools是一个基于JavaScript的轻量级框架，专注于简洁的代码和易于扩展的设计： - **链式调用**：支持链式方法调用，使得代码更加流畅。 - **CSS...
这个"图表示例.rar"压缩包包含了学习如何在后台加载并展示ECharts统计图表数据的基础步骤。以下是对这些文件及其相关知识点的详细解释： 1. **JSON.cs**： 这个文件可能包含C#类或方法，用于处理和序列化图表所需...
5. **JavaScript库**：如D3.js、Highcharts等，用于在客户端绘制图表。这些库允许开发者在浏览器端动态生成和交互图表，提高图表的响应性和交互性。 6. **MVC架构**：Model-View-Controller模式是Java Web开发中...
在本项目中，Echarts将用于绘制港口收入的统计图表，帮助用户直观地理解数据走势。例如，柱状图可用于显示不同港口的收入对比，饼图可用于展示各港口收入占总收入的比例，折线图则可以展现收入随时间的变化趋势。 ...
FusionCharts Free是一款强大的JavaScript图表库，特别适合用于创建各种各样的动态、交互式的统计图表。这款开源工具允许开发者轻松地在网页上绘制出丰富多彩的图表，如折线图、柱状图、饼图等，从而提升数据展示的...
在这里，MySQL存储了用于绘制图表的数据，通过Java后端的查询接口，将数据暴露给前端，使得图表能根据数据库内容动态变化。 5. **饼图**： 饼图是Echarts的一种基本图表，常用来表示整体中各部分所占的比例。在...
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，适用于各种统计需求，同时也支持自定义图表。在"echart从数据库获取数据展示final.zip"这个项目中，我们看到开发者使用 ECharts ...
例如，当用户在界面上操作时，可以通过异步调用向服务器发送请求，服务器处理数据后返回更新的图表数据，再由前端JavaScript绘制新的图表。 总结，通过Unigui与CanvasJS的结合，开发者可以轻松创建出具有专业品质的...
在技术选型上，可能还会涉及到其他一些工具和库，如Bootstrap或Element UI提供UI组件，Axios或Vue-resource用于前后端数据通信，MySQL作为关系型数据库存储用户和任务信息，Echarts用于绘制统计图表。所有这些组件...
在实现图表功能时，开发者通常需要经历以下步骤：数据获取（例如从数据库或API获取）、数据处理（可能需要进行聚合、排序等操作）、选择合适的图表类型、使用图表库绘制图表、最后将图表嵌入到Web页面中。...
通过其提供的Web界面，开发者可以直观地绘制工作流图表，设置各个节点（如开始、结束、审批、并行分支等）以及它们之间的流向。这种图形化的流程设计方式使得非技术人员也能参与到流程的设计中，提高了工作效率。 ...
这个FusionCharts数据库实例展示了如何利用SpringMVC、数据库和Velocity模板引擎实现动态的图表统计。通过这种方式，你可以根据实际的数据库数据实时更新图表，提供交互式的数据分析体验。这个实例对于需要数据可视...
这些图表库提供了丰富的API，能够绘制出各种类型的统计图表，如饼图、柱状图等，用于直观地展示不同专业学生的数量比例。 访问记录统计图可能通过收集用户的浏览行为，例如页面访问次数、停留时间等，然后使用时间...
jQuery虽然不直接提供统计图表的功能，但有许多优秀的第三方插件如Chart.js、Highcharts、Flot等，它们可以很好地与jQuery配合，生成各种类型的统计图表，包括柱状图、折线图、饼图、散点图等。 在实际项目中，首先...
4. **ECharts**：百度开源的一款JavaScript数据可视化库，支持丰富的图表类型，如折线图、柱状图、饼图等，适用于Web前端的数据展示。ECharts的API灵活，易于使用，可以实现动态效果和交互功能。在本项目中，ECharts...