simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.09.6

WordPressでChart.jsをつかってみる

WEB WordPress

たまには仕事の技術的な話でも。というか、今後発生するであろう案件で下調べをしていたら、中々難しい部分があったんですが、その解決方法がわかったので備忘録的な意味を込めて。

何の話かというと、タイトルにもあるように、Chart.jsというjqueryのプラグインをつかって、Wordpressの投稿記事にグラフを挿入するやり方です。

僕が勤めている会社で、これから比較サイトを作ることになり、その中で比較する商品の特性を数値化したレーダーチャートを付ける、という話になりました。

それが一回作って終わりのページなら画像で作ればいいだけの話なのですが、サイトの更新、運営中に誰でも気軽に作れるようにしたい、との要望があり、その方法を色々探していました。

棒グラフや折れ線グラフ、円グラフならWordpressのプラグインで簡単に作れそうなのですが、欲しいのはレーダーチャート。僕の探し方が悪いだけなのか、使えそうなプラグインが見つかりませんでした。このご時世、ググって見つからないものは、きっと世の中に存在しないもの、としてプラグインの実装は諦め、なるべく簡単にチャートを作れる方法を探っていたのですが、どうやらChart.jsというjqueryのプラグインをつかえば、比較的簡単に理想のチャートが作れそうだったので、早速試してみました。

WordPressでのChart.jsの使い方

header.phpでChart.jsを読み込む

各テーマのheader.php内に下記ソースを記述します。もしかしたらfooter.phpの方(bodyの閉じタグ近く)が良いのかも知れませんが、試していません。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

併せてbodyタグにonload属性を設定するので、下記のように記述します。

<body <?php body_class(); ?> onload="displayPieChart();">

記事内にチャートの詳細を記述する

チャートを挿入したい個別記事、固定ページの編集画面に、チャートの項目や数値を表示するためのスクリプトを記述します。

<script language="JavaScript">
  function displayPieChart() {
    var data = {
        labels: ["項目01", "項目02", "項目03", "項目04", "項目05", "項目06"],
        datasets: [
            {
                label: "商品名01",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "green",
                pointColor: "green",
                pointStrokeColor: "green",
                pointHighlightFill: "green",
                pointHighlightStroke: "green",
                data: [4, 3, 5, 2, 4, 3]
            },
            {
                label: "商品名02",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [5, 5, 2, 5, 3, 3]
            },
            {
                label: "商品名03",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "yellow",
                pointColor: "yellow",
                pointStrokeColor: "yellow",
                pointHighlightFill: "yellow",
                pointHighlightStroke: "yellow",
                data: [3, 4, 2, 5, 5, 3]
            }
        ]
    };
    var ctx = document.getElementById("radarChart").getContext("2d");
    var options = { 
      legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",responsive:true,
    };
    var radarChart = new Chart(ctx).Radar(data, options);
    document.getElementById("info").innerHTML = radarChart.generateLegend();
  }
</script>

本来はheadタグの中に書くべきなんでしょうが、そうするとチャートの数を増やすごとに記述内容が長くなってしまうこと、メンテナンス性が悪くなってしまうこと、この2点から投稿記事内に記述しようと考えました。

また、こちらの書き方ではオプションでチャートをレスポンシブ対応にしています。デフォルトではレスポンシブになっていないようなので、ご注意ください。

function.phpでチャートを表示させるショートコードを作成する

次に、function.phpにてチャートを表示させるショートコードを作成します。function.phpの一番下に下記を追記します。

function canvas_tag($atts){
	extract(shortcode_atts(array(
	'id' => null
	),$atts));

	$html = <<<eof
	<canvas id="{$id}" height="450" width="600"></canvas>
eof
;
	return $html;
}
add_shortcode('canvas','canvas_tag');

ちなみにわざわざショートコードを書かなくても、

<canvas id="radarChart" height="450" width="600"></canvas>

と直接書いても良いのですが、エディタのビジュアルとテキストを切り替えてしまうと、なぜかcanvasタグが消えてしまい、チャートが表示されなくなってしまいます。

どうやらWordPressではcanvasタグの使用に制限をかけているらしく、このような現象が起こってしまうとのことです。

ただ、ショートコードで吐き出すようにすればこの問題は回避できるので、今回書いたような手順を踏んでいます。

作成したショートコードを記述する

チャートを挿入したい場所に下記ショートコードを記述します。

[canvas id="radarChart"]

すると、こんな風にすてきなレーダーチャートが表示されるかと思います。

なお、ショートコードの下に

<div id="info"></div>

と記述すると、下記のようにチャートの説明が入ります。

作業を終えて

bodyのonload属性の部分と、ショートコードにする部分で少しつまづきましたが、一度悩むと覚えられる内容なので、今後はスムーズに実装できそうです。

下記が今回参考にさせていただいたページになりますので、一読しておくと理解が深まると思います。

WordPressでChart.jsを使うときの注意点と対処法について
ブログやサイトに記事を書くときだけでなく、プレゼンや普段の会話でも、あることを主張する(理解してもらう)ために…


 elstreet 
【Chart.js Options】オプションの使い方。Chart.jsのオプション機能を使ってグラ...
https://el-soul.com/elstreet/?p=470
Chart.jsの公式ドキュメントによるとオプションがたくさんついているので、いくつかの機能を実際に使いつつ、使い方を紹介したいと思います。>Chart.jsのインストール...

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

【簡単!】XAMPPでWordPressをローカル環境で動かす方法

WordPress

【簡単!】XAMPPでWordPressをローカル環境で動かす方法

【WordPress】シンプルなオリジナルテーマの作り方(8)~検索フォーム~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(8)~検索フォーム~

妻と娘と噂の古着屋西海岸へ

FASHION

妻と娘と噂の古着屋西海岸へ

まさに青春狂走曲な一冊

BOOK

まさに青春狂走曲な一冊

【WordPress】カスタムフィールドをつかってスライダーを簡単に更新する

WordPress

【WordPress】カスタムフィールドをつかってスライダーを簡単に更新する

痴漢問題になると女性に甘すぎやしないか?

THOUGHT

痴漢問題になると女性に甘すぎやしないか?

ハッピーガールちゃんとの大阪での日々

LIFE

ハッピーガールちゃんとの大阪での日々