WEB 集成与超链接

阅读(316) 标签: web集成, 超链接,

12.1绘图基本流程12.2坐标系与转换,以及一系列集算器图形的图元使用文档中,已经介绍了在集算器中绘制图形的方法。如果绘制的图形需要在web端展现,那么图中的超链接是经常需要使用的。在这里,我们一起来了解如何在使用集算器绘制图形时,设定超链接,以及设定的超链接如何使用。

在 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.2JAVA调用

 

启动tomcat,此时就可以展示上面的画法绘制的图片。如在浏览器中访问地址http://localhost:8080/testChart/testChart.jsp?dfx=ChartGYM&arg=Ana Silva,结果如下:

图元的超链接属性

上一节中的画法,可以显示某个运动员的成绩,如果使用超链接,就可以实现从另一个总成绩图中点击查看每位运动员成绩的效果。如下面的总成绩柱图画法ChartGYMMain.dfx

 

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?dfx=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","x":0.5,"y":-30,"textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900)

8

return A1.draw@p(450,200),A1.hlink()

在这里,从A2中获取的是所有运动员的成绩,并在下面的画法中绘制堆积柱图。特别的,在A6的柱图元中,添加了超链接的相关属性如下:

超链接Html link指向testChart.jsp,将dfx设为单个运动员的图形画法ChartGYM,并设定了参数arg为对应的运动员姓名。另外,设定了Html tip为运动员姓名,同时修改Link target属性,从默认的新窗口_blank改为当前窗口_selfLink target属性还可以根据html的规则设定为其它值,如_parent, _top等。

另外,需要注意的是,因为添加了超链接,获得的超链接计算结果需要用函数G.hlink() 返回为字符串。在A8中,返回了2个结果:图片字节与图片超链接。

为了可以从某个运动员的图形返回总图,现在修改上一节中的画法ChartGYM.dfx

6

=A1.plot("Column","htmlLink":"testChart.jsp?dfx=ChartGYMMain","tipTitle": A2.(EVENT),"linkTarget":"_self","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),A1.hlink()

在这里,在柱图元中添加了超链接属性,同时修改了A8中的return语句,用它同时返回图片字节和超链接。其中A6中柱图元的超链接属性如下:

 

由于在使用了超链接之后,从dfx中同时返回了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 dfx = request.getParameter("dfx");

String arg = request.getParameter("arg");

Connection con = null;

java.sql.PreparedStatement st;

String chartID = "testChart";

String links = "";

try {

  Class.forName("com.esproc.jdbc.InternalDriver");

  con= DriverManager.getConnection("jdbc:esproc:local://");

  String callDfx = dfx;

  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);

  //开始查看下一个结果,处理超链接的计算结果

  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?dfx=ChartGYMMain,结果如下:

 

此时,柱图上的超链接属性已经生效,当鼠标悬停在柱图区域时,会弹出设定的tip信息,如果点击,则会跳转到所选运动员的图形:

使用 SVG 图形

在集算器绘图时,也可以选择将图形输出为SVG矢量图,使用SVG图形时,情况和普通的png,jpggif图形是有所不同的。

首先,画法有一些区别,先来看看下面的运动员成绩柱图画法ChartSVG.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","htmlLink":"testChartSVG.jsp?dfx=ChartSVGMain","linkTarget":"_self","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(550,200)

使用的参数name也与第1节中的画法相同,与之相比最主要的区别就是A8G.draw() 不必添加选项,而且不必另用G.hlink() 返回超链接信息。在这里,超链接改为使用testChartSVG.jsp,代码将在后面说明,而总成绩柱图的画法ChartSVGMain.dfx如下:

 

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?dfx=ChartSVG&arg="+NAME),"linkTarget":"_self", "axis1":"x","data1":A2.(NAME+","+EVENT),"axis2":"y","data2":A2.(SCORE))

7

=A1.plot("Text","text":"GYMSCORE","x":0.5,"y":-30,"textFont":"Arial","textStyle":3,"textSize":16,"textColor":-16750900)

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 dfx = request.getParameter("dfx");

String arg = request.getParameter("arg");

Connection con = null;

java.sql.PreparedStatement st;

String svg = "";

try {

  Class.forName("com.esproc.jdbc.InternalDriver");

  con= DriverManager.getConnection("jdbc:esproc:local://");

  String callDfx = dfx;

  if (arg != null) {

  callDfx += "(\""+arg+"\")";

  }

  else {

  callDfx += "()";

  }

  st =con.prepareCall("call "+callDfx);

  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?dfx=ChartSVGMain,结果如下:

点击即可执行超链接跳转如下: