JavaScpriptのグラフライブラリ「Highcharts」
とりあえずデモ
特徴
・なんかかっこよい。綺麗。
・商用利用は有料。
・最低限htmlとjsがあれば簡単に表示できる。
・動作にはjQueryが必要。
・Ajaxを利用して外部データを利用した動的なグラフ生成可能。
インストール
公式サイトのDownloadページから「Highcharts」を選択し、zipをダウンロード、解凍。
JQueryもインストールしておく。
とりあえずグラフ表示
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type="text/javascript" src="js/highcharts.js"></script>
</head>
<body>
<div id='container'></div>
<script type="text/javascript">
var chart;
function draw() {
// グラフオプションを指定
var options = {
// 出力先を指定
chart :{renderTo : "container"},
// データ系列を作成
series: [{name: "pi", data: [3,1,4,1,5]}]
}
// グラフを作成
chart = new Highcharts.Chart(options);
}
// ページがロードされた後に、グラフを出力する
document.body.onload = draw();
</script>
</body>
</html>
いろいろなグラフ
上記html内の
chart :{renderTo : "container"},
の部分を
chart: {
rendetTo: "container",
type: "column"
}
にすると棒グラフ。
円グラフはtypeを"pie"、データ部分を下記のように指定。
chart :{
renderTo : "container",
type: "pie"
},
series: {
name: "test",
data: [
["好き", 50],
["嫌い", 30],
["普通", 20]
]
ちょっと調べるとオプション次第でいろいろできそうでした。
IE6からiPhoneまで対応してるらしい。
私は業務でちらっと触っただけなので、凝ったグラフを個人的に作るのも面白そうだなと。
参考