[Highcharts] 左右のy軸を利用する方法

Highchartsで、左右のy軸を利用する方法を紹介します。

以下のグラフは、東京と横浜の気温を表示しています。東京は10度、横浜は100度です(極端な例ですよ!)。

で、東京のデータ列には左側のy軸を、横浜のデータ列には右側のy軸を割り当てています。

上のグラフを表示しているJavaScriptのコードを、以下に記します。

var chart;
$(document).ready(function() {
		      chart = new Highcharts.Chart({
						       chart: {
							   renderTo: 'sample-chart',
							   type: 'line'
						       },
						       title: {
							   text: '東京と横浜の気温'
						       },
						       xAxis: {
							   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
									'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
						       },
						       yAxis: [{ // 1番目のy軸
								   title: {
								       text: '東京の気温'
								   }
							       }, { // 2番目のy軸
								   title: {
								       text: '横浜の気温'
								   },
								   opposite: true // 右側のy軸とする
							       }],
						       series: [{
								    name: '東京',
								    data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
								    yAxis: 0 // 1番目のy軸を利用する
								}, {
								    name: '横浜',
								    data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
								    yAxis: 1 // 2番目のy軸を利用する
								}]
						   });
		  });

各コメントに注目してください。ポイントは主に3点です。

yAxisプロパティを配列にすることで、複数のy軸の情報を定義する
yAxisプロパティの配列要素のうち、右側を利用するy軸情報に opposite プロパティを設定する
seriesプロパティの配列要素で、どのy軸を利用するか指定する

Highcharts > 左右のy軸を利用する方法

広告

広告