html折线图不同区间不同颜色,当超出区域范围时，Html5折线图具有不同的颜色

我想在一个图表上绘制一个区域范围图表和一条线，我希望该线条在区域范围内时为黑色，而在区域范围之外时则为红色，如图片所示。

我使用下面的代码绘制区域范围，但我不知道如何在区域范围之外绘制不同颜色的线条。

http://jsfiddle.net/2cVGX/

$(function () {

var limits = [

[64064, 14.3, 27.7],

[64928, 14.5, 27.8],

[65792, 15.5, 29.6],

[66656, 16.7, 30.7],

[67520, 16.5, 25.0],

[68384, 17.8, 25.7],

[69248, 13.5, 24.8],

[70112, 10.5, 21.4],

[70976, 09.2, 23.8],

[71840, 11.6, 21.8],

[72704, 10.7, 23.7],

[73568, 11.0, 23.3],

[74432, 11.6, 23.7],

[75296, 11.8, 20.7],

[76160, 12.6, 22.4],

[77024, 13.6, 19.6],

[77888, 11.4, 22.6],

[78752, 13.2, 25.0],

[79616, 14.2, 21.6],

[80480, 13.1, 17.1],

[81344, 12.2, 15.5],

[82208, 12.0, 20.8],

[83072, 12.0, 17.1],

[83936, 12.7, 18.3],

[84800, 12.4, 19.4],

[85664, 12.6, 19.9],

[86528, 11.9, 20.2],

[87392, 11.0, 19.3],

[88256, 10.8, 17.8],

[89120, 11.8, 18.5],

[89984, 10.8, 16.1]

],

values = [

[64064, 21.5],

[64928, 22.1],

[65792, 23.0],

[66656, 23.8],

[67520, 21.4],

[68384, 21.3],

[69248, 18.3],

[70112, 15.4],

[70976, 16.4],

[71840, 17.7],

[72704, 17.5],

[73568, 17.6],

[74432, 17.7],

[75296, 16.8],

[76160, 17.7],

[77024, 16.3],

[77888, 17.8],

[78752, 18.1],

[79616, 17.2],

[80480, 14.4],

[81344, 13.7],

[82208, 17.7],

[83072, 20.6],

[83936, 20.3],

[84800, 19.3],

[85664, 15.8],

[86528, 15.2],

[87392, 14.8],

[88256, 14.4],

[89120, 15],

[89984, 13.6]

],

targets = [

[64064, 22.5],

[64928, 23.1],

[65792, 21.0],

[66656, 22.8],

[67520, 20.4],

[68384, 22.3],

[69248, 18.4],

[70112, 15.5],

[70976, 16.4],

[71840, 17.6],

[72704, 18.6],

[73568, 19.6],

[74432, 18.7],

[75296, 17.8],

[76160, 17.7],

[77024, 16.5],

[77888, 16.8],

[78752, 17.1],

[79616, 17.5],

[80480, 15.4],

[81344, 14.7],

[82208, 16.7],

[83072, 15.6],

[83936, 15.3],

[84800, 15.5],

[85664, 15.8],

[86528, 15.2],

[87392, 15.8],

[88256, 15.4],

[89120, 15.3],

[89984, 14.6]

];

$('#container').highcharts({

title: {

text: null

},

xAxis: {

title: {

text: null

},

type: 'linear',

labels: {

enabled: false

},

lineWidth: 0,

tickWidth: 0

},

yAxis: {

title: {

text: null

},

labels: {

enabled: false

},

gridLineWidth: 0

},

tooltip: {

crosshairs: true,

shared: true,

valueSuffix: 'Virt'

},

legend: {

enabled: false

},

series: [{

id: 'valueLine',

name: 'Value',

type: 'spline',

data: values,

zIndex: 1,

color: 'black',

shadow: true,

marker: {

fillColor: 'black',

lineWidth: 1,

radius: 2,

lineColor: "white",

enabled: false,

symbol: 'circle'

}

}, {

id: 'targetLine',

name: 'Target',

type: 'spline',

data: targets,

linkedTo: 'valueLine',

zIndex: 1,

color: 'gray',

dashStyle: 'DashDot',

marker: {

fillColor: 'gray',

lineWidth: 1,

radius: 2,

lineColor: "white",

enabled: false,

symbol: 'circle'

}

}, {

id: 'limitsArea',

name: 'Limits',

data: limits,

type: 'areasplinerange',

lineWidth: 1,

lineColor: 'gray',

linkedTo: 'valueLine',

color: "lightGray",

fillOpacity: 0.3,

zIndex: 0

}]

});

});