前台:
<table width="98%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<div id="chartdiv" align="center"></div>
<script type="text/javascript">
function myJs(text){
alert(text);
}
var chart = new FusionCharts("Charts/FCF_Column3D.swf","ChartId","900","400");
//chart.setDataURL(escape("column3DChart!initColumn3D.action"));
$.ajax({
url:'column3DChart!initColumn3D.action',
type:'post',
dataType:'text',
async:false,
error:function(){},
success:function(data){
chart.setDataXML(data);
}
});
chart.render("chartdiv");
</script>
</td>
</tr>
</table>
后台:
public class Column3DChart extends ActionSupport{
private String data;
/**
*
*/
private static final long serialVersionUID = 1L;
public String execute(){
return SUCCESS;
}
public String initColumn3D(){
try{
String s = "ss";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
response.setHeader("cache-control", "no-cache");
response.setHeader("pragma", "no-cache");
response.setHeader("expires", "0");
PrintWriter out = response.getWriter();
String xml = "";
StringBuffer xmlBuffer = new StringBuffer();
/**numberPrefix='$' 代表值前缀为$符
* ¥:'%A5'
* %:'%25'
* '(单引号):'''
* &:'&'
*numberSuffix='%25' 代表后缀为%
*
*下钻:
*1:普通超链接 link='http://www.sina.com'
*2:新窗口超链接 link='n-http://www.126.com'
*3:javaScript链接 link=\"javascript:myJs('一月,462')\"
*注意:在链接中?&都要先编码 在javascript中使用escape()编码 在服务器端使用 java.net.URLEncoder.encode();
*/
xmlBuffer.append("<graph unescapeLink='0' chartTopPadding='30' caption='月销售历史记录' baseFontSize='14' palette='10' xAxisName='月份' yAxisName='值' decimalPrecision='0' formatNumberScale='0'>");
xmlBuffer.append("<set name='一月' value='462' color='AFD8F8' link=\"javascript:myJs('"+ s +"')\"/>");
xmlBuffer.append("<set name='二月' value='857' color='F6BD0F' link='n-http://www.126.com'/>");
xmlBuffer.append("<set name='三月' value='671' color='8BBA00' link='http://www.sina.com'/>");
xmlBuffer.append("<set name='四月' value='900' color='3183DD'/>");
xmlBuffer.append("<set name='五月' value='761' color='008E8E'/>");
xmlBuffer.append("<set name='六月' value='960' color='D64646'/>");
xmlBuffer.append("<set name='七月' value='629' color='8E468E'/>");
xmlBuffer.append("<set name='八月' value='622' color='588526'/>");
xmlBuffer.append("<set name='九月' value='376' color='B3AA00'/>");
xmlBuffer.append("<set name='十月' value='494' color='008ED6'/>");
xmlBuffer.append("<set name='十一月' value='761' color='9D080D'/>");
xmlBuffer.append("<set name='十二月' value='960' color='A186BE'/>");
xmlBuffer.append("</graph>");
xml = xmlBuffer.toString();
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println(xml);
out.flush();
out.close();
}catch(Exception e){
e.printStackTrace();
}
return null;
}
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
}
配置文件(struts.xml):
<action name="column3DChart" class="com.tcsl.charts.action.Column3DChart">
<result>/Contents/Column_3D_Chart.jsp</result>
</action>
以上是FusionChartsFree免费版的,但使用大同小异。
注意点:
1、使用jquery的Aajax方式调用必须使用同步不能使用异步的方式。
2、返回解析的类型要使用文本类型即text类型。
3、如果使用chart.setDataURL(escape("column3DChart!initColumn3D.action"));后面的ajax调用可以注释掉。这里就是访问了一个返回xml的网络url路径,setDataXML方法是访问返回html文本的网络路径。