/** * @author wsf hightcharts封装调用 */ ; (function (win,$){ $.chartDataCache = {};//图表数据缓存 /** * hightchart扩展 */ function myChart (){ this.colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']; this.chartType={}; this.title = "";//主标题 this.subtitle = "";//子标题 this.foottitle = ""; this.pointWidth = 50;//图像宽度 this.yAxis = "收入"; //y坐标标题 this.tooltip = "元"; this.legend = { itemDistance: 50, borderWidth: 1, shadow: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF') };//图例 this.data = [];//数据对象 } /** * 原型对象 */ myChart.prototype = { constructor:myChart,//构造函数 //生成图表 createChart:function (container,data,flg){ var that = this; var opt = null; if(flg&&flg == "muti") opt = that.parse2xAxisAndChartdataMulti(data);//将数据解析为横坐标和chart数据(多维度) else opt = that.parse2xAxisAndChartdata(data);//将数据解析为横坐标和chart数据 $.chartDataCache[flg] = opt;//缓存数据 container.highcharts({ chart: that.chartType, title:{ text:that.title, x:0 }, xAxis:{ categories:opt.x }, yAxis:{ title : { text : this.yAxis }, plotLines : [ { value : 0, width : 1, color : '#808080' } ] }, plotOptions: { series: { pointWidth: this.pointWidth } }, tooltip:{ valueSuffix:that.tooltip }, legend:that.legend, series:opt.d }); }, //把请求回来的数据解析为横坐标和chart数据 parse2xAxisAndChartdata:function (data){ var opt = {}; opt.x = [];//横坐标 opt.d = [];//chart数据 var _ddata = []; for(var i in data){ var _nm = $.trim(data[i].name);//名称 var _d = parseFloat(data[i].data);//数据 opt.x.push(_nm); var td = {color:this.colors[i],y:_d}; _ddata.push(td); } opt.d.push({name:this.foottitle,data:_ddata}); return opt; }, //把请求回来的数据解析为横坐标和chart数据(多维度) parse2xAxisAndChartdataMulti:function (data){ var opt = {}; opt.x = [];//横坐标 opt.d = [];//chart数据 var gpdata = this.groupData(data); opt.x = gpdata[1];//月份 for(var i in gpdata[0]){ var tmpdata = {}; var name = gpdata[0][i]; tmpdata["name"] = name; tmpdata["data"] = []; for(var j in data){ var tdata = data[j]; var _nm = $.trim(tdata.name); var _d = parseFloat(tdata.data);//数据 if(_nm == name){ tmpdata["data"].push(_d); } } opt.d.push(tmpdata); } return opt; }, //js分组 groupData:function(data,groupname){ var ret = []; var tempret = []; var tempret2 = []; var names = {},times={}; for(var i in data){ var tdata = data[i]; var _nm = $.trim(tdata.name); var _time = $.trim(tdata.time).substring(4);//时间 if(!names[_nm]){ tempret.push(_nm); names[_nm] = 1;//标示已经添加过 } if(!times[_time]){ tempret2.push(parseInt(_time,10)+"月"); times[_time] = 1;//标示已经添加过 } } ret.push(tempret); ret.push(tempret2); return ret; }, //创建饼图 createPieChart:function (container,data,flg){ this.chartType = { type:"pie"//饼图 }; this.createChart(container,data,flg); }, //创建折线图 createLineChart:function (container,data,flg){ this.chartType = { type:"line"//折线图 }; this.createChart(container,data,flg); }, //创建柱状图 createColumnChart:function (container,data,flg){ this.chartType = { type:"column"//柱状图 }; this.createChart(container,data,flg); }, //创建柱状图 createBarChart:function (container,data,flg){ this.chartType = { type:"bar"//横向柱状图 }; this.createChart(container,data,flg); } } win.myChart = myChart;//外部调用入口 })(window,jQuery);