【WordPress】見栄えのいいグラフを動的に描画できるjQueryプラグイン「jqPlot」をWPで使用する方法

当サイトの以下の記事では、数値計算を実行した後、計算結果をグラフ表示しています。

＞＞ FX運用計画シミュレーションツール

数値計算はPHPで行い、グラフ描画はjQuery(JavaScript)のプラグインである「jqPlot」を用いて動的に行っています。

この記事では、これを実現するための手順を説明します。

手順

jqPlot自体の設定は「jqPlotの設定」の項だけで事足りるのですが、WordPressの記事や固定ページ内で使うとなると、それ以外にも少し手間がかかりますので、順を追って説明していきます。

記事・固定ページ内でPHPとJavaScriptを実行できるようにする

グラフ描画プラグインのjqPlotは、JavaScriptのライブラリであるjQueryの拡張プラグインなので、WordPressの記事内や固定ページ内でJavaScriptを実行できるようにする必要があります。
これについては、別の記事で詳しく書いているので、そちらを参照ください。

＞＞ WordPress記事内でプラグインを使わずにPHP,JavaScriptプログラムを動かす

jqPlotの設定

適当にググればjqPlot単体を動かすための手順は分かるので、ここではポイントだけ押さえてざっくりと説明します。

jqPlotのダウンロード

まず、jqPlotのHPからファイルをダウンロードしてきます。

ページの右上にある「download」からダウンロードサイトに行き、「jquery.jqplot.1.0…」というファイル名がずらっと並んでいる中から、一番上にある最新版をクリックしてダウンロードします。

jqPlotプラグインファイルの配置

次に、ダウンロードしたファイルを解凍します。

解凍してできたフォルダ中に、沢山のファイルが入っているのが確認できますので、その中から、以下のファイルを、WordPressをインストールしたディレクトリ配下に配置します。

• 「plugins」フォルダとフォルダ以下のファイル全部
• 「jquery.jqplot.min.js」ファイル
• 「jquery.jqplot.min.css」ファイル
• 「excanvas.min.js」ファイル

どこに置くのも自由ですが、ここでは便宜上、WordPressディレクトリ直下に「js」というフォルダを作成し、その下に下記のように上述のファイル・フォルダを配置したとして説明します。

• （WPディレクトリ）＞js＞plugins＞（jqplot.barRenderer.js他全てのjsファイル）
• （WPディレクトリ）＞js＞jquery.jqplot.min.js
• （WPディレクトリ）＞js＞jquery.jqplot.min.css
• （WPディレクトリ）＞js＞excanvas.min.js

※本来jqPlotはjQuery, jQuery UIを前提としているため、これらも準備しておく必要がありますが、wordpressではデフォルトでjQueryが使えるようになっているので、ファイルの準備は不要です。

ただし、デフォルトではjQueryの短縮オブジェクト名「$」が使えないという制限があるため、普段通りにjQueryのオブジェクト名として「$」を使いたい場合は、以下のサイトを参考にして設定を変えてみてください。
しかし、ここでは蛇足になるため設定を変えていないものとして話を進めます。

参考）WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例（『かちびと.net』より）

参考）WordPressでjQueryを使う方法（Google Libraries APIを設定する。）（『ジャイアントモリンキーのJavaテック』より）

参考）WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう（『Webデザインレシピ』より）

jqPlotプラグインファイルを読み込む

jqPlotを実行したいファイルの一番最初に、以下のコードを記述します。
まずは最低限の動作をするために必要なコードだけを紹介しますので、その他は必要とあれば追記してください。

注意点は、PHPプログラムの外側に記述することです。PHPプログラムは「<?php」タグと「?>」タグに囲まれているので、その外側に書くという意味です。
ファイルの一行目に書いておけば間違いないかと思います。

jqPlotのプログラムを実行する

jqPlotのプログラムの詳しい書き方も、適当にググってみると沢山出てきます。
サンプルが豊富に用意されているので、やってみてください。

参考）Examples | jqPlot（『jqPlotのHP』より）

さらに高度なできるサンプルが同ホームページの以下のページにあります。
ここを見れば大抵のことは出来るので、リッチでビビューテホーなグラフを描画したい！という方はチャレンジしてみてください。

参考）jqPlot Sample Charts（『jqPlotのHP』より）

jqPlotをWordPressで使用する例

これで準備はできました。
次からは、実際にコードを書いて実行します。

簡単なjqPlotのプログラム

まずは簡単にjqPlotでグラフを描いてみましょう。
自分が使っているテーマフォルダ内に作ったフォルダ「myphpfiles」の配下に、「jqplottest.php」というファイルを新規作成します。

ファイルの中には以下のコードを書きます。

次に、WordPressの記事を新規作成して、記事内に以下のコードをコピペしてみてください。
※ビジュアルエディタを使うとうまくいかない可能性があるので、テキストエディタを使用してください。

下書き保存をして、プレビューで見てみます。

以下のようにグラフが描画されたら成功です。

当サイトでのjqPlotの使用例

上述した通り、当サイトでは以下のページでjqPlotを使用しています。

＞＞ FX運用計画シミュレーションツール

GoogleのグラフAPI『Google Charts』を使っても実現できそうですが、要するにjqPlotを使いたかったんですww

処理の流れは、以下の通りです。

1. PHPでシミュレーションの計算をする
2. PHPの計算結果をJavaScriptに渡す
3. jqPlotでグラフを描画する

1.でフォームの内容を形式で受け取り、計算しています。
ただし、計算ロジックに関しては、内緒ですww

2.でPHPの計算結果は配列なので、JavaScriptに渡すために、ひと工夫しています。
具体的には、

1. PHPで配列を一度文字列に変換し、
2. JavaScriptに文字列を渡し、
3. JavaScriptで文字列から配列に変換しています。

参考）PHPからJavascriptに配列変数を渡す（『StarDustMemories』より）

3.に関しては今回の記事で説明した通りです。
グラフに様々なオプションを設定していますので、気になる方は以下から探してみてください。

参考）jqPlot Sample Charts（『jqPlotのHP』より）

jqPlotは弄りだすと面白くて色々やりたくなってしまいますが、奇麗なグラフにしようとすればするほど、処理が重くなっていきますので、PageSpeedを損ねないように充分注意してください。

jqPlotの応用

このサイトはFX（為替証拠金取引）のブログなので、最後にFXに関連する話題をww
皆さん馴染みのあるローソク足のチャートですが、これもjqPlotを使えば書けてしまいます。

日本語で易しく解説をしてくれているブログがあったので、紹介しておきます。

参考）ローソク足チャート「jqPlot」（『Think deeply, Do less, More effective』より）

【追記】プラグインがありました

な、なんと、調べてみると、jqPlotのWordPressプラグインがありましたww

参考）jqPlot for WordPress

とは言え、当サイトでは極力プラグインを使わない方針なので、自力で作成する方法を採用しました、と強がってみます。