Highcharts 是一個用純javaScript編寫的一個圖表庫， 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表。支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。但是參考官網的實例，我發現如果在項目中頻繁使用highchart，按照它的方式還是挺復雜的，我這里所謂的復雜并不是難而是麻煩，因為你每寫一個圖表你就必須重新寫類似于下面結構的Javascript代碼：
$('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'A所以如果在項目中使用必定是非常繁瑣的，很有必要對highchart進一步封裝。封裝說的簡單點就是找出共通點。多看幾個highchart的圖表源碼就會發現，他們無非就是這么幾個：標題（title、subTitle）、X軸（xAxis）、Y軸（yAxis）、圖例（legend）、數據點選項（plotOptions）、數據項（series），所以我們只需要對這些個元素進行處理即可。首先先看看我封裝的結果：
var jhc = new $.jHighChart({ renderTo: $("#numberCardChart"), chart:{chartBgColor:"#FBFCFD"}, chartType: "column", title: "商戶會員統計", subtitle: "2014-2015會員統計", xAxisName: "時間", xCategories:responseData.categories, yAxisSetting: [{ key: "numbers",name:"會員數" ,oppositeOption: false}], yAxisColumn: [{ key: "numbers",name:"會員數"}], series: responseData.series, legend:{"enabled":false}, click: function (params) { queryNumberDetail(params); } }); jhc.create();renderTo為展示的DIV ID，chart為圖表的設置、chartType圖表的展示類型、title主標題、subtitle副標題、xAxisName X軸名稱、xCategoriesX軸數據、yAxisSetting Y軸設置、series數據項。
整個highchart的配置option如下：
var options = $.extend({ //背景顏色 chart:{chartBgColor:'#FFFFFF',width:"",height:""}, //需要展示的位置（哪個DOM元素內） renderTo: $(document.body), //圖表類型：bar,line,spline,column,pie,area,areaspline,combine,bubble,scatter chartType: "", //圖表大標題 title: "", //圖表小標題 subtitle: "", //X軸名稱 xAxisName: "", //X軸列表數據，是一個JSON的LIST對象 xCategories:{}, //Y軸設置，可添加多條Y軸， key-Y軸名稱，oppositeOption-true/false（true為right, false為left） yAxisSetting: [{ key: "",name:"" ,oppositeOption: false}], //key-Y軸對應數據，nane-名稱，chartType-圖形類型，yIndex-每個指標集需要對應的具體Y軸索引 yAxisColumn: [{ key: "",name:"",chartType: "", yIndex: 0, color: null}], //圖表數據源，是一個JSON的LIST對象 series: {}, //Point MouSEOver事件 mouseOver: function () { }, //Point mouseOut事件 mouseOut: function () { }, //Point click事件:出發下鉆方法 click: function () { }, //是否開啟導出按鈕 exportButton: true, //圖標容器大小 containerSize:{width:null,height:null}, //圖例選項:默認不顯示：具體的配置請參看API legend:{enabled:false,layout:"",align:"",verticalAlign:"",floating:false,x:"",y:"",backgroundColor:"#FFFFFF"}, //數據點選項 //showInLegend:是否顯示餅圖圖例,dataEnable:是否顯示餅圖數據點 plotOptions:{showInLegend:false,dataEnable:false}, //基本參數設置：主要用于設置圖表高度、寬度 chart:{width:"",height:""} }, setting);上面是對javascript部分進行處理，封裝。但是我們的數據時通過后臺來的，怎么才能將后臺數據封裝到該插件中去呢？可能心細的博友發現了，在上面的使用方法中注意到了這兩個地方：xCategories:responseData.categories、series: responseData.series,responseData為后臺的返回數據，categories為X軸數據，series為數據項。在后臺我是這樣處理的：
上面UML是實現后臺數據的結構圖、其中BuildChartsService為頂層抽象類，向外暴露buildCharts方法，實現圖表的子類需要實現createXAxisCategories、createSeries兩個方法。ChartBaseAction為構建圖表的基礎Action，通過Ajax請求，它的主要功能是提供基本的統計數據valueStack，并對數據項進行封裝處理。SeriesChartVO、SeriesDatasVO兩個類為圖表統計數據項的支撐類，其中SeriesChartVO為統計圖表數據選項VO，一個seriesChartVO對應一條記錄，jHightChart內部實現使用yAxisColumn的key與seriesChartVO的kye進行一一對應。SeriesDatasVO為統計圖表數，統計內部數據表現形式為:data:[{name:'',y:'',drilldown:'',params:''}]，該類主要是用戶數據項的構建和配置，例如配置下鉆數據參數等等。
實例請求Action繼承構建圖表ChartBaseAction：
public class QueryDailyStatisticsInfoAction extends ChartBaseAction{ private static final long serialVersionUID = 6822826781517049491L; @Resource private IHistoryStatisticsDailyTransService historyStatisticsDailyTransService; @SuppressWarnings("unchecked") @Override public String execute() throws Exception { List<JSON> list = (List<JSON>) getRequest().getsession().getAttribute("dailyList"); valueStack = historyStatisticsDailyTransService.getdailyStatisticsInfo(list); getRequest().getSession().removeAttribute("dailyList"); return SUCCESS; }}該Action通過service的getdailyStatisticsInfo方法來獲取數據，然后構建基本的圖表數據參數Map
private Map<String, Object> buildDailyStatisticsInfo(List<String> categories, List<JSON> list) throws ServiceException{ Map<String, Object> categoriesMap = new HashMap<String, Object>(); categoriesMap.put("list", categories); Map<String, Object> seriesMap = new HashMap<String, Object>(); seriesMap.put("seriesList", list); Map<String, Object> contentMap = new HashMap<String, Object>(); //X軸數據項 contentMap.put("categories", categoriesMap); //數據項 contentMap.put("series", seriesMap); BuildChartsService service = new DailyStatisticsInfoChart(); return service.buildCharts(contentMap); }最后使用DailyStatisticsInfoChart的buildChart方法來實現圖表數據構建
public class DailyStatisticsInfoChart extends BuildChartsService{ @SuppressWarnings("unchecked") protected List<String> createXAxisCategories(Map<String,Object> xAxisMap) { List<String> categories = (List<String>) xAxisMap.get("list"); return categories; } @Override @SuppressWarnings("unchecked") protected List<SeriesChartVO> createSeries(Map<String,Object> contentMap) throws ServiceException { List<JSON> jsons = (List<JSON>) contentMap.get("seriesList"); List<SeriesDatasVO> dataList = new ArrayList<SeriesDatasVO>(); SeriesDatasVO datas = null; for(int i = 0 ; i < jsons.size() ; i++){ JSONObject json = JSONObject.fromObject(jsons.get(i)); String name = (String) json.get("payType"); Object y = json.get("amt"); datas = new SeriesDatasVO(name, y); dataList.add(datas); } SeriesChartVO chartVO = new SeriesChartVO("dailyStatistics", dataList); List<SeriesChartVO> chartList = new ArrayList<SeriesChartVO>(); chartList.add(chartVO); return chartList; }}構建完數據后，最后一步就是使用jHighchart來實現圖表了：
jhc = new $.jHighChart({ renderTo: $("#chartDIV"), chartType: "pie", title: "商戶日結算統計", xAxisName: "", xCategories:responseData.categories, yAxisSetting: [{ key: "dailyStatistics",name:"交易額" ,oppositeOption: false}], yAxisColumn: [{ key: "dailyStatistics",name:"總額"}], series: responseData.series, legend:{"enabled":false}, plotOptions:{"dataEnable":true}, click: function (params) { queryDetail(params); } }); jhc.create();
demo下載chart.rar
-----原文出自:http://cmsblogs.com/?p=1537,請尊重作者辛勤勞動成果,轉載說明出處.
-----個人站點:http://cmsblogs.com
新聞熱點
疑難解答
