別のスケールで3つのY軸をプロットしようとしています。
問題は、スケールの空気圧「テキスト」がプロットの「反対側」(あるべき場所)にあるが、「数値」スケールにはないことです。
これがフィドルです:リンク
コード:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
margin: [50,150,90,60],
width: 700,
height: 300
},
title: {
text: 'Weather Today'
},
credits: {
enabled: false
},
subtitle: {
text: 'Åsen, Norway'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{
title: {
text: 'Temperature C'
}
}, {
title: {
text: '%'
},
opposite: true
}, {
title: {
text: null
}
}, {
title: {
text: null
}
}, {
title: {
text: 'hPa'
},
opposite: true
}],
tooltip: {
formatter: function() {
if(this.series.name === 'Temperature')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Humidity')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
}
if(this.series.name === 'Dewpoint')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Wind chill')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Air pressure')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
}
}
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
}
},
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'spline',
shadow: true,
showInLegend: true,
pointInterval: 60 * 1000,
dashStyle: 'solid'
} , {
name: 'Humidity',
data: hum,
yAxis: 1,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Dewpoint',
data: dew,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Wind chill',
data: windchill,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Air pressure',
data: baro,
yAxis: 2,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'spline',
dashStyle: 'shortdot'
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});