rss· 投稿· 设为首页· 加入收藏· 繁體版
当前位置: 火魔网 » 程序开发 » Javascript

fusionCharts struts2 json图表插件

今天花了一天的时间研究了下在struts2下以json作为数据源如何使用fusionChart插件,发现fusionCharts确实是一个很不错的图表插件,效果非常好,数据格式既可以用xml,也可以用json,都蛮方便的。 下面是我用json数据源的部分代码:
Action:
private List<CompareChart> charlist = null; public List<CompareChart> getCharlist() { return charlist; } public void setCharlist(List<CompareChart> charlist) { this.charlist = charlist; } public String findPartAttr() throws Exception{ //格式前端处理 charlist = qsStaffdailyoutsDao.findPartAttr(qsStaffdailyouts); //获得连接,该连接包含所需要显示的数据 return "chart"; }
//配置文件struts2.xml <action name="harfproduct" class="com.lsxy.action.QsStaffdailyoutsAction" method="findPartAttr">     <result name="chart" type="json"></result>     </action>
html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="Charts/FusionCharts.js"></script> <script src="js/jquery-1.6.1.min.js"></script> </head> <body>
                    <div class="gen-chart-render">
                        <center>                             <div id="chartContainer">FusionCharts will load here</div>
                            <script type="text/javascript"> //获取json数据 $.getJSON('http://localhost:8080/qserp/report/harfproduct!findPartAttr.action', "Default.aspx?t="+ new Date(), function(data) { var abc = ""; $.each(data.charlist, function(i, value) { var emp = data.charlist[i].emp_Name;   //员工名称 var sum = data.charlist[i].sta_Productsum;  //日产量 if(i==0){  abc = "{\"label\":\""+emp+"\",\"value\":\""+sum+"\"}" ;  return; } abc = "{\"label\":\""+emp+"\",\"value\":\""+sum+"\"}"+"," +abc ;  }); abc = "\"data\":[" +abc +"]"; var chart = "{ \"chart\": { \"caption\" : \"员工日产量效率比较\",\"xAxisName\" : \"员工姓名\",\"yAxisName\" : \"日产量(大于1000显示为k)\"},"+abc+"}"; //alert(chart); var myChart = new FusionCharts("Charts/Column3D.swf", "myChartId", "900", "500", "0", "1");
                               myChart.setJSONData(chart);                                myChart.render("chartContainer"); });                             </script>                         </center>
                    </div> </body> </html>
效果: fusionCharts struts2 json图表插件   fusionCharts struts2 json图表插件
顶一下
(0)
踩一下
(0)