Highcharts.jsを使ってみる

Highcharts.jsを使ってみます。

対応ブラウザとライセンス

対応ブラウザはこちらに記載がありますが、IE6から対応しているようです。
IE8以下ではSVGに対応していないため、VMLで描画しています。
Android2.xはSVGに対応していないため、一部機能の制限があります。

ライセンスに関しては、私的利用なら無料で使用できますが、商用利用は有償になります。
商用利用する場合のライセンスと価格はこちら。

準備

公式サイトにアクセスして、DOWNLOADボタンをクリックします。

ボタンが並んでいる左端にあるHISHCHARTSのボタンをクリックしてダウンロードします。

ダウンロードが完了したら、中に含まれているhighcharts.jsというファイルを使用します。
jQueryと一緒に読み込ませます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./highcharts.js"></script>

これで準備完了です。
　

サンプルコード1

棒グラフを作成してみます。

HTML

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

CSS

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

JavaScript

// グラフに使用するデータ
var dataX = ['小1', '小2', '小3', '小4', '小5', '小6', '中1', '中2', '中3', '高1', '高2', '高3'];
var dataArr = [{
	name: '男子',
	data: [116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7]
}, {
	name: '女子',
	data: [115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
}];
var colors = ['#3498DB', '#E74C3C'];

$(function () {
	$('#sample').highcharts({
		chart: {
			type: 'bar' // 棒グラフの使用
		},
		colors: colors,
		title: {
			text: 'グラフタイトル' // グラフのタイトル指定
		},
		xAxis: {
			categories: dataX // X軸の項目指定
		},
		tooltip: {
			valueSuffix: 'cm' // 棒グラフにオンマウスした時の値の単位指定
		},
		legend: { // 各棒グラフの説明エリア追加
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			borderWidth: 2
		},
		series: dataArr // 棒グラフのデータ指定
	});
});

棒グラフのデモページ
各オプションの詳細については公式ドキュメントでご確認ください。
　

サンプルコード2

円グラフを作成してみます。
HTMLとCSSは先ほどと同じです。

JavaScript

// グラフに使用するデータ
var dataArr = [{
	name: 'Internet Explorer',
	y: 53.5
}, {
	name: 'Google Chrome',
	y: 27.7
}, {
	name: 'Firefox',
	y: 12.0
}, {
	name: 'Safari',
	y: 5.1
}, {
	name: 'Opera',
	y: 1.3
}, {
	name: 'その他',
	y: 0.4
}];
var colors = ['#3498DB', '#E74C3C'];

$(function () {
	$('#sample').highcharts({
		chart: {
			type: 'pie' // 円グラフの使用
		},
		title: {
			text: 'グラフタイトル' // グラフのタイトル指定
		},
		plotOptions: {
			pie: {
				dataLabels: {
					enabled: false // グラフに項目説明を表示するかどうか
				},
				showInLegend: true // 各棒グラフの説明エリア追加
			}
		},
		series: [{
			name: 'ブラウザ', // ツールチップに表示されるテキスト
			data: dataArr // 円グラフのデータ指定
		}]
	});
});

円グラフのデモページ
　

サンプルコード3

折れ線グラフを作成してみます。
HTMLとCSSは先ほどと同じです。

JavaScript

// グラフに使用するデータ
var dataX = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var dataY = [{
	name: '北海道',
	data: [-3.6, -3.1, 0.6, 7.1, 12.4, 16.7, 20.5, 22.3, 18.1, 11.8, 4.9, -0.9]
}, {
	name: '沖縄',
	data: [17.0, 17.1, 18.9, 21.4, 24.0, 26.8, 28.9, 28.7, 27.6, 25.2, 22.1, 18.7]
}];

$(function () {
	$('#sample').highcharts({
		title: {
			text: 'グラフタイトル' // グラフのタイトル指定
		},
		xAxis: {
			categories: dataX // X軸の項目指定
		},
		yAxis: {
			title: {
				text: '気温' // Y軸のテキスト指定
			}
		},
		tooltip: {
			valueSuffix: '度' // ツールチップに表示されるテキスト
		},
		legend: { // 各折れ線グラフの説明エリア追加
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			borderWidth: 2
		},
		series: dataY // 折れ線グラフのデータ指定
	});
});

折れ線グラフのデモページ
　

公式サイトに色々なデモが置かれていますので、どういったグラフが作成できるかは下記をご確認ください。
Highcharts demos | Highcharts
　

【参考サイト】

• Highcharts API Reference