Highcharts混合图（2个Y轴）——结合后台数据

其实做了这么久的highcharts，感觉上手并不太难，难点在于实际应用中，如何动态地拼装出数据结构才是最关键的。最近做了一个混合图，包含两个Y轴，还涉及到对后台数据的结合。

首先，画一个空的“架子”：

Highcharts.setOptions(dark_comm);
	$("#chart").highcharts({                                                
		 chart : {
	    	margin:[50,0,35,60],
				renderTo: 'avgTime',
				type: 'spline',
				marginRight: 10                                                             
	      },                                                                      
	          title      : {                                                                
	          text   : '失败率、笔数走势图',
	          style  : {
	        	  color:'#FFFFFF'
	          },
	          align  :"center",
	         /* marginTop :10*/
	      },                                                               
	      xAxis             : {                                                                
	          type              : 'datetime',                                                   
	          tickPixelInterval : 150                                              
	      },                                                                      
	      yAxis : [{
//		      	  allowDecimals : false,                                                                
		    	  title         : '失败率',                                                                  
		         /* plotLines     : [{                                                       
		        	  value         : 0,                                                       
		      	 	}],*/
		      	 labels:{
		      		format: '{value}%',
		      	 },
		      	  max:100,
	          tickInterval:25,
		          min: 0
		       },{
//		    	 allowDecimals : false,                                                                
		    	  title         : '笔数',                                                                  
		          /*plotLines     : [{                                                       
			          value         : 0,                                                       
			          width         : 1                                                     
		      	 	}],*/
		          min           : 0,
		         opposite: true
		       }],                                                                       
		      tooltip : {                                                              
		    	   xDateFormat: '%Y-%m-%d %H:%M',
		           shared:true
		      },                                                                      
		      legend : {                                                               
		    	  align: 'right',
             verticalAlign: 'top',
             borderWidth: 0,
             y:10,
	          enabled : true                                                     
		      },                                                                      
		      exporting : {                                                            
		          enabled : false                                                      
		      }, 
	    marker: {
         enabled: false
     },
	      series : create()                                                                     
	  });

 这里，需要在一个图上同时画出2个指标：失败率和笔数。可以看出,series是由函数动态生成的。其实参照官网上混合图的例子并不难，但这里是由create()函数动态生成的，涉及到一些highcharts语法

和一点需要注意的小问题，如下：

$.ajax({  
        type: "POST",  
        dataType:"json",
        data:dataParam,
        async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置  
        url: url,//相对路径
        success: function(data){
        	var ratioList = data.ratioList;
        	var countList = data.countList;
        	//填充series
        	var $chart1 = $("#chart").highcharts();
					var series1 = $chart1.series;
					while(series1.length > 0) {  
						series1[0].remove(false);  
						series1[0].remove(false);
				    } 
					
					$chart1.addSeries({
				          name : '失败率',
				          turboThreshold:1500,
				          yAxis:0,
				          color:"#79E570",
				          marker: {
								enabled: false
							},
				          data : ratioList                                                               
					});
					
					$chart1.addSeries({
						name : '笔数',
						turboThreshold:1500,
						color:"#3CB034",
						yAxis:1,
						type: 'area',
						marker: {
							enabled: false
						},
						data : countList                                                             
					});
        ｝
   });

 这里值得注意的几个点：

1）while(series1.length > 0) {  

series1[0].remove(false);  

series1[0].remove(false);

} 

这段代码最好加上，可能首次渲染不会走这段代码，因为series:[]，但考虑到代码的健壮性，如果条件改变，需要重新加载数据（架子还在那），是需要把之前的series中的数据给clear掉的。

为啥while里第二行不是series[1].remove()?因为你第一行series1[0].remove(false)之后，此时原来的series1数组只剩一个元素了，所以你第二行用series[1]的话会引起数组下标越界，表现在

js上就是undefined异常。

2）在这种混合图的数据填充时，$chart1.addSeries的操作必须注意先后顺序，本例中第二个addSeries的操作在后，并且其yAxis指定为1，表明对应第二个Y轴。做的过程中发现，如果你把第二个

addSeries的操作顺序放在前面，即使你指定了其yAxis为1，渲染的时候series数组的元素顺序还是由addSeries的顺序决定的。

3）每个series单元可以分别指定其type。

 

效果示范：