highchart图表控件封装调用（持续更新……）

/**
 * @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);

 

 

评论

3 楼 JavaSam 2014-07-18  

lianglaiyang 写道

怎么用呢？

var _myChart = new myChart();

_myChart.foottitle = "yourtitle";
_myChart.createColumnChart($("#incomeChartBusi"),data);//一维度


_myChart.foottitle = "yourtitle";
_myChart.createLineChart($("#incomeChartDeptTime"),data,"muti");//多维

其中data参数根据自己自己需要可以自行修改

自定义解析数据函数

_myChart.parse2xAxisAndChartdata = your function //这句话放在create之前即可

2 楼 lianglaiyang 2014-07-17  

怎么用呢？

1 楼 hellostory 2014-07-17  

不错，受启发了！一开始还想用Java建模，看来这个更方便！