FusionCharts+Struts2

邹杰
2023-12-01
前台:
<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文本的网络路径。
 类似资料: