`
hellostory
  • 浏览: 124562 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
highchart图表控件封装调用(持续更新……) highchart highchart图表控件封装调用(持续更新……)
/**
 * @author wsf hightcharts封装调用
 */
;
(function (win,$){
	/**
	 * 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数据
			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 _ddata = [];
			var tempd1,tempd2,tempd3,tempd4;
			for(var i in data){
				var tdata = data[i];
				var _nm = $.trim(tdata.name);
				var _time = $.trim(tdata.time);//时间
				var _d = parseFloat(tdata.data);//数据
				opt.x.push(_time);
				var td = {color:this.colors[i],y:_d};
				_ddata.push(td);
				tempd1 = {name:"",data:[100,300,20,500,600,800,450,140]};
				tempd2 = {name:"",data:[800,100,400,30,500,800,200,10]};
				tempd3 = {name:"",data:[400,600,100,300,300,600,100,100]};
			}
			opt.d.push(tempd1);
			opt.d.push(tempd2);
			opt.d.push(tempd3);
			return opt;
		},
		//创建饼图
		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);
Global site tag (gtag.js) - Google Analytics