轻松使用JSP生成饼图

作者: BUILDER.COM

JSP提供了很多简单实用的工具,其中包括从数据库中读出数据,发送数据,并能够把结果显示在一个饼状图形。现在让我们看看这一简单而实用的方法。

你所需要的东西

转自:动态网制作指南 www.knowsky.com

为了能正确运行这一文章相关的范例,你必须需要JDK 1.2或更高的版本、一个关系数据库管理系统、一个JSP网络服务器。我都是在Tomcat调试这些例子,同时我也使用了Sun Java 2 SDK发布的com.sun.image.codec.jpegclasses。

数据库设计
假设你在一家从事销售新鲜水果的公司上班,公司出售的水果包括:苹果、桔子、葡萄。现在你的老板想用一个饼状图形显示每一种水果的总出售量,饼状图形能使每一种产品的销售情况一目了然,老板可以迅速掌握公司的产品成交情况。

表A使用了本文中的两种数据库列表。第一种列表(Products)包含所有销售产品的名称;第二种列表(Sales)包含每一种产品对应的销售量。

产品(Products)列表包含productID和productname两个域。销售(Sales)列表包含saleID, productID,以及总额。销售列表中的productID提供了这两个列表之间的关联。销售列表中的总额包含了每一次出售的现金数额,这些数额以浮点型数据出现。

转自:动态网制作指南 www.knowsky.com

表B中的getProducts()方法连接了两个数据库,并把所有的产品名称保存在数组中,我设置以下的数据库规则:

ProductID在产品列表中最独特,也是最关键;
ProductID对于第一个记录的值为0;
所有之后的连续的记录都是累加的,所以第二个记录的productID为1,第三个记录的productID为2,以此类推。
这些数据库规则允许在product数组中存储数据,如下所示:

arr[rs.getInt("productID")] = rs.getString("productname");

一些数据库管理系统在缺省情况下就允许数据的自动累加或者自动排序。当你在设计数据库时,一定先查明你的数据库管理系统遵循哪些规则,比如自动累加,自动排序等。

获取总额销售量

在多数情况下,销售列表中会有很多个记录,所以访问数据库的快捷性和高效性显得非常重要。现在我们只需要访问数据库中每一种产品的总额销售量。

表C中的getSales()方法与数据库连接并返回一个数组,这个数组包含每一种产品的总额出售量。当getSales()遍历所有的记录后,它只存储的是每一种产品新的出售量:

转自:动态网制作指南 www.knowsky.com

int product = rs.getInt("productID");
arr[product] += rs.getFloat("amount");

pieColor对象
饼状图形上的每一种产品应该以不同的颜色显示。为了达到这一目的,我们建立一个pieColor对象(如表D)所示,这一对象包含有关颜色的数组:

Color pieColorArray[] = {new Color(210,60,60), new Color(60,210,60)…}

pieColor类定义了一个setNewColor()的方法,这一方法能够使curPieColor和索引递增,同时它可以检查索引不要超过边界范围,即采用的方法是:如果curPieColor过大即赋0值。

更有效的是,setNewColor()循环每一种颜色后,并在第一种颜色下执行以下的代码:

curPieColor++;
if(curPieColor >= pieColorArray.length)
{curPieColor = 0;}

RenderingHints和antialiasing类
java.awt.RenderingHints类定义了很多方法以显示二维图形,包括alpha_interpolation, 抖动,以及antialiasing方法。RenderingHints有助于决定图形如何显示以及图形如何达到最佳处理。

转自:动态网制作指南 www.knowsky.com

为了能以平滑显示,可以使用antialiasing方法来处理饼状图形。Antialiasing是一种图形的平滑处理方法。其算法是选择一个特殊象素的颜色值并取代交叉处的象素,从而能够使线条交叉处得到平滑化。

图A说明了antialiasing方法的效果。可以看出使用antialiasing方法的饼状图形的线条交叉处变得很平滑。

图A

转自:动态网制作指南 www.knowsky.com

同时,还可以建立一个RenderingHints对象,并传递到Graphics2D setRenderingHints()方法,如下所示:

RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
    RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);

制做可调整的边界

图A中的饼状图形有一边界,如何能改变边界的大小呢?可以先定义int border = 10,然后计算边界内面积的大小而实现:

Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border);

x_pie和y_pie的值代表着包围在饼状图形的正方形的左上角。我们通过边界面积取一半(border/2)而得到饼状图形的中心。

