Android、Java、Web系、Linux、マラソン等の備忘録

2011/12/29

jQueryのプラグインjqPlotでグラフを描画してみる

0 件のコメント

環境を作る

WS000333グラフ描画に特化したjqPlotというjQueryプラグインで遊んでみたいと思います。まずは、環境作りから。プラグインは以下から入手できます。

・cleonello / jqplot / downloads — Bitbucket
https://bitbucket.org/cleonello/jqplot/downloads/

現時点で最新版と思しき、

  • jquery.jqplot.1.0.0b2_r1012.zip

をダウンロードして解凍します。

WS000332

distディレクトリ内にたくさんファイルが入ってますが、この中で今回使うのは以下のファイルです。

  • jquery.jqplot.min.css
  • excanvas.min.js
  • jquery.jqplot.min.js
  • jquery.min.js
  • pluginsディレクトリ

 

簡単なグラフを表示させてみる

適当にHTMLファイルを作成して、先ほどのファイルから必要なスタイルシートとJavaScriptを読み込ませます。以下の3ファイルです。

<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>


次に<body>タグ内にグラフを表示させるスペースを<div>タグで設置してやります。



<div id="graf" style="width:600px;height:300px"></div>


JavaScriptの配列を使ってグラフを描画します。



$(document).ready(function() {
var s1 = [ 5, 7, 6, 8, 7 ];
var s2 = [ 7, 5, 7, 6, 9 ];
$.jqplot('graf', [ s1, s2 ]);
});


すごくシンプル。。



上記のようなJavaScriptの場合、配列に格納されてる値はy値で、格納した順番とx値が対応しています。



 



Demo page



 



サンプルブログラム



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hellojqPlot</title>
<meta name="author" content="takaiwa.net" />
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
var s1 = [ 5, 7, 6, 8, 7 ];
var s2 = [ 7, 5, 7, 6, 9 ];
$.jqplot('graf', [ s1, s2 ]);
});
</script>
<body>
<div id="graf" style="width:600px;height:300px"></div>

</body>
</html>

0 件のコメント :

コメントを投稿