here it code
$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
spacingBottom: 50,
style: {
fontFamily: 'Arial, Helvetica, sans-serif',
}
},
tooltip: {
formatter: function() {
var colors = new Array("#3dcd50","#feb421","#e5928a");
var quarterArray = new Array ("Jan-Mar","Apr-Jun","Jul-Sep","Oct-Dec");
var prefix ="";
var p = new Date(this.x);
var year = p.getFullYear();var month = p.getMonth();
if ( month >= 1 && month <= 3 ){
prefix = quarterArray[0];
}
else if ( month >= 4 && month <= 6 ){
prefix = quarterArray[1];
}
else if ( month >= 7 && month <= 9 ){
prefix = quarterArray[2];
}
else if ( month >= 10 && month <= 12 ){
prefix = quarterArray[3];
}
prefix += " "+year;
var str = '<table><tr><td><span style="color:grey;font-family=Arial, Helvetica, sans-serif">'+ prefix+'</span><br/></td></tr>';
var i = 0;
var length = this.points.length;
while ( i < length ){
str += '<tr><td><span style="color:'+colors[i]+'">'+this.points[i].series.name+' : </span></td>';
str += '<td style="text-align: right"><span style="font-size: 16px;font-family: WebRupee;font-size: 14px;font-weight: bold;" >Rs.</span><b> '+Highcharts.numberFormat(this.points[i].y, 0,'',',')+' /Sq.ft.</b><br/></td></tr>' ;
i++;
}
str += '</table>';
return str;
},
style: {
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
},
borderColor: '#bfbfbf',
backgroundColor : '#FFFFFF',
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
dateTimeLabelFormats: {
month: '%b'
},
showFirstLabel: true,
gridLineWidth : 0,
tickInterval : 12*30*24*3600* 1000,
tickLength : 20,
tickWidth : 1,
minorGridLineWidth : 0,
minorTickInterval : 3*30*24 * 3600 * 1000 + 1.25*24 * 3600 * 1000, //distributing 6 extra days in 4 quarters
minorTickLength : 10,
minorTickWidth : 1,
lineWidth : 4,
lineColor:'#e8e8e8',
min : Date.UTC(2010,0, 1),
max : Date.UTC(2013,6, 1),
labels : {
align: 'center',
x: 53,
y: 30,
style: {
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
showFirstLabel: false,
gridLineColor: '#e3e3e3',
title: {
enabled : true,
text: 'PRICE <span style="font-family: WebRupee;font-size: 14px;font-weight: bold;" >Rs.</span> / SQ.FT.',
style: {
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif',
color : '#000000'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0,'',',');
},
style: {
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
}
},
min : 1241,
max : 4400,
lineWidth: 4,
lineColor:'#e8e8e8',
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'horizontal',
x: 0,
y: 40,
borderWidth: 0,
itemStyle: {
color: '#000000',
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
}
},
plotOptions: {
series: {
pointStart: Date.UTC(2010,0, 45),
pointInterval : 3*30*24*3600* 1000 + 1.25*24 * 3600 * 1000
}
},
series: [{
name: 'Upper Range',
color : 'grey',
lineWidth : 1,
connectNulls: true,
data: [1926,1931,1920,1912,1924,1947,2019,2516,2924,2648,2923,3119,3190,3400,null,null],
marker: {
fillColor: '#3dcd50',
lineWidth : 1,
symbol: 'circle',
radius : 3,
states: {
hover: {
fillColor:'#3dcd50',
lineWidth : 1
}
}
}
}, {
name: 'Average Range',
color : 'black',
connectNulls: true,
lineWidth : 2,
data: [1826,1825,1820,1812,1810,1826,1919,2387,2440,2484,2787,3000,3048,3100,null,null],
marker: {
fillColor: '#feb421',
lineColor: '#feb421',
lineWidth : 2,
symbol: 'circle',
radius : 5,
states: {
hover: {
fillColor:'#ff6700',
lineWidth : 2
}
}
}
}, {
name: 'Lower Range',
color : 'grey',
lineWidth : 1,
connectNulls: true,
data: [1726,1725,1720,1712,1710,1726,1810,2281,2325,2346,2663,2861,2948,2989,null,null],
marker: {
fillColor: '#e5928a',
lineWidth : 1,
symbol: 'circle',
radius : 3,
states: {
hover: {
fillColor:'#e5928a',
lineWidth : 1
}
}
}
}]
});
});
您可以在 jsfiddle http://jsfiddle.net/QGNT3/中看到这一点， 这在 chrome、safari、firefox、IE9 和 IE10 中运行良好，但对于 IE 8，几乎没有错误 1）Y 轴标签未垂直对齐 2）在单击图例并悬停系列时，对象不支持方法“removeAttribute”的属性 3) 不渲染系列线颜色 [渲染黑色]
