flotプラグイン
flotプラグインは、グラフをプロットするプラグインです。このプラグインを使うことで、配列データやsin関数、cosin関数などといった関数を簡単に扱うことができます。
flotプラグイン適用後を図7に示します。
図7 flotプラグイン適用後
「flot」のサイトからflot-0.7.zipをダウンロードし、解凍後にplubinフォルダ下に配置します。
リスト3にflotプラグインの使用例を示します。
リスト3 flotプラグインの使用例（jQueryPlugin_Flot.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryプラグイン（Flot) サンプル</title>
<!--1.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<!--2.プラグインの読み込み-->
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<!--3.CSSの設定-->
<link href="layout.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
</head>
<body>
<h1>jQueryプラグイン（Flot) サンプル</h1>
<div id="PlotSamle" style="width:200px;height:200px;"></div>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
var d1 = [[0, 0], [12.5, 6]];
var d2 = [];
for (var i = 0; i < 14; i += 0.5)
d2.push([i, Math.sin(i)]);
var d3 = [];
for (var i = 0; i < 14; i += 0.5 + Math.random())
d3.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);
$.plot($("#PlotSamle"), [
{ label: "data1", data: d1},
{ label: "sin(x)", data: d2},
{ label: "sqrt(2 * i + Math.sin(i) + 5)", data: d3 }
]);
});
</script>
</body>
</html>
flotプラグインを使用するには、jquery.flot.jsを読み込み、「4.プラグインの設定」のように、表示領域のidとプロットデータ配列を指定したplotメソッドを設定します。表示領域ではwidth、height属性を設定してください。
plotメソッドの引数をリスト4に、引数の説明を表6に示します。
リスト4 plotメソッドの引数
$.plot(placeholder, data, options)
表6 plotメソッド引数の説明
| 引数名 | 概要 |
| placeholder | プロットする領域 |
| data | プロットするデータ群 |
| options | オプション（省略可） |
また、dataで指定できる主なオプションを表7に示します。
表7 dataで指定するオプション
| オプション名 | 概要 |
| label | グラフの凡例を設定する |
| data | プロットするデータ配列を指定する |
まとめ
第9回では、テーブルや、グラフのプロットなど、データ操作をテーマにしたプラグインを紹介しました。次回はTemplatesプラグインについて取り上げる予定です。
