jqPlot


jqPlotの概要

 jqPlotはグラフをブラウザに描画するためのjQueryベースのライブラリです。

ダウンロードはこちら。www.jqplot.com

 インストールですが、ダウンロードしたファイルを解凍するとドキュメントやサンプルも含まれていますが、実際に必要なファイルは、jquery.jqplot.css、excanvas.js、jquery.min.js、jquery.jqplot.min.js、pluginsフォルダ です。

 これらのファイルをウェブサーバの適当な場所へコピーして、パーミッションを 0644 などにします。下の例は、HTMLページと同じディレクトリにコピーした例ですが、普通は、JavaScript用のフォルダとかへコピーするので、URIが変わるはずです。

jqPlotを使うためのscriptタグとlinkタグの例

<link rel="stylesheet" href="jquery.jqplot.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="plugins/jqplot.logAxisRenderer.js"></script>

 次に描画領域を定義します。下の例ではIdがchartdivという 400 x 300 の領域を定義しています。そして、$.jqplotメソッドを呼び出すとグラフが描画されます。

<script>
$(document).ready(function() {
  $.jqplot("chartdiv",  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});
</script>

<div id="chartdiv" style="height:400px;width:300px;"></div>

 

このページの先頭へ戻る