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>

巴特西

highcharts 组合chart

最新文章

热门文章