[Highchartsライブラリ] 円グラフを表示する
説明
Highchartsライブラリで円グラフを表示するにはグラフを表示する領域をdivタグで用意しID名を割り当てます。この時にdivタグに横幅と縦幅もを指定しておきます。
次にページが読み込まれたらnew Highcharts.Chart()としてグラフオブジェクトを作成します。この時にグラフ表示に必要なパラメータを設定します。まず、chartオプションのrenderToにグラフを表示するdivタグのID名を指定します。defaultSeriesTypeにpieを指定すると円グラフになります。
データはseries配列の要素として指定します。この要素はオブジェクトで円グラフ全体の名前をnameに、dataに配列形式でデータを指定します。表示したい数だけseries配列の要素を記述します。data配列で指定するデータはオブジェクトでnameに名前、yに円グラフの割合を指定します。
サンプルプログラム
【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: "pie"
},
title: {
text: "年間売り上げ"
},
series: [{
name: "販売割合",
data: [
{name: "商品A", y : 40},
{name: "商品B", y : 25},
{name: "商品C", y : 20},
{name: "商品D", y : 10},
{name: "商品E", y : 5}
]
}]
});
});