12.10.1在web端显示图形
在集算器中用函数G.draw() 绘制图形时，会用图片生成byte数组返回，在网页中即可根据图片数据来生成图片。
在这里，我们看一个简单的例子，如下面的运动员成绩柱图画法ChartGYM.dfx：
|
|
A |
|
1 |
=canvas() |
|
2 |
=demo.query("select * from GYMSCORE where NAME=?",name) |
|
3 |
=A1.plot("BackGround") |
|
4 |
=A1.plot("EnumAxis","name":"x","xEnd":0.9,"xPosition":0.7) |
|
5 |
=A1.plot("NumericAxis","name":"y","location":2,"yStart":0.7) |
|
6 |
=A1.plot("Column","axis1":"x","data1":A2.(EVENT),"axis2":"y", "data2":A2.(SCORE)) |
|
7 |
=A1.plot("Text","text":name,"x":0.5,"y":-30,"textFont":"Arial","textStyle":3, "textSize":16,"textColor":-10092340) |
|
8 |
return A1.draw@p(450,200) |
这个画法与12.7柱图元 中使用的例子类似，可以从中更详细了解。在画法中name是网格参数，用来指定某个运动员的姓名：
在这里，需要将绘制的图形用return函数返回，以供web端调用。
在画法中，暂时没有使用超链接，我们将在下一节中了解超链接属性的使用。下面，准备在web端显示画法中的图形，需要做如下部署：
1. 在apache-tomcat-6.0.43中部署应用testChart。
<Context path="/testChart" docBase="D:\tools\apache-tomcat-6.0.43\testChart" debug="0" privileged="true">
</Context>
2. 在应用目录testChart下，放置集算器所需的jar包，包括基础jar包和hsql驱动hsqldb.jar；并放置所需的配置文件raqsoftConfig.xml。具体的说明可以阅读6.3 JDBC部署。
3. 准备一个类com.SaveChart，用来在运行时存储图片数据，代码如下：
package com;
import java.util.HashMap;
public class SaveChart {
private static HashMap<String, byte[]> chartMap = new HashMap();
public static void addChart(String id, byte[] bytes) {
chartMap.put(id, bytes);
}
public static byte[] getChart(String id) {
return chartMap.get(id);
}
public static void clear() {
chartMap.clear();
}
}
在这个类中，使用静态方法addChart来存储一个图片的byte数组数据，用getChart取出。编译后，将这个类部署在应用目录的WEB-INF/classes/com路径下
4. 在应用目录下，准备readChart.jsp文件，用来从SaveChart类中读取指定的PNG图片：
<%@page contentType="text/html; charset=gb2312" language="java" import="com.SaveChart, java.io.*" errorPage=""%>
<!DOCTYPE html>
<%
String chartID = request.getParameter("id");
byte[] image = SaveChart.getChart(chartID);
try {
response.setContentType("image/png");
OutputStream os = response.getOutputStream();
os.write(image);
os.close();
}
catch (Exception e) {
}
%>
在readChart.jsp中，需要读取的图片编号将由参数id传入。
5. 在应用目录下，准备testChart.jsp文件，用来计算指定的dfx文件，将结果中的图片字节存储入SaveChart中，并调用readChart.jsp显示图片：
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*, com.SaveChart" errorPage=""%>
<!DOCTYPE html>
<%
String dfx = request.getParameter("dfx");
String arg = request.getParameter("arg");
Connection con = null;
java.sql.PreparedStatement st;
String chartID = "testChart";
try {
Class.forName("com.esproc.jdbc.InternalDriver");
con= DriverManager.getConnection("jdbc:esproc:local://");
String callDfx = dfx;
//允许设定1个参数，如果有参数，则用call dfx(arg)的方式调用
if (arg != null) {
callDfx += "(\""+arg+"\")";
}
else {
callDfx += "()";
}
st =con.prepareCall("call "+callDfx);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
byte[] image = (byte[]) rs.getObject(1);
SaveChart.addChart(chartID, image);
}
catch (Exception e) {
}
finally {
if (con != null) {
try {
con.close();
}
catch (Exception e) {
e.printStackTrace();
}
}
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>testChart</title>
</head>
<body>
<img src="readChart.jsp?id=<%=chartID%>">
</body>
</html>
在testChart.jsp中，需要读取的图片编号将由参数dfx传入，并可以设定一个参数arg。
在这里调用dfx来参与计算的相关的内容可以阅读6.2被JAVA调用。
启动tomcat，此时就可以展示上面的画法绘制的图片。如在浏览器中访问地址http://localhost:8080/testChart/testChart.jsp?dfx=ChartGYM&arg=Ana Silva，结果如下：
