WordPress|Chart.jpでチャートを表示させる

スポンサーリンク

WordPressで無料のオープンソースJavaScriptライブラリのChart.jpを使って、チャートを表示させる方法を紹介します。WordPress特有の癖や表示速度なども考慮しています。

スポンサーリンク

はじめに

Chart.jpはMITライセンスの下で利用できる無料のオープンソースJavaScriptライブラリです。
HTML5キャンバスでチャートの作成ができます。

公式サイト

Chart.js | Open source HTML5 Charts for your website
Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

日本語のドキュメント?

Chart.js · Chart.js 日本語ドキュメント

WordPressでChart.jpでチャートを表示させる

以下の参考サイトにもあるようにChart.jpを表示させることは可能です。
しかしWordPress特有なところがあり、少しハマったので皆さんの参考になれば幸いです。

参考サイト

How to Create a JavaScript Chart with Chart.js - WordPress Design and Development
If you have an information-rich website or application, you might want to visualize your data so that users can better make sense of it. Although tables

なお、今回は、Chart.jpの説明は省略します。

Javascript(JS)を外部ファイルとして読み込む

各ページに表示させるなどの場合、テーマのfunctions.phpを編集するのが常套手段です。

子テーマを利用している場合としていない場合で少し異なりますが基本は同じです。

function chartjs_scripts() {
    if (is_single(array(123))){
        wp_enqueue_script( 
            'Chart.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js',
            array(),
            false,
            true
        );
        wp_enqueue_script( 
            'chartjs-plugin-annotation.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js',
            array(),
            false,
            true
        );
    }
}
function MyJavascript_scripts() {
    if (is_single(array(123))){
        wp_enqueue_script( 
            'MyJavascript.js',
            get_stylesheet_directory_uri().'/MyJavascript.js',
            array(),
            false,
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'chartjs_scripts' );
add_action( 'wp_enqueue_scripts', 'MyJavascript_scripts' );

以下は、ソースの説明です。

外部ファイルを読み込む

Chart.min.jsとプラグインのchartjs-plugin-annotation.min.jsなどはwp_enqueue_scriptを使って読み込ませます。

wp_enqueue_scriptのパラメーター
パラメータ意味初期値
$handle識別名(一意の名称
$srcJSのパスfalse
$deps本JSが読み込まれる前に読むこむJSの$handlearray()
$verJSのバージョンfalse
$in_footerJSを読み込む場所:true=header、false=footer)false

自分で作成したJavascript(JS)を外部ファイルとして読み込む

自分で作成したJSが短ければ記事の本文に記載することも可能ですが、長いプログラムの場合は、Wordpressが自動でPタグを入れたりする場合がありますのでおすすめできません。
自分で作成したJSは外部ファイルにすることが最良だと思います。

JSのアップロードあ「メディア」からはアップロードできません。
FTPソフトでアップロードします。

アップロード先は、テーマの子テーマフォルダが最適だと思います。

wp_enqueue_scriptの$srcに記載するパスは以下のどちらかで指定する。

  • 子テーマを利用している場合
    • get_stylesheet_directory_uri().’/MyJavascript.js’,
  • 子テーマを利用していない場合(親テーマのfunctions.phpを使う
    • get_template_directory_uri().’/MyJavascript.js’,

記事のページIDを使って表示させるページを指定する

ライブラリを全ページで読み込むと、表示速度の遅延につながりますので、ページIDを指定して読み込ませることにします。

if (is_single(array(123))){

123がページIDになり、記載してあるページID場合に読み込ませます。

ここでの注意が、is_singlefunction内でしか利用できないということです。
add_actionの前に同じようにIF文を入れたいところですが、使えないようです。
ちなみに、他のglobal $postthe_ID()get_post()get_post_field()も同様です。

この方法であれば、私のようにURLのパーマリンク設定を%postname%/としていてもページIDで振り分けることができます。

複数ページの場合は、array(123)をarray(123,456)のようにカンマ区切りで追記すればいいです。

ページにChart.jpを表示させる

基本的には旧エディタのテキストに切り替えて以下のソースを追加するだけです。

<div><canvas id="canvas" height="100"> </canvas></div>

ここの注意が、WordPressが勝手にソースを消してしまう恐れがあります。
上記のように、

  • canvasタグの間にスペースを入れる
  • divタグなどでcanvasタグを隙間なく挟む

とすれば、ソースが消されることはないようです。

補足

JS内でCSVファイルなどを読み込ませる場合は、CSVファイルをWordPressの管理画面のメディアからアップロードします。JS内は、ドメインからのルートパスを記述することをおすすめします。

 

コメント

タイトルとURLをコピーしました