其实做了这么久的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。
效果示范：
