1,使用到這個插件的情況是，做報表。很突然的情況，要給某個公司做報表，看見項目中前輩使用的是fusioncharts這個插件，於是也就接着使用了。本次展示多折線圖，和多柱形圖(2D)。
2，圖表的實現包括3個部分
a)數據庫對數據進行查詢拼裝
b)控制層將數據拼裝成xml格式(或者json，我是採用的xml格式)
c)頁面進行圖形的選擇和設置3，直接上代碼了。
a.首先看我的數據庫部分
b.在看我的控制層代碼
@RequestMapping("createNewUserChart")
public ModelAndView createNewUserChart(){
String dataXml = "<graph startingAngle='70' bgColor='99CCFF' decimals='0' bgRatio='0,100' "
+ "bgAngle='360' enableRotation='0' xAxisName ='處理人' yAxisName='系統工單' numberprefix='' snumbersuffix='%25' "
+ " enableSmartLabels='1' caption='人員-系統工單一統計圖表' showBorder='0' bgAlpha='40,100' >";
List<Map<String, Object>> list = chartService.getNewUserChar();
String categories = "<categories>";//x軸的數據
//y軸的數據
String dataset1 = "<dataset seriesName='測試1' >";
String dataset2 = "<dataset seriesName='測試2' >";
String dataset3 = "<dataset seriesName='測試3' >";
String dataset4 = "<dataset seriesName='測試4' >";
for (Map<String, Object> map : list) {
categories += "<category label='" + map.get("COUNT0") + "' />";
dataset1 += "<set value='" + map.get("COUNT1") + "' />";
dataset2 += "<set value='" + map.get("COUNT2") + "' />";
dataset3 += "<set value='" + map.get("COUNT3") + "' />";
dataset4 += "<set value='" + map.get("COUNT4") + "' />";
}
categories += "</categories>";
dataset1 += "</dataset>";
dataset2 += "</dataset>";
dataset3 += "</dataset>";
dataset4 += "</dataset>";
dataXml += categories + dataset1 + dataset2 + dataset3 + dataset4;
dataXml += "</graph>";
ModelMap model = new ModelMap();
model.put("dataXml", dataXml);
return new ModelAndView("jsp的url",model);
}
至於表格頭部數據的參數設置，就去查看api吧。c.頁面展示部分
<script>
$(document).ready(function() {
createCharts();
});
//圖表生成方法
createCharts = function() {
var dataXml = "${dataXml}";
chart1 = new FusionCharts(
"resources/framework/script/fusioncharts/swf/MSLine.swf",
"chart1Id", "100%", "100%");//折線圖
"resources/framework/script/fusioncharts/swf/MSColumn2D.swf","chart1Id", "100%", "100%");//柱形圖（兩個圖展示只能選一個）
chart1.setDataXML(dataXml);
chart1.render("chart1div");
}
</script>
<body>
<div id="chart1div" align="center"></div>
</body>d.插件保存的位置
e.結果展示
a.折線圖
b.柱形圖
4.我是大概的寫了個demo，這裏面圖表的類型還有很多，今後碰到了新的圖表在補充。