highcharts 组合chart

/**
*制作 复杂的组合型的 charts
*
*@param [options] 图表的默认配置
*@dependence jQuery、highcharts
*@author wch
*/
function ComboCharts(options){	
		
		//定义jQuery变量，以防冲突
		var $= jQuery;
		
		var _dom_id = '';
		
		/*默认设置*/
		var _def_optins = $.extend(true,{
				title: {
            text:''
        },
        xAxis: {
            categories: []
        },
        labels: {
            items: []
        },
        series:[],
        credits:{
        	enabled:false	
        },
        legend:{align:'center'},
        tooltip: {
                shared: true
        }
		},options);
		
	
		
		/**
		* 更改默认设置，大多数情况下不会使用
		*@param opt的具体值要参考 highcharts官方api
		*/
		function setOptions(opt){
			_def_optins = $.extend(true,_def_optins,opt);
		}
		/**
		*设置标题
		*@param [title] 主标题
		*@param [subtitle] 副标题
		*/
		function setTitle(title,subtitle){
			title && $.extend(true,_def_optins,{title:{text:title}});
			subtitle && $.extend(true,_def_optins,{subtitle:{text:subtitle}});
		}
		/**
		*设置颜色数组
		*@param colors 颜色数组
		*/
		function setColors(colors_arr){
			colors_arr && (_def_optins.colors = colors_arr);
		}
		/**
		*设置legend的位置
		*@param align ---right,left,center
		*@param vertical ---top,middle,bottom
		*@param 不传入时，禁用legend
		*/
		function setLegendPosition(align,vertical){
			if(align){
				_def_optins.legend.align = align;	
			}
			if(vertical){
				_def_optins.legend.verticalAlign = vertical;	
			}
			if(!align && !vertical){
				_def_optins.legend.enabled = false;	
			}
		}
		/**
		*在chart上面添加label
		*@param label配置参见api
		*/
		function addLabel(label){
			label && _def_optins.labels.items.push(label);
		}
		/**
		*设置categories，通常情况下就是x轴
		*@param categories 数组类型
		*/
		function setCategories(categories){
			 _def_optins.xAxis.categories = categories || [];
		}
		/**
		* 添加一个图表
		* @param series 参见api
		*/
		function addSeries(series){
			series && _def_optins.series.push(series);
		}
		/**
		*将chart写到页面上
		*@param [dom_id] 是页面上元素的id
		*/
		function writeChart(dom_id){
			//优先使用参数传递的dom_id
			_dom_id = dom_id || _dom_id; 
			if(!noDataToDisplay()){
				$('#'+_dom_id).highcharts(_def_optins);
			}
		}
		/**
		*设置dom_id
		*@param dom_id 页面上元素的id
		*/
		function setDomId(dom_id){
			_dom_id = dom_id;	
		}
		
		/**
		*添加y轴
		*@param [title] 标题
		*@param [unit] 单位
		*@param [offset] 传递true 或者 偏移值
		*或者传递{}yAxis的配置，参见api
		*/
		function addYAxis(title,unit,offset){
			title = title || '',unit = unit || '';
			_def_optins.yAxis =  _def_optins.yAxis || []; 
			
			/*不是数组就转换为数组*/
			if(!Array.isArray(_def_optins.yAxis)){
				var arr = [];
				arr.push(_def_optins.yAxis);
				_def_optins.yAxis = arr;
			}

			/*不是字符串，就是配置对象，直接放入*/
			if(typeof title !== 'string'){
				_def_optins.push(title);
			}else{
						var y = { // Secondary yAxis
              title: {
                  text: title,
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              },
              labels: {
                  format: '{value}'+unit,
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              }
          };
          /*判断传递的是offset还是opposite*/
          if(offset && offset === true){
          	y.opposite = true;
          }else{
          	y.offset = offset;	
          }
				_def_optins.push(y);
			}			
		}

		/**
		* 重写highcharts的导出配置
		*@param flag true --重写，false --禁用
		*/
		function setExporting(flag){
			if(flag === false){
				_def_optins.exporting = {enabled:false};
				return;
			}
			Highcharts.setOptions({lang:{
				contextButtonTitle:'导出菜单',
				downloadJPEG:'导出为JPEG',
				downloadPDF:'导出为PDF',
				downloadPNG:'导出为PNG',
				downloadSVG:'导出为SVG',
				printChart:'打印'				
			}});
		}
		/**
		*判断series是否有数据进行展现
		*@return Boolean
		*/
		function noDataToDisplay(){
			if(!_def_optins.series || _def_optins.series.length === 0){
				$('#'+_dom_id).css({"vertical-align":"middle","text-align":"center","line-height":($('#'+_dom_id).height()+"px")}).html('没有数据进行展现!');
				return true;
			}
			return false;
		}
		
		return {
				setOptions:setOptions,
				addLabel:addLabel,
				setCategories:setCategories,
				addSeries:addSeries,
				writeChart:writeChart,
				setDomId:setDomId,
				addYAxis:addYAxis,
				setTitle:setTitle,
				setColors:setColors,
				setLegendPosition:setLegendPosition,
				setExporting:setExporting
		};
}

使用demo

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../js/h3charts.js"></script>
		<script type="text/javascript">
$(function () {

       //$('#container').highcharts(
       var opt = 
       {
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }],
            tooltip: {
                shared: true
            },
            series: [{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 3]
        }, {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
            	lineWidth: 2,
            	lineColor: Highcharts.getOptions().colors[3],
            	fillColor: 'white'
            }
        }, {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }, {
                name: 'Joe',
                y: 19,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
        }
       //);
       var mychart = ComboCharts();
		   mychart.setTitle(opt.title.text,opt.subtitle.text);
		   mychart.setCategories(opt.xAxis[0].categories);
		   //mychart.addSeries(opt.series[0]);
		   //mychart.addSeries(opt.series[1]);
		   //mychart.addSeries(opt.series[2]);
		   //mychart.addSeries(opt.series[4]);
		   mychart.setColors(['#ff00ff','#A74442','#87A34C','#70568D','#4095AD','#D7813C',
   					'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']);
		   mychart.setLegendPosition('left','middle');
		   mychart.addLabel({
                html: 'sdfsdif',
                style: {
                    left: '50px',
                    top: '18px',
                    color: Highcharts.getOptions().colors[0] || 'black'
                }
            });
       mychart.setDomId("container");
       mychart.setExporting(false);
		   mychart.writeChart();
    });
    

		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

转载于:https://www.cnblogs.com/vvch/p/4027566.html