今天花了一天的时间研究了下在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>
效果: