グラフを描画する (Highchartsを利用) - JavaScript
Highchartsを利用してグラフを描画するコードを紹介します。
事前準備
Highchartsをインストールします。手順は
こちらの記事を参照してください。
実装
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BarChart.css" />
<script src="js/highcharts/highcharts.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Demo Chart',
align: 'left'
},
xAxis: {
categories: ['東京', '埼玉', '大阪', '新潟', '福岡', '札幌'],
crosshair: true,
accessibility: {
description: '支店名'
}
},
yAxis: {
min: 0,
title: {
text: '在庫'
}
},
tooltip: {
valueSuffix: '個'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'ぺんぎんクッキー',
data: [24, 16, 8, 9, 11, 4]
}
]
});
});
</script>
</head>
<body>
<h1>グラフ描画のデモ</h1>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
解説
グラフの情報はJSONオブジェクト形式で記述します。
以下はグラフの種類とタイトルを設定しています。
chart: {
type: 'column'
},
title: {
text: 'Demo Chart',
align: 'left'
},
xAxisではグラフの軸(系列)を設定しています。yAxisでは最小値と単位を設定しています。
xAxis: {
categories: ['東京', '埼玉', '大阪', '新潟', '福岡', '札幌'],
crosshair: true,
accessibility: {
description: '支店名'
}
},
yAxis: {
min: 0,
title: {
text: '在庫'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
データの値はseriesで設定します。
series: [
{
name: 'ぺんぎんクッキー',
data: [24, 16, 8, 9, 11, 4]
}
]
グラフはページ内の
id="container" の要素に描画されます。
<div id="container" style="width:100%; height:400px;"></div>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
棒グラフが描画できました。
マウスポインタを棒グラフのバーに重ねるとポップアップの吹き出しも表示されます。
Highchartsを利用してグラフの描画ができました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
