[Highchartsライブラリ] 縦棒グラフを表示する
説明
Highchartsライブラリで縦棒グラフを表示するにはグラフを表示する領域をdivタグで用意しID名を割り当てます。この時にdivタグに横幅と縦幅もを指定しておきます。
次にページが読み込まれたらnew Highcharts.Chart()としてグラフオブジェクトを作成します。この時にグラフ表示に必要なパラメータを設定します。まず、chartオプションのrenderToにグラフを表示するdivタグのID名を指定します。defaultSeriesTypeにcolumnを指定すると縦棒グラフになります。
横軸の表示データはxAxisで指定します。categoriesに表示される文字、titleのtextにグラフの単位名などを指定します。同様にyAxisにはY軸の表示文字などを指定します。
実際のデータはseries配列の要素として指定します。この要素はオブジェクトでnameに名前、dataに配列形式でデータを指定します。表示したい数だけseries配列の要素を記述します。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>JavaScriptでグラフを表示する</h1>
<div id="container" style="width:600px;height:480px"></div>
</body>
</html>
【sample.js】
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
defaultSeriesType: "column"
},
title: {
text: "月間売り上げ"
},
xAxis: {
categories: ["1","2","3","4","5","6","7","8","9","10","11","12"],
title: { text: "月" }
},
yAxis: {
title: { text: "金額" }
},
series: [{
name: "高橋",
data: [10, 5, 20, 4, 13, 16, 20, 40, 30, 20, 15, 19]
}, {
name: "山田",
data: [20, 22, 24, 19, 26, 30, 33, 28, 30, 28, 24, 20]
}, {
name: "佐藤",
data: [40, 38, 35, 33, 24, 28, 35, 20, 17, 22, 15, 26]
}]
});
});