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。

效果示范：