2011年03月20日

jQueryでグラフ表示 〜Google Charts〜


Google Chartsとは?


jQueryを使用して簡単にグラフを作成できるプラグインです。

環境


./jquery-1.5.1.min.js
./jgcharts/jgcharts.js 0.97
./jgcharts.html


Download


[HP]http://www.maxb.net/scripts/jgcharts/include/demo/#1
[DOWNLOAD]http://www.maxb.net/scripts/jgcharts/jgcharts-0.97.zip

jgcharts.zipをdownload(2011/3/20時点でversion:0.97)

内容:
.settings
.project
doc
include
lib
plugins
jgcharts
jgcharts.pack

使用方法


まずは、[HP]に掲載されているのを試してみよう。

$ vi jgcharts.html

<html>
<head>
<title>jgchargs</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jgcharts/jgcharts.js"></script>
<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
  })
//--></script>
</head>
<body>
 <div id="bar1"></div>
</body>
</html>


これで上記のような棒グラフが表示されます。(表示されてなかったらごめんなさい)

解説


<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>

jqueryを読み込みます。
こいつがないとjQueryが使用できません。
jquery-1.5.1.jsでもだめです。

<script type="text/javascript" src="./jgcharts/jgcharts.js"></script>

GoogleChartsを読み込みます。
これによりグラフを作成します。

<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
  })
//--></script>

htmlにjavascriptを記述しています。
無論外部参照も可能です。
jQuery(function(){})

これはhtml内を読み込んでから処理を行うということであり、これがないと基本的にjQueryは動きません。
classなどhtml内の記述を使用してjQueryを使う場合は、必ずこの中でjQueryを記述するようにしましょう。
var api = new jGCharts.Api();

jgchartの初期化

jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");

グラフを作成して#bar1に挿入します。
appendTo:(A).appendTo(B) AをBの後ろに挿入。

<div id="bar1"></div>

ここにグラフを表示します。
posted by RicK at 08:30| Comment(0) | TrackBack(0) | 日記