12.10.2图元的超链接属性
上一节中的画法，可以显示某个运动员的成绩，如果使用超链接，就可以实现从另一个总成绩图中点击查看每位运动员成绩的效果。如下面的总成绩柱图画法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改为当前窗口_self。Link 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信息，如果点击，则会跳转到所选运动员的图形：
