Fusioncharts ---多折線圖,多柱形圖(2D)
阿新 • • 發佈:2019-02-12
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,這裡面圖表的型別還有很多,今後碰到了新的圖表在補充。