用Flot插件在web中实现数据的曲线图

参加过“数字图书馆高级研讨班”的朋友们,肯定对林夏老师的信息可视化课程印象深刻。一般来说,信息可视化的程序,都是采用桌面程序来实现。这是因为桌面程序有丰富的API支持,实现起来比较容易。但是,相对于web,桌面程序不利于使用和传播,因此,如何在web中轻松实现信息的可视化,曾经是个棘手的问题。Java Applet、flash、SVG、ActiveX、JFreeChart、Silverlight等等技术,都给出了解决方案,但要求的技术成本有点高的。其实,使用简单的javascript,一样可以满足我们在web中实现信息可视化的大部分需求,只是因为相关标准不完善(例如canvas标签很长时间得不到承认和支持),一直以来不受重视。不过,随着web2.0的兴起,javascript成为宠儿,许多javascript框架出现之后,使用javascript在web中实现信息可视化方面,迅速成为焦点。

采用javascript来做这一事情的好处是显而易见的,所以,大部分javascript框架都实现了丰富的绘图接口,并且有更多的第三方插件基于基本的javascript框架,对相关功能进行封装,以便于我们更好的应用。本文中介绍的Flot插件就是其中的佼佼者。

Flot是基于jQuery的、纯脚本的、开源的插件,由丹麦的iola工作室开发,它的官方站点在http://code.google.com/p/flot/,上面有例子和源码下载。

接下来,如下图所示,我们使用Flot来实现一个简单的例子,将每个月和每天的入馆人数用一条曲线图展示出来(马上下载本例子的源码)。

进馆人数统计,Flot生成的曲线图进馆人数统计,flot生成的曲线图


本例数据库使用的是mysql,要运行本例,你需要创建一个名为enters_db的数据库,唯一一个表命名为enters,有三个字段`id` int(6) auto_increment,`date` date, `enters` int(6) default ‘0’。源码下载中的enters_db.sql脚本文件可以让你很方便的创建数据库及示例数据。

本例服务器端使用了jsp开发,所以你需要配置一个jsp解析平台,tomcat或者resin都是不错的选择。此外你需要在平台的配置文件中创建一个名为“jdbc/mysql”的数据库连接池。

下面是程序中关键的代码:

<%
//……
String sql="select month(date) as mon, sum(enters) as counts from enters where year(date)=2008 group by month(date)"; //按月统计
//……
while(rs.next())
{
tmp=rs.getString("mon");
str1=str1+"["+tmp+","+rs.getString("counts")+"],"; //构建数据数组
str2=str2+"["+tmp+","“+tmp+”月“],”; //构建横坐标数组,增加了横坐标上的月份链接
}
str1=str1.substring(0,str1.length()-1)+”]”;
str2=str2.substring(0,str2.length()-1)+”]”;
//……
%>



$(function () {
var d1 = ; //输出数据到脚本
$.plot($(“#placeholder”), [ d1 ], { xaxis: { ticks: }}); //实现绘图,增加xaxis参数,用于定义横坐标以加入月份细览的链接
});

你可以点击下载本例完整的源代码。建议你根据实际需要修改此代码。强烈建议你点击浏览Flot的Samples

像Flot这样的插件,还有很多。在本例中,只是通过它展示了简单的图表显示功能。在一些实时性较强的应用中,如在线人数的监控,我们可以把Flot和Ajax结合起来,例如隔一分钟从服务器端获取一次数据,然后重新绘图,从而实现图表的实时更新。

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*