Jquery柱状报表

先看效果图

 

 

FusionCharts自认为是所有报表中，开发代码最简单的，只需要写后台业务代码，前台展示不需要自己写。比JFreeChart要简单。直接贴代码。

前台代码

<tr>
    <td class="td3" colspan="2">
     <div class="column">
      <h4>
       最近一个月群众反映问题十大领域统计:
      </h4>
      <!--
      <img src="<%=baseURL %>/zjxf/common/images/index_img2.jpg" />
       -->
      <div id="column3D2"></div><!-- 用于展示报表的层 -->
     </div>
    </td>
   </tr>

Jquery代码

 $.post('<%=baseURL%>/reportAction.do?method=reportDataShowNO1',function(result){
             var column3D1 = new FusionCharts("<%=baseURL%>/zjxf/3d/Column3D.swf", "myChartId", "100%", "195");
             column3D1.setDataXML(result);
             column3D1.render("column3D1");
   });

后台Java代码

/**
  * 后台报表数据展示,十大问题类型统计
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return
  * @throws Exception
  */
 public ActionForward reportDataShowNO2(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
 throws Exception {
  
  response.setCharacterEncoding("gbk");
  List<Object[]> list = this.zjxfItemProUserService.findReportDataNO2();
  
  String xml = "<chart showValues='0' palette='0' shownames='1' legendBorderAlpha='0' useRoundEdges='1'";
  xml += "animation='1' decimalPrecision='0' formatNumberScale='0' baseFont='Arial' baseFontSize='12' rotateYAxisName='0' showFCMenuItem='0' maxColWidth ='30'>";
  
  if(list != null && list.size() > 0){
   for(Object[] s : list){
    xml += "<set label='" + (s[0] == null ? "" : String.valueOf(s[0])) + "' value='" + (s[1] == null ? "" : String.valueOf(s[1])) + "' />";
   }
  }
  xml += "</chart>";
  response.getWriter().print(xml);
  return null;
 }

这样就搞定了，导入所需要的JS和CSS即可。

附件：SWF和JS

       不能上传附件，直接搜索FusionCharts即可。