Highcharts.jsで複数のグラフを表示する

Highcharts.jsで、形式の違う複数のグラフを一緒に表示してみます。

サンプルコード1

棒グラフと折れ線グラフを一緒に表示してみます。

HTML

<div id="sample"></div>

CSS

#sample {
	width: 600px;
	height: 400px;
}

JavaScript

// グラフに使用するデータ
var dataX = ['A', 'B', 'C', 'D', 'E'];
var dataY1 = [30, 25, 28, 31, 34];
var dataY2 = [52, 48, 49, 45, 42];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: dataX
			}
		],
		yAxis: [
			{ // 1つ目のy軸設定
				title: {
					text: 'DATA1'
				}
			}
		],
		series: [
			{ // 1つ目のグラフデータ
				name: 'data1', // グラフの名前指定
				type: 'column', // グラフの形指定
				data: dataY1 // グラフに使用するデータ指定
			},
			{ // 2つ目のグラフデータ
				name: 'data2', // グラフの名前指定
				type: 'line', // グラフの形指定
				data: dataY2 // グラフに使用するデータ指定
			}
		]
	});
});

棒グラフと折れ線グラフを一緒に表示するデモページ
　

サンプルコード2

棒グラフと折れ線グラフそれぞれでY軸を表示させてみます。

JavaScript

// グラフに使用するデータ
var dataX = ['A', 'B', 'C', 'D', 'E'];
var dataY1 = [30, 25, 28, 31, 34];
var dataY2 = [110, 140, 132, 170, 240];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: dataX
			}
		],
		yAxis: [
			{ // 1つ目のy軸設定
				title: {
					text: 'DATA1'
				}
			},
			{ // 2つ目のy軸設定
				title: {
					text: 'DATA2'
				},
				opposite: true // trueの場合グラフの右側にy軸を配置する
			}
		],
		series: [
			{ // 1つ目のグラフデータ
				name: 'data1', // グラフの名前指定
				type: 'column', // グラフの形指定
				data: dataY1, // グラフに使用するデータ指定
				yAxis: 0 // y軸を指定
			},
			{ // 2つ目のグラフデータ
				name: 'data2', // グラフの名前指定
				type: 'line', // グラフの形指定
				data: dataY2, // グラフに使用するデータ指定
				yAxis: 1 // y軸を指定
			}
		]
	});
});

棒グラフと折れ線グラフを一緒に表示するデモページ2
　

【参考サイト】

• Highcharts API Reference