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);

 

 

Highcharts是一个用于制作交互式图表JavaScript库,可以创建各种类型的图表,包括复合图表。 要创建一个复合图表,需要使用Highcharts的组合图表功能,该功能允许将多个图表组合在一起以显示多个数据系列。以下是一个创建复合图表的基本步骤: 1. 创建一个空的Highcharts图表对象。 2. 添加一个或多个数据系列,每个系列对应一个不同的图表类型,例如柱状图、折线图、面积图等。 3. 配置每个数据系列的选项,包括颜色、标签、线型等。 4. 配置图表的整体选项,例如标题、图例、坐标轴等。 5. 将图表渲染到HTML页面中。 下面是一个创建包含柱状图和折线图的复合图表的示例代码: ```javascript // 创建一个空的Highcharts图表对象 var chart = Highcharts.chart('container', { title: { text: '复合图表示例' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: [{ // 配置左侧Y轴 title: { text: '销售额' } }, { // 配置右侧Y轴 title: { text: '利润' }, opposite: true }], series: [{ // 添加第一个数据系列,使用柱状图 name: '销售额', type: 'column', yAxis: 0, data: [100, 200, 150, 250, 300, 200] }, { // 添加第二个数据系列,使用折线图 name: '利润', type: 'line', yAxis: 1, data: [50, 100, 80, 120, 150, 100] }] }); ``` 在上面的代码中,我们创建了一个包含柱状图和折线图的复合图表,其中左侧Y轴表示销售额,右侧Y轴表示利润。柱状图表示销售额,折线图表示利润。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值