Highcharts.jsでグラフの目盛を調整する

2016.05.15

Highcharts.jsでグラフの目盛を調整するオプションをいくつか試してみます。

サンプルコード

まずはベースの棒グラフを作成してみます。

HTML

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

CSS

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

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				}
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

ベースにするグラフのデモページ
このグラフにオプションを追加していきます。
　

maxとceiling

maxとceilingはグラフの最大値を指定できます。
まずはmaxを試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				max: 300
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

maxのデモページ
Y軸の最大値が300になりました。

次にceilingを試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				ceiling: 300
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

ceilingのデモページ
Y軸の最大値は300ではなく、変更前と同じ200のままになりました。

maxは最大値が指定した値で固定されるのに対して、ceilingは最大値が指定した値以下になるように調整されます。
そのため上記デモではceilingで指定した300ではなく、変更前と同じ200で表示されます。
　

minとfloor

minとfloorはグラフの最小値を指定できます。
まずはminを試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				min: -100
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

minのデモページ
Y軸の最小値が-100になりました。

次にfloorを試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				floor: -100
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

floorのデモページ
Y軸の最小値は変更前と同じ0になりました。
min・floorも前述のmax・ceilingと同じく、固定値になるか指定値以上になるかで使い分けます。

allowDecimals

allowDecimalsは目盛に小数点を許可するかどうかを設定できます。
今回はデータと設定を少し変更して試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var ageData = [17, 15, 18, 15, 17, 14, 19, 25, 14, 15, 15, 11, 16, 15, 17, 12, 17];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '年齢'
				},
				min: 10,
				max: 20
			}
		],
		series: [
			{
				name: '年齢',
				type: 'column',
				data: ageData,
				yAxis: 0
			}
		]
	});
});

年齢のグラフのデモページ
今回は年齢のグラフで、minとmaxでY軸の範囲を10～20にしました。
この状態だと、目盛に小数点が含まれています。

目盛に小数点を含めないようにする場合、allowDecimalsをfalseにします。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var ageData = [17, 15, 18, 15, 17, 14, 19, 25, 14, 15, 15, 11, 16, 15, 17, 12, 17];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '年齢'
				},
				min: 10,
				max: 20,
				allowDecimals: false
			}
		],
		series: [
			{
				name: '年齢',
				type: 'column',
				data: ageData,
				yAxis: 0
			}
		]
	});
});

allowDecimalsのデモページ
Y軸の目盛に小数点が含まれないようになりました。
　

minTickIntervalとtickInterval

minTickIntervalとtickIntervalは目盛の値の間隔を指定します。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				tickInterval: 25
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

tickIntervalのデモページ
目盛の値の間隔が25になりました。

次にminTickIntervalを試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				minTickInterval: 25
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

minTickIntervalのデモページ
目盛の間隔は変更前のままでした。
これは、tickIntervalが固定値での指定なのに対して、minTickIntervalが間隔の最小値の指定となるためです。
　

minorTickInterval

minorTickIntervalはメインとなる目盛の他にメモリを追加する事ができます。
minorTickIntervalと合わせてスタイルを変更するオプションも試してみます。

JavaScript

// グラフに使用するデータ
var nameData = ['島村卯月', '渋谷凛', '一ノ瀬志希', '前川みく', '双葉杏', '輿水幸子', '新田美波', '高垣楓', '神崎蘭子', 'アナスタシア', '本田未央', '赤城みりあ', '及川雫', '星輝子', '城ヶ崎美嘉', '城ヶ崎莉嘉', '諸星きらり'];
var heightData = [159, 165, 161, 152, 139, 142, 165, 171, 156, 165, 161, 140, 170, 142, 162, 149, 186.2];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル'
		},
		xAxis: [
			{
				categories: nameData
			}
		],
		yAxis: [
			{
				title: {
					text: '身長'
				},
				minorTickInterval: 25, // 'auto'
				minorTickWidth: 2,
				minorTickLength: 10,
				minorTickColor: '#ff0000'
			}
		],
		series: [
			{
				name: '身長',
				type: 'column',
				data: heightData,
				yAxis: 0
			}
		]
	});
});

minorTickIntervalのデモページ
メインとなる目盛の他に、25の間隔でメモリが追加されました。
minorTickColorなどのスタイルは目盛すべてに適用されます。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930