【WordPress】jQueryプラグインFlotを使って投稿ページにグラフを表示してみた

 

 

 

 

概要

 
Flotは、とても豊富な機能を備えたjQueryグラフ描画プラグインです。WordPressに読み込めば簡単にグラフを描画できます。WordPressにFlotプラグインを読み込み、固定ページ内に折れ線グラフを表示してみました。
 

 

 

環境

 

IDCFクラウド環境

  • サーバー (仮想マシン・ハードウェア専有マシン)
    S1 プラン メモリ1G

  • ボリューム(ディスク)
    基本 15GB

  • オブジェクトストレージサービス
    50GB

  • WordPressは仮想マシンKUSANAGI環境で使用
  • jQueryプラグイン FLOT ver0.83

 

 

jQueryプラグインの読み込み

 

 

wp_enqueue_scriptsアクションフックのタイミングで、wp_enqueue_script関数でスクリプトの登録を行います。

 

function my_deregister_script() {
	if (!is_admin()) {
                // グラフ描画jQueryを読み込む。
		wp_enqueue_script('flot','https://cdn.jsdelivr.net/jquery.flot/0.8.3/jquery.flot.js',array('jquery'),'0.8.3');
		wp_enqueue_script('flot.time','https://cdn.jsdelivr.net/jquery.flot/0.8.3/jquery.flot.time.min.js',array('jquery'),'0.8.3');
		wp_enqueue_script('flot.selection','https://cdn.jsdelivr.net/jquery.flot/0.8.3/jquery.flot.selection.min.js',array('jquery'),'0.8.3');
	}
}
add_action('wp_enqueue_scripts','my_deregister_script',100);

 

 

WP同梱のjQueryではなく任意のバージョンのjQueryを読み込みたい場合は、wp_deregister_script関数で登録済みのjQueryを一度解除した後、再度wp_enqueue_script関数で読み込みたいバージョンのjQueryを読み込むようにします。

 

		// WordPress同梱のjQuery の読み込みを停止。
		wp_deregister_script('jquery');
		// 外部のjQueryを読み込む(今回使用するjQueryで推奨されたバージョンを読み込む)
		wp_enqueue_script('jquery','https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js',array(),'1.9.1');

 

 

 

 

スクリプトと実行結果

 

 

データはjavascriptの配列変数内に用意して、FLOTプラグインの$.plot関数を呼び出します。

 

 <div>
<script type="text/javascript">
jQuery( function( $ ) {
var data = [
        {
            label: "Low ",
            color: 1,
            data: [
            [1, 96],
            [2, 89],
            [3, 85],
            [4, 90],
            [5, 87],
            [6, 86],
         ]
        },
        {
            label: "High",
            color: 2,
            data: [
            [1, 137],
            [2, 135],
            [3, 130],
            [4, 129],
            [5, 120],
            [6, 124],
         ]
        },
];
option={
   legend: {
   show: true,
   container: $("#container")
   },
 };
$.plot($("#placeholder"),
       data,
       option
      );
});
</script>
</div>

 

 

グラフはDIV要素に描画しますので、凡例表示領域とグラフ表示領域をDIVで作成します。

 

<div id="container"></div>
<div id="placeholder" style="width: 600px; height: 300px; background-color: silver;"></div>

 

 

下がFlotプラグインの実行結果です。
 

 

 

 

 

 

まとめ

 

Flotの素晴らしい点は、多くのコールバック関数にアクセスできるので、ユーザーのホバー、クリック、マウスアウトなどの一般的なイベント発生時に、独自のコードとスタイルを実行できることです。Flotは、ほかのグラフ作成パッケージよりもはるかに柔軟性があります。
 
Ajaxを利用することで外部APIをコールして受信したデータをフラグ表示するといったことも可能になります。
 

 

 

関連記事

 

 

 

参考