0
多軸と大きな数値を使用すると、Highchartsはデータを表示するのに必要な高さを2倍にレンダリングします。垂直軸をデータに正しくフィットさせるにはどうすればよいですか?ハイチャートでは若干大きな数値でレンダリングされています
ここではサンプルコード:
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 991009.6, 1010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [967416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 1010.2, 14563.1, 991016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 991010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
ここフィドル:http://jsfiddle.net/voqxkb3m/1/
私はすでに 'endOnTickました:' alignTicks'はそれを解決したと一緒にfalse'のが、 'maxPadding'と' minPadding'を。私は 'endOnTick'を' true'に変更しました。そして今見た目は素晴らしいです。 –