相比前面的饼图,可能有些人还是觉得不够直观,这里我通过JFreeChart设计了另一个基于application版本的柱状图结构,形成的柱状图可以让层次更加清晰。
图 4.4 Application版本的柱状图
在这里,我建立的java项目为com.bar。
该java文件输出的也就是当前已经录入的某公司人员数据结构。效果如下图所示:
图 4.5 bar效果图
4.2.3 Application版本的饼图与柱状图比较
同样的数据得出不一样的图表,因人而异,有些人喜欢饼图,有些人则认为柱状图更有结构感,我个人比较偏向于柱状图。因为JFreeChart版本的柱状图不仅能在数据上清晰的反应每个元素(在这里就是各部门的人员类型:管理人员、市场人员、开发人员、其他人员),还能在各个不同元素之间,显示各自的数据差异,比如在该图中,市场人员占到的人数(可以在纵轴上读出来)减去管理人员占到的人数(也可以在纵轴上读出来)即可得到两者之间的差值。但是相反,在饼图中,我们只能看到的是每个部分所占的大致比例,然而,相互间的数据差异却不能直接得到,这一点是我个人觉得柱状图的优势。
4.3 基于JSP技术下的图形运行及调试
4.3.1 将chart图表转换成EG的application
做这一步的开发主要还是为了我下一步将图片导入到JSP页面中做准备的,新建一个com.jpeg的文件来生成使用一个面向application的工具类,将chart转换成EG格式的图片。
图 4.6 换成EG的application
这里和上面实现饼图和柱状图的原理相同。
运行之后,在lib目录下,生成了一个名为COMPANY的图片,该图片就是前面饼图所形成的图形,只不过以EG的形式存放了起来。
图4.7 生成COMPANY图片
4.3.2 将生成的图片嵌入到JSP页面中去
在这里,我做的前期工作有点繁琐,主要是进入MYECLIPSE的默认路径下,新建一个image的包来存放刚才形成的图片,还有就是相同操作地导入下载的JFreeChart库文件,没有这些文件,程序是运行不起来的。
图4.8 web-inf目录
在WEB-INF目录下,本身有个INDEX.JSP的文件,我将它内容改成了我自己的公司人员结构图。
要注意的是,开始我怎么运行我的程序,MYECLIPSE都显示我的虚拟机启用错误,
显示无法检测到本地的JAVA程序。后来我查了查资料发现,是我没有启用TOMCAT,导致我编译的JAVA程序不能和网页调用起来。
图4.9 VM报错
接着就是设置一个用户界面,用来给使用者输入不同数据,从而达到动态数据可视化的效果。
在设置页面背景的时候,可以调用我的电脑中,已经存放的本地图片,用到的语句有:background-image: url(image/bg.gif);
界面部分呢,我还是比较着重于简单,高效的目的。所以使用了比较基础的代码用来设置页面内容:
<body>
<div align="center">
<h1>
请输入人员数目
</h1>
<form method="post" action="servlet/InputCl">
开发人员:<input type="text" name="develop"/><br/>
管理人员:<input type="text" name="manage"/><br/>
市场人员:<input type="text" name="market"/><br/>
其他人员:<input type="text" name="other"/><br/>
<input type="submit"/>
<input type="reset"/>
</form>
</div>
</body>
编译完后,打开我的浏览器,地址框内输入以下地址: 基于jfreechart的动态数据可视化应用开发(11):http://www.youerw.com/jisuanji/lunwen_823.html