こんにちは。

SI部の加藤(祐)です。

今回はExcelなどで作成できるチャートグラフを書くことができる「jqPlot」について紹介します。

jqPlotの取得

以下のサイトからjqplotのプラグインを取得します。

http://www.jqplot.com/

top

【Download】ボタンを押下してダウンロードしてください。最新バージョンは1.0.8です。

select

jqPlotの作成

先ほど取得したjqPlotのプラグインを解凍すると以下の構成となっています。
その中でjqPlot作成に必要なリソースは以下となります。

・jquery.jqplot.min.js (jqPlotプラグインの本体)

・excanvas.min.js (jsでWeb上にグラフィックを描く技術に「Canvas」を使ったGoogleから提供されてるライブラリー)

・pluginsフォルダー配下の拡張子が 「.min.js」 のファイル (基本機能に追加したい時に対象のリソースを使用します。次回のブログで説明します。)

・jquery.jqplot.min.css

list

その他、jQuery本体が必要となります。

それではグラフを表示していきます。

<head>タグにjsファイルとcssファイルを取り込みます。

head

※ excanvas.min.jsは「canvas」がIE9で実装されている為、IE9以外のブラウザの時は取り込まれるように記述しています。

次にグラフの表示する領域を作成します。

chart

グラフのデータを定義します。

データは1つの系統ごとに配列で作成する2次元配列形式で定義します。※ サンプルでは3つの系列を表しています。

data

オプションを定義します。 ※ オプションの種類については後述しますがここではタイトルのみを定義します。

option

グラフの描画処理を実行します。

drawing

jqPlotメソッドの引数は以下になります

第1引数 : グラフを表示する領域のID

第2引数 : データ

第3引数 : オプション

表示されるグラフは以下の図になります。

sample1_image

先ほどの描画処理ではjQueryからの呼び出しでしたが以下の呼び出しも可能です。

drawing2

オプション説明

jqPlotでは表示に関する様々なオプションが用意されています。

そのデフォルトで指定されているオプションをオーバーライドすることにより表記を変更することが可能となっています。

ここではタイトル、x軸y軸についてのオプション説明を行っていきます。

タイトルに関するオプション

title : グラフにタイトルを描き加えます。

上記のように指定することでタイトルのデフォルト表示できますがをタイトル用の以下のプロパティを指定することでカスタマイズできます。

text : タイトルのテキストを指定できます。

show : タイトルを表示するかどうかを指定できます。

fontFamily : タイトルのフォントの種類を指定できます。

fontSize : タイトルのフォントサイズを指定できます。

textAlign : タイトルのテキストの水平方向の配置位置指定できます。

指定できる位置は以下になります。

・left : 左寄せ

・center : 中央

・left : 右寄せ

textColor : タイトルのフォントの色を指定できます。

軸に関するオプション

axes : 軸に関するオプションを指定できます。

xaxis : X軸に関するオプション指定できます。

min : X軸上の最小値を指定できます。

max : X軸上の最大値を指定できます。

pad : X軸上の余白を指定できます。※ 「0」を指定すると余白がなくなります。

ticks : X軸上の目盛りを指定できます。※ 指定しない場合は、自動的に計算します。

tickOptions : 目盛りに関するオプション指定できます。

mark : 目盛りの位置を指定できます。※初期設定値は、「outside」。

・outside:外側

・inside:内側

showMark : 目盛りを表示するかどうかを指定できます。※ 初期設定値は、「true」(表示)。

showGridline : グリッド線を表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

markSize : 目盛りのサイズを指定できます。※ 初期設定値は、「4」。

show : 目盛りと目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

showLabel : 目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

formatString : 目盛りのラベルの形式を指定できます。

・%d : 整数

・%f : 小数

・%g : データ値

・%s : 文字列

showTicks : 目盛りと目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

label : X軸のラベルを指定できます。

labelOptions : X軸のラベルに関するオプションを指定できます。

fontFamily : X軸のラベルのフォントの種類を指定できます。

fontSize : X軸のラベルのフォントサイズを指定できます。

yaxis : Y軸に関するオプション指定できます。

min : Y軸上の最小値を指定できます。

max : Y軸上の最大値を指定できます。

pad : Y軸上の余白を指定できます。※ 「0」を指定すると余白がなくなります。

ticks : Y軸上の目盛りを指定できます。※ 指定しない場合は、自動的に計算します。

tickOptions : 目盛りに関するオプション指定できます。

mark : 目盛りの位置を指定できます。※初期設定値は、「outside」。

・outside:外側

・inside:内側

showMark : 目盛りを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

showGridline : グリッド線を表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

markSize : 目盛りのサイズを指定できます。※ 初期設定値は、「4」。

show : 目盛りと目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

showLabel : 目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

formatString : 目盛りのラベルの形式を指定できます。

・%d : 整数

・%f : 小数

・%g : データ値

・%s : 文字列

showTicks : 目盛りと目盛りのラベルを表示するかどうかを指定できます。※初期設定値は、「true」(表示)。

label : Y軸のラベルを指定できます。

labelOptions : Y軸のラベルに関するオプションを指定できます。

fontFamily : Y軸のラベルのフォントの種類を指定できます。

fontSize : Y軸のラベルのフォントサイズを指定できます。

以下のようにオプションを指定します。

option_cus

上記オプションでグラフを表記すると以下のようになります。

option_cus_image

詳しいオプションの書き方はjqPlotの公式サイトの以下のサイトを参照してください。

http://www.jqplot.com/docs/files/jqPlotOptions-txt.html

最後に

今回はデフォルトのチャートグラフ表記設定までと簡単な導入部分を紹介させていただきました。

その他にpluginsフォルダー配下のリソースを使うと下記のような円グラフや棒グラフなども作成することができます。

sample3sample4

次回は他のチャートグラフなどpluginsフォルダー配下のリソースを使ったグラフ表記について紹介させていただきます。

ご一読頂き有り難うございました。