## 19.5 在HMTL页面种嵌入图表
在HTML页面中嵌入servlet产生的图表图像也是可以的,下面实例ServletDemo2演示了这一特征。ServletDemo2实例处理一个HTML页面的请求,该HTML引用了另一个servlet(ServletDemo2ChartGenerator),引用的这个servlet返回了一个图表产生的PNG图像。最终的结果就是将图表嵌入到了一个HTML中,如图19.2所示:
![](https://box.kancloud.cn/2016-01-23_56a3408716cbc.png)
如图19.2 浏览器中的ServletDemo2
全部代码如下:
```
package demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* A basic servlet that generates an HTML page that displays a chart generated
* by JFreeChart.
* <P>
* This servlet uses another servlet (ServletDemo2ChartGenerator) to create a
* PNG image for the embedded chart.
* <P>
* This class is described in the JFreeChart Developer Guide.
*/
public class ServletDemo2 extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 9024040467697909853L;
/**
* Creates a new servlet demo.
*/
public ServletDemo2() {
// nothing required
}
/**
* Processes a POST request.
* <P>
* The chart.html page contains a form for generating the first request,
* after that the HTML returned by this servlet contains the same form for
* generating subsequent requests.
*
* @param request
* the request.
* @param response
* the response.
*
* @throws ServletException
* if there is a servlet related problem.
* @throws IOException
* if there is an I/O problem.
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = new PrintWriter(response.getWriter());
try {
String param = request.getParameter("chart");
response.setContentType("text/html");
out.println("<HTML>");
out.println("<HEAD>");
out.println("<TITLE>JFreeChart Servlet Demo 2</TITLE>");
out.println("</HEAD>");
out.println("<BODY>");
out.println("<H2>JFreeChart Servlet Demo</H2>");
out.println("<P>");
out.println("Please choose a chart type:");
out.println("<FORM ACTION=\"ServletDemo2\" METHOD=POST>");
String pieChecked = (param.equals("pie") ? " CHECKED" : "");
String barChecked = (param.equals("bar") ? " CHECKED" : "");
String timeChecked = (param.equals("time") ? " CHECKED" : "");
out.println("<INPUT TYPE=\"radio\" NAME=\"chart\" VALUE=\"pie\""
+ pieChecked + "> Pie Chart");
out.println("<INPUT TYPE=\"radio\" NAME=\"chart\" VALUE=\"bar\""
+ barChecked + "> Bar Chart");
out.println("<INPUT TYPE=\"radio\" NAME=\"chart\" VALUE=\"time\""
+ timeChecked + "> Time Series Chart");
out.println("<P>");
out.println("<INPUT TYPE=\"submit\" VALUE=\"Generate Chart\">");
out.println("</FORM>");
out.println("<P>");
out.println("<IMG SRC=\"ServletDemo2ChartGenerator?type=" + param
+ "\" BORDER=1 WIDTH=400 HEIGHT=300/>");
out.println("</BODY>");
out.println("</HTML>");
out.flush();
out.close();
} catch (Exception e) {
System.err.println(e.toString());
} finally {
out.close();
}
}
}
```
注意该代码是如何从响应的参数获得一个引用的,而不是上面实例中的一个输出流。愿意是因为该servlet将返回HTML文本,与前章返回的二进制数据(一个PNG图片)不同。响应的类型设置成为text/html格式,因为servlet返回的是HTML文件。重要的一点就是HTML引用另一个servlet(ServletDemo2ChartGenerator)中的<IMG>标签,ServletDemo2ChartGenerator创建了必要的图表图片。HTML使用<FORM>元素来建立图表参数控制着实际图表的返回。
下面是ServletDemo2ChartGenerator的全部代码:
```
package demo;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.data.time.Day;
import org.jfree.data.time.TimeSeries;
import org.jfree.data.time.TimeSeriesCollection;
import org.jfree.data.xy.XYDataset;
import org.jfree.date.SerialDate;
/**
* A servlet that returns one of three charts as a PNG image file. This servlet
* is referenced in the HTML generated by ServletDemo2.
* <P>
* Three different charts can be generated, controlled by the ’type’ parameter.
* The possible values are ’pie’, ’bar’ and ’time’ (for time series).
* <P>
* This class is described in the JFreeChart Developer Guide.
*/
public class ServletDemo2ChartGenerator extends HttpServlet {
/**
* Default constructor.
*/
public ServletDemo2ChartGenerator() {
// nothing required
}
/**
* Process a GET request.
*
* @param request
* the request.
* @param response
* the response.
*
* @throws ServletException
* if there is a servlet related problem.
* @throws IOException
* if there is an I/O problem.
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
OutputStream out = response.getOutputStream();
try {
String type = request.getParameter("type");
JFreeChart chart = null;
if (type.equals("pie")) {
chart = createPieChart();
} else if (type.equals("bar")) {
chart = createBarChart();
} else if (type.equals("time")) {
chart = createTimeSeriesChart();
}
if (chart != null) {
response.setContentType("image/png");
ChartUtilities.writeChartAsPNG(out, chart, 400, 300);
}
} catch (Exception e) {
System.err.println(e.toString());
} finally {
out.close();
}
}
/**
* Creates a sample pie chart.
*
* @return a pie chart.
*/
private JFreeChart createPieChart() {
// create a dataset...
DefaultPieDataset data = new DefaultPieDataset();
data.setValue("One", new Double(43.2));
data.setValue("Two", new Double(10.0));
data.setValue("Three", new Double(27.5));
data.setValue("Four", new Double(17.5));
data.setValue("Five", new Double(11.0));
data.setValue("Six", new Double(19.4));
JFreeChart chart = ChartFactory.createPieChart("Pie Chart", data, true,
true, false);
return chart;
}
/**
* Creates a sample bar chart.
*
* @return a bar chart.
*/
private JFreeChart createBarChart() {
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(10.0, "S1", "C1");
dataset.addValue(4.0, "S1", "C2");
dataset.addValue(15.0, "S1", "C3");
dataset.addValue(14.0, "S1", "C4");
dataset.addValue(-5.0, "S2", "C1");
dataset.addValue(-7.0, "S2", "C2");
dataset.addValue(14.0, "S2", "C3");
dataset.addValue(-3.0, "S2", "C4");
dataset.addValue(6.0, "S3", "C1");
dataset.addValue(17.0, "S3", "C2");
dataset.addValue(-12.0, "S3", "C3");
dataset.addValue(7.0, "S3", "C4");
dataset.addValue(7.0, "S4", "C1");
dataset.addValue(15.0, "S4", "C2");
dataset.addValue(11.0, "S4", "C3");
dataset.addValue(0.0, "S4", "C4");
dataset.addValue(-8.0, "S5", "C1");
dataset.addValue(-6.0, "S5", "C2");
dataset.addValue(10.0, "S5", "C3");
dataset.addValue(-9.0, "S5", "C4");
dataset.addValue(9.0, "S6", "C1");
dataset.addValue(8.0, "S6", "C2");
dataset.addValue(null, "S6", "C3");
dataset.addValue(6.0, "S6", "C4");
dataset.addValue(-10.0, "S7", "C1");
dataset.addValue(9.0, "S7", "C2");
dataset.addValue(7.0, "S7", "C3");
dataset.addValue(7.0, "S7", "C4");
dataset.addValue(11.0, "S8", "C1");
dataset.addValue(13.0, "S8", "C2");
dataset.addValue(9.0, "S8", "C3");
dataset.addValue(9.0, "S8", "C4");
dataset.addValue(-3.0, "S9", "C1");
dataset.addValue(7.0, "S9", "C2");
dataset.addValue(11.0, "S9", "C3");
dataset.addValue(-10.0, "S9", "C4");
JFreeChart chart = ChartFactory.createBarChart3D("Bar Chart",
"Category", "Value", dataset, PlotOrientation.VERTICAL, true,
true, false);
return chart;
}
/**
* Creates a sample time series chart.
*
* @return a time series chart.
*/
private JFreeChart createTimeSeriesChart() {
// here we just populate a series with random data...
TimeSeries series = new TimeSeries("Random Data");
Day current = new Day(1, SerialDate.JANUARY, 2001);
for (int i = 0; i < 100; i++) {
series.add(current, Math.random() * 100);
current = (Day) current.next();
}
XYDataset data = new TimeSeriesCollection(series);
JFreeChart chart = ChartFactory.createTimeSeriesChart(
"Time Series Chart", "Date", "Rate", data, true, true, false);
return chart;
}
}
```
下一章讲述servlet的支持文件 ,与如何部署它们。
- 1 简介
- 1.1 什么是JFreeChart
- 1.2 使用文档
- 1.3 感谢
- 1.4 建议
- 2 图表实例
- 2.1 介绍
- 2.2 饼图(Pie Charts)
- 2.3 直方条形图(Bar Charts)
- 2.4 折线图(Line Charts)
- 2.5 XY(散点图)
- 2.6 时序图
- 2.7 柱状图
- 2.8 面积图
- 2.9 差异图
- 2.10 梯形图
- 2.11 甘特图
- 2.12 多轴图
- 2.13 复合/覆盖图
- 2.14 开发远景
- 3 下载和安装JFreeChart 1.0.6
- 3.1 简介
- 3.2 下载
- 3.3 解包
- 3.4 运行演示实例
- 3.5 编译源代码
- 3.6 产生javadoc文档
- 4 使用JFreeChart1.0.6
- 4.1 概述
- 4.2 创建第一个图表
- 5 饼图(Pie Charts)
- 5.1 简介
- 5.2 创建一个简单的饼图(Pie Charts)
- 5.3 片区颜色
- 5.4 片区外廓
- 5.5 空置、零值和负值
- 5.6 片区和图例标签
- 5.7 “取出”某个片区
- 5.8 3D饼图
- 5.9 多饼图
- 5.10 实例讲解
- 6 直方条形图(Bar Charts)
- 6.1 简介
- 6.2 创建一个直方条形图
- 6.3 ChartFactory类
- 6.4 直方条形图的简单定制
- 6.5 定制外观
- 6.6 示例代码解读
- 7 折线图
- 7.1 简介
- 7.2 使用categoryDataset数据集创建折线图
- 7.3 使用XYDataset数据集创建折线图
- 8 时序图
- 8.1 简介
- 8.2 创建时序图
- 9 定制图表(Customising Charts)
- 9.1 简介
- 9.2 图表属性
- 9.3 图区属性
- 9.4 轴属性
- 9.5 心得体会
- 10 动态图(Dynamic Charts)
- 10.1 简介
- 10.2 知识背景
- 10.3 实例应用
- 11 图表工具条(Tooltips)
- 11.1 概述
- 11.2 创建图表工具条
- 11.3 收集图表工具条
- 11.4 显示图表工具条
- 11.5 隐藏图表工具条
- 11.6 定制图表工具条
- 12 图表条目标签(Item Label)
- 12.1 简介
- 12.2 显示条目标签
- 12.3 条目标签外观
- 12.4 条目标签位置
- 12.5 定制条目标签文本
- 12.6 实例1
- 12.7 实例2
- 13 多轴和数据源图表(Multi Axis and Dataset)
- 13.1 简介
- 13.2 实例
- 13.3 建议和技巧
- 14 组合图表(Combined Charts)
- 14.1 简介
- 14.2 组合X种类图区
- 14.3 组合Y种类图区
- 14.4 组合X-XY图区
- 14.5 组合Y-XY图区
- 15 数据源和JDBC(Dataset And JDBC)
- 15.1 简介
- 15.2 关于JDBC
- 15.3 样本数据
- 15.4 PostgreSQL
- 15.5 JDBC驱动
- 15.6 应用演示
- 16 导出图表为PDF格式
- 16.1 简介
- 16.2 什么是Acrobat PDF
- 16.3 IText
- 16.4 Graphics2D
- 16.5 开始导出
- 16.6 实例应用
- 16.7 查看PDF 文件
- 16.8 Unicode字符问题
- 17 导出图表为SVG格式
- 17.1 简介
- 17.2 背景
- 17.3 实例代码
- 18 Applet
- 18.1 简介
- 18.2 问题
- 18.3 实例应用
- 19 Servlets
- 19.1 介绍
- 19.2 编写一个简单的Servlet应用
- 19.3 编译实例Servlet
- 19.4 部署实例Servlet
- 19.5 在HMTL页面种嵌入图表
- 19.6 支持文件
- 19.7 部署Servlets
- 20 JFreeChart相关技术
- 20.1 简介
- 20.2 X11/Headless Java
- 20.3 JSP
- 20.4 加载图片
- 21 包
- 21.1 概述