WEB 集成与超链接
本节内容，非应用程序员可以跳过，不影响正常阅读。
在绘图基本流程，坐标系与转换，以及一系列集算器图形的图元使用文档中，已经介绍了在集算器中绘制图形的方法。如果绘制的图形需要在web端展现，那么图中的超链接是经常需要使用的。在这里，我们一起来了解如何在使用集算器绘制图形时，设定超链接，以及设定的超链接如何使用。
在 web 端显示图形
在集算器中用函数G.draw() 绘制图形时，会用图片生成byte数组返回，在网页中即可根据图片数据来生成图片。
在这里，我们看一个简单的例子，如下面的运动员成绩柱图画法ChartGYM.splx：
|
|
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,"textFont":"Arial","textStyle":3,"textSize":16,"textColor":-10092340,"data1":0.5,"data2":-30) |
|
8 |
return A1.draw@p(450,200) |
这个画法与柱图元 中使用的例子类似，可以从中更详细了解。在画法中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-2.7.3-jdk8.jar；并放置所需的配置文件raqsoftConfig.xml。具体的说明可以阅读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文件，用来计算指定的脚本文件，将结果中的图片字节存储入SaveChart中，并调用readChart.jsp显示图片：
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*, com.SaveChart" errorPage=""%>
<!DOCTYPE html>
<%
String spl = request.getParameter("spl");
String arg = request.getParameter("arg");
Connection con = null;
java.sql.CallableStatement st;
String chartID = "testChart";
try {
Class.forName("com.esproc.jdbc.InternalDriver");
con= DriverManager.getConnection("jdbc:esproc:local://");
String callSpl = spl;
//允许设定1个参数，如果有参数，则用call spl(arg)的方式调用
if (arg != null) {
callSpl += "(\""+arg+"\")";
}
else {
callSpl += "()";
}
st =con.prepareCall("call "+callSpl);
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中，需要读取的图片编号将由参数spl传入，并可以设定一个参数arg。
在这里调用脚本文件来参与计算的相关的内容可以阅读被JAVA调用。
启动tomcat，此时就可以展示上面的画法绘制的图片。如在浏览器中访问地址http://localhost:8080/testChart/testChart.jsp?spl=ChartGYM&arg=Ana Silva，结果如下：
图元的超链接属性
上一节中的画法，可以显示某个运动员的成绩，如果使用超链接，就可以实现从另一个总成绩图中点击查看每位运动员成绩的效果。如下面的总成绩柱图画法ChartGYMMain.splx：
|
|
A |
|
1 |
=canvas() |
|
2 |
=demo.query("select * from GYMSCORE") |
|
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","stackType":2,"htmlLink":A2.("testChart.jsp?spl=ChartGYM&arg="+NAME),"tipTitle":A2.(NAME),"linkTarget":"_self","axis1":"x","data1":A2.(NAME+","+EVENT),"axis2":"y","data2":A2.(SCORE)) |
|
7 |
=A1.plot("Text","text":"GYMSCORE","textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900,"data1":0.5,"data2":-30) |
|
8 |
return A1.draw@p(450,200),A1.hlink() |
在这里，从A2中获取的是所有运动员的成绩，并在下面的画法中绘制堆积柱图。特别的，在A6的柱图元中，添加了超链接的相关属性如下：
超链接Html link指向testChart.jsp，将spl设为单个运动员的图形画法ChartGYM，并设定了参数arg为对应的运动员姓名。另外，设定了Html tip为运动员姓名，同时修改Link target属性，从默认的新窗口_blank改为当前窗口_self。Link target属性还可以根据html的规则设定为其它值，如_parent, _top等。
另外，需要注意的是，因为添加了超链接，获得的超链接计算结果需要用函数G.hlink() 返回为字符串。在A8中，返回了2个结果：图片字节与图片超链接。
为了可以从某个运动员的图形返回总图，现在修改上一节中的画法ChartGYM.splx：
|
6 |
=A1.plot("Column","htmlLink":"testChart.jsp?spl=ChartGYMMain","tipTitle": A2.(EVENT),"linkTarget":"_self","axis1":"x","data1":A2.(EVENT),"axis2":"y", "data2":A2.(SCORE)) |
|
7 |
=A1.plot("Text","text":"GYMSCORE","textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900,"data1":0.5,"data2":-30) |
|
8 |
return A1.draw@p(450,200),A1.hlink() |
在这里，在柱图元中添加了超链接属性，同时修改了A8中的return语句，用它同时返回图片字节和超链接。其中A6中柱图元的超链接属性如下：
由于在使用了超链接之后，从脚本文件中同时返回了2个结果，因此也需要修改readChart.jsp，处理返回的超链接：
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,
java.io.*,java.util.*,com.SaveChart" errorPage=""%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
String spl= request.getParameter("spl");
String arg = request.getParameter("arg");
Connection con = null;
java.sql.CallableStatement st;
String chartID = "testChart";
String links = "";
try {
Class.forName("com.esproc.jdbc.InternalDriver");
con= DriverManager.getConnection("jdbc:esproc:local://");
String callSpl = spl;
if (arg != null) {
callSpl += "(\""+arg+"\")";
}
else {
callSpl += "()";
}
st =con.prepareCall("call "+ callSpl);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
byte[] image = (byte[]) rs.getObject(1);
SaveChart.addChart(chartID, image);
//开始查看下一个结果，处理超链接的计算结果
st.getMoreResults();
rs = st.getResultSet();
rs.next();
links = (String) rs.getObject(1);
}
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%>" usemap="#<%=chartID%>map">
<map id="<%=chartID%>map"><%=links%>
</map>
</body>
</html>
在上面的代码中，获取图片字节后，将超链接信息在html代码中存入图片使用的map属性，以使其生效。
此时，如在浏览器中访问地址http://localhost:8080/testChart/testChart.jsp?spl=ChartGYMMain，结果如下：
此时，柱图上的超链接属性已经生效，当鼠标悬停在柱图区域时，会弹出设定的tip信息，如果点击，则会跳转到所选运动员的图形：
使用 SVG 图形
在集算器绘图时，也可以选择将图形输出为SVG矢量图，使用SVG图形时，情况和普通的png,jpg和gif图形是有所不同的。
首先，画法有一些区别，先来看看下面的运动员成绩柱图画法ChartSVG.splx：
|
|
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","htmlLink":"testChartSVG.jsp?spl=ChartSVGMain","linkTarget":"_self","axis1":"x","data1":A2.(EVENT),"axis2":"y","data2":A2.(SCORE)) |
|
7 |
=A1.plot("Text","text":name,"textFont":"Arial","textStyle":3,"textSize":16,"textColor":-10092340,"data1":0.5,"data2":-30) |
|
8 |
return A1.draw(550,200) |
使用的参数name也与第1节中的画法相同，与之相比最主要的区别就是A8中G.draw() 不必添加选项，而且不必另用G.hlink() 返回超链接信息。在这里，超链接改为使用testChartSVG.jsp，代码将在后面说明，而总成绩柱图的画法ChartSVGMain.splx如下：
|
|
A |
|
1 |
=canvas() |
|
2 |
=demo.query("select * from GYMSCORE") |
|
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","stackType":2,"htmlLink": A2.("testChartSVG.jsp?spl=ChartSVG&arg="+NAME),"linkTarget":"_self", "axis1":"x","data1":A2.(NAME+","+EVENT),"axis2":"y","data2":A2.(SCORE)) |
|
7 |
=A1.plot("Text","text":"GYMSCORE","textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900,"data1":0.5,"data2":-30) |
|
8 |
return A1.draw(550,200) |
同样返回SVG类型图片，超链接中也同样使用testChartSVG.jsp。
下面来看testChartSVG.jsp的代码：
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""%>
<!DOCTYPE html>
<%
String spl = request.getParameter("spl");
String arg = request.getParameter("arg");
Connection con = null;
java.sql.CallableStatement st;
String svg = "";
try {
Class.forName("com.esproc.jdbc.InternalDriver");
con= DriverManager.getConnection("jdbc:esproc:local://");
String callSpl = spl;
if (arg != null) {
callSpl += "(\""+arg+"\")";
}
else {
callSpl += "()";
}
st =con.prepareCall("call "+ callSpl);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
Object o = rs.getObject(1);
byte[] bytes = (byte[]) rs.getObject(1);
svg = new String(bytes, "UTF-8");
}
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>testSVG</title>
</head>
<body>
<%=svg%>
</body>
</html>
与第1节中的testChart.jsp比较，这里不再需要另用readChart.jsp去处理图片，而是直接用获取的byte数组生成SVG图片的代码，在html中即可直接使用。
SVG代码中，可以包含超链接信息，因此不需要用第2节中的方法另外处理。需要注意的是，SVG的代码需要支持HTML5.0的浏览器才能使用，如IE9以上版本。
此时，如在浏览器中访问地址http://localhost:8080/testChart/testChartSVG.jsp?spl=ChartSVGMain，结果如下：
点击即可执行超链接跳转如下：
