円グラフや棒グラフも作れる多機能ライブラリ

jQueryで見栄えのいいグラフが描ける「jqPlot」

2009年07月01日 14時51分更新

文● 藤本壱

豊富なオプションを使いこなす

　jqPlotは多機能なライブラリで、前のページで紹介した以外にもさまざまな表示形式を選択できます。オプションの概要を紹介します。

　オプションを指定する場合は、jqplotを実行する際に3つ目のパラメータを指定します。


$.jqplot('div要素のID', [ 配列1, 配列2, ……, 配列m ], {
    オプション名: { オプションの設定 },
    オプション名: { オプションの設定 },
    ……
});

　jqPlotでは、機能ごとにJavaScriptが複数のファイルに分けられています。「plugins」ディレクトリにファイルの中から必要なJavaScriptファイルを選び、scriptタグでHTMLに読み込ませます。

　たとえば、棒グラフを表示するには、以下のscriptタグを追加します。


<script language="javascript" type="text/javascript" src="http://アップロード先/plugins/jqplot.barRenderer.min.js"></script>

　用意されている主なJavaScriptファイルは次の表のとおりです。

ファイル	内容
barRenderer.min.js	棒グラフの描画
pieRenderer.min.js	円グラフの描画
dateAxisRenderer.min.js	横軸に日付を表示
categoryAxisRenderer.min.js	横軸にデータのカテゴリを表示
highlighter.min.js	マウスでポイントしたデータの数値を表示
cursor.min.js	グラフ上にカーソルを表示

　jqPlotのオプション機能を使った実際のサンプルは、筆者のWebサイトに公開しています。具体的なスクリプトの書き方はこれらのページのソースコードを参照してください。また、jqPlotの公式サイトにも多数のサンプルが用意されていますので、それらも参考になるでしょう。


（左）棒グラフに折れ線グラフを混在させたサンプル（http://www.h-fj.com/ascii/jqplot/sample3.html）。（右）サンプルはjqPlotのサイトにもあります