圆弧(Arc)理论
从java.awt.Graphics 类继承而来的fillArc()方法提供了绘制饼状图形各个部分(或圆弧)的简单方法:

g2d.fillArc(x_position, y_position, width, height, startAngle, sweepAngle);

x_position,和y_position整数代表着要填充的圆弧的左上角的x,y的坐标,width和heigh整数代表其具体的尺寸。如果width和height的值相等,饼状图形将是一个圆。如果width和height不相等,那么饼状图形将是一个椭圆。

fillArc()方法决定基于sweepAngle整数值的圆弧的大小。如果sweepAngle值是正的,则圆弧是以反时针方向绘制,反之以顺时针绘制。

绘制圆弧
第一步,使用pieColor对象的getPieColor()方法获取最近饼状圆弧的颜色,并把它赋予当前的圆弧::

g2d.setColor(pc.getPieColor());

接着,通过不断循环sales[]数组并使其累加而获得总共的销售量:

salesTotal += sales[i];

使用总共销售量,可以计算出每一种产品销售情况占总共销售量的百分量:

float perc = (sales[i]/salesTotal);

我们计算sweepAngle即可给圆弧的每一部分分配度数:

int sweepAngle = (int)(perc * 360);

每一部分圆弧画完之后,startAngle即可根据当前的sweepAngle递增。这就确保当前的圆弧部分都是以上一圆弧为开始,从而建立一个完整的饼状图形。

显示图标
图标提供了显示饼状图形中各个部分最简洁的方式。一个图标的大小应该与饼状图形中的占有量相对应。

图B显示了一个完整饼状图形及其对应各个部分的图标,包括产品名称、销售总量、以及各个部分的占有量。

图B

总结

这一文章讲述了如何利用JSP绘制饼状图形的方法及算法,这些方法及算法简单而实用,开发人员可以充分地利用这些方法。

时间: 2006-10-12

JavaScript根据数据生成百分比图和柱状图的实例代码

复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title>   <xml:namespace prefix="v"/>   <style>    v\:* {behavior=url(#default#VML)}   </style>   <style>   a:hover {color:maroon}   h2 {color:#006600;  

使用js画图之饼图

使用js画图之饼图 饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 复制代码 代码如下: //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){     if(data && data.length > 0){         var accumulationAngleOfSlope = new Number(0); //累计偏移角

javascript 计算两个整数的百分比值

复制代码 代码如下: ///计算两个整数的百分比值 function GetPercent(num, total) { num = parseFloat(num); total = parseFloat(total); if (isNaN(num) || isNaN(total)) { return "-"; } return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + &qu

html+js+highcharts绘制圆饼图表的简单实例

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲线图. gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+. 使用方法:在页

使用javascript获取flash加载的百分比的实现代码

复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>flash download</title> </head> <body> <object id="movie" classid="clsid:d27cdb6e-ae6d

javascript下正则匹配百分比的代码

<script language="javascript">     var re = /^-?\d+%$/;     alert(re.test('50%'));     alert(re.test('-25%'));     alert(re.test('3a5%')); </script>

Javascript highcharts 饼图显示数量和百分比实例代码

Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=

妙用Ajax技术实现局部刷新商品数量和总价实例代码

1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码: <div class="section_container"> <!-- 购物车 --> <div id="shopping_cart"

Android 模拟新闻APP显示界面滑动优化实例代码

内容: 1.滑动优化(滑动时不加载图片,停止才加载) 2.第一次进入时手动加载 代码如下: 1.界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:

Vue.js 点击按钮显示/隐藏内容的实例代码

实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

java中对list分页并显示数据到页面实例代码

有时候需要根据条件查询得出的数据较多,需要分页显示到页面上.这时点击下一页就不方便每次带查询条件在数据库中分页.可以在list中进行分页. page的model类: public class Page { private Integer currentPage;//当前页 private int pageSize;//每页显示记录条数 private int totalPage;//总页数 private List<?> dataList;//每页显示的数据 private int star;

JavaScript实现实时更新系统时间的实例代码

一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()

JavaScript中boolean类型之三种情景实例代码

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

JavaScript操作select元素和option的实例代码

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

JavaScript Base64 作为文件上传的实例代码解析

例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

Bootstrap中点击按钮后变灰并显示加载中实例代码

Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