WordPress でグラフを表示するには Chartjs を使用します。以下の記事を参考にすることができます。
この記事を参考にしましたが、なぜかグラフが表示されませんでした。開発者ツールで原因を調べたところ、Chart が Undefine であるというエラーが表示されていました。それは、私がある記述を見落としていたことが原因でした。
その記述とは jQuery(document).ready(function($){}); です。この中に グラフのスクリプト を記述をしないとエラーになり、グラフが表示されません。
それは chartjs をブラウザが読み込むタイミングが関係しています。chartjs より先に グラフのスクリプト がブラウザに読み込まれた場合、Chartクラスが定義されていないため、Uncaught ReferenceError: Chart is not defined というエラーが出てグラフが表示できません。
今回は chartjs を使用して、WordPress の記事の中にグラフを表示する方法をご紹介していきます。この方法を使って以下の記事を作成しましたので、よろしければ是非ご覧ください。
サンプルコード
まず初めにサンプルコードを記載します。このコードを functions.php に記載して更新します。functions.php はこちらの記事で解説しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
function compare_subscriber() { wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true ); global $wpdb; // SQL文を作成 $query = "SELECT id, title, MAX(view_count) AS view_count FROM $wpdb->subscriber GROUP BY id, title ORDER BY view_count"; // クエリの実行 $rows = $wpdb->get_results($query); // このcanvasにグラフを表示 $return_val = "<div style='position:relative;width:70%;'><canvas id='myChart'></canvas></div>"; // chartjsにデータを設定 $return_val.= func_chartjs($rows); // 結果を表示 return $return_val; } add_shortcode('show_table', 'compare_subscriber'); function func_chartjs($rows) { // DBデータを取り出して配列に格納 $title = []; $view_count = []; foreach($rows as $row){ $title[] = $row->title; $view_count[] = $row->view_count; } // 呼び出し元に返す文字列 $return_val = ""; $return_val .= "<script> jQuery(document).ready(function() { // チャートを描画するコンテキストを取得 ctx = document.getElementById('myChart').getContext('2d'); // チャートの作成 myChart = new Chart(ctx, { data: { labels: ". json_encode($title) .", // X軸のラベル datasets: [{ type: 'line', label: '再生回数', // データセットのラベル data: ". json_encode($view_count) .", // グラフのデータ backgroundColor: [ // 棒の色 'rgba(255, 99, 132, 0.2)', ], borderColor: [ // 棒の枠線の色 'rgba(255, 99, 132, 1)', ], borderWidth: 1.5, // 棒の枠線の幅 tension: 0.2, // 線の滑らかさ yAxisID: 'y-axis-1', },{ type: 'bar', label: '再生回数', // データセットのラベル data: ". json_encode($view_count) .", // グラフのデータ backgroundColor: [ // 棒の色 'rgba(153, 102, 255, 0.2)', ], borderColor: [ // 棒の枠線の色 'rgba(153, 102, 255, 1)', ], borderWidth: 1, // 棒の枠線の幅 tension: 0.2, // 線の滑らかさ yAxisID: 'y-axis-2', }] }, options: { scales: { 'y-axis-1': { type: 'linear', position: 'left', beginAtZero: true, // Y軸を0から始める }, 'y-axis-2': { type: 'linear', position: 'right', beginAtZero: true, // Y軸を0から始める grid: { // 右軸の罫線を消す display: false, }, } } } }); }); </script>"; return $return_val; } |
実行結果
ショートコードを本文に記載し、ページを表示すると以下の画像のようになります。
コードの解説
チャートを表示するにはデータベースから取得したデータを表示したいという場合が多いと思います。そこで今回はデータベースから取得したデータをグラフに表示する方法をご紹介していきます。
WordPressのデータベースを使用する
データベースを使用するには wp-includes\class-wpdb.php の $tables変数に使用するテーブル名を記述する必要があます。以下の記事を参考に設定しましょう。ショートコードの使い方（※重要） も解説しています。
データを取り出す方法
・テーブルへのアクセスと取り出し
|
1 2 3 4 5 6 7 |
global $wpdb; // SQL文を作成 $query = "SELECT id, title, MAX(view_count) AS view_count FROM $wpdb->subscriber GROUP BY id, title ORDER BY view_count"; // クエリの実行 $rows = $wpdb->get_results($query); |
$wpdb->target_youtuber の部分を見ると -> が使用されています。これによりデータベースのテーブルにアクセスすることができます。また、テーブル名には wp_ を付けません。
・項目データの取り出し
|
1 2 3 4 5 6 7 |
// DBデータを取り出して配列に格納 $title = []; $view_count = []; foreach($rows as $row){ $title[] = $row->title; $view_count[] = $row->view_count; } |
各項目を取り出す場合も -> を使用します。通常の配列のように $row[“title”] と記述しても取り出すことはできず、エラーとなるので注意しましょう。
chartjs を使用する
chartjs を wordpress で使用しているのは以下の部分です。
|
1 |
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true ); |
wp_enqueue_script() は WordPress が提供している関数で、スクリプトファイルを「重複しないように」また「適切な順番」で読み込むように制御してくれます。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
| $handle | スクリプトの識別名 |
|---|---|
| $src | スクリプトのパス |
| $deps | 依存スクリプト |
| $ver | スクリプトのバージョン |
| $in_footer | スクリプトの読み込み位置（trueで/body前、falseで/head前） |
ここで重要なのは $src です。ここに chartjs の URL を記述します。これにより、インターネット経由で chart.js が読み込まれます。
重要ポイント
chartjs へデータを設定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
// 呼び出し元に返す文字列 $return_val = ""; $return_val .= "<script> jQuery(document).ready(function() { // チャートを描画するコンテキストを取得 ctx = document.getElementById('myChart').getContext('2d'); // チャートの作成 myChart = new Chart(ctx, { data: { labels: ". json_encode($title) .", // X軸のラベル datasets: [{ type: 'line', label: '再生回数', // データセットのラベル data: ". json_encode($view_count) .", // グラフのデータ backgroundColor: [ // 棒の色 'rgba(255, 99, 132, 0.2)', ], borderColor: [ // 棒の枠線の色 'rgba(255, 99, 132, 1)', ], borderWidth: 1.5, // 棒の枠線の幅 tension: 0.2, // 線の滑らかさ yAxisID: 'y-axis-1', },{ type: 'bar', label: '再生回数', // データセットのラベル data: ". json_encode($view_count) .", // グラフのデータ backgroundColor: [ // 棒の色 'rgba(153, 102, 255, 0.2)', ], borderColor: [ // 棒の枠線の色 'rgba(153, 102, 255, 1)', ], borderWidth: 1, // 棒の枠線の幅 tension: 0.2, // 線の滑らかさ yAxisID: 'y-axis-2', }] }, options: { scales: { 'y-axis-1': { type: 'linear', position: 'left', beginAtZero: true, // Y軸を0から始める }, 'y-axis-2': { type: 'linear', position: 'right', beginAtZero: true, // Y軸を0から始める grid: { // 右軸の罫線を消す display: false, }, } } } }); }); </script>"; |
ポイント① jQuery(document).ready(function() { ここに処理を記載 });
chartjs の処理が記載されていますが、必ず jQuery(document).ready(function() { ここに処理を記載 }); としてください。この記載をすることにより、chartjs が呼び込まれた後に ここに処理を記載 の部分をブラウザが読み込みます。
この記述をしない場合、まだ chartjs を読み込んでいない場合でも ここに処理を記載 の部分がブラウザに読み込まれてしまう可能性があり、そうなるとエラーがでてグラフが読み込まれません。
ポイント② canvasタグの ID を合わせる
|
1 2 3 4 5 6 |
// このcanvasにグラフを表示 $return_val = "<div style='position:relative;width:70%;'><canvas id='myChart'></canvas></div>"; // -----途中省略----- ctx = document.getElementById('myChart').getContext('2d'); |
<canvas id=’myChart‘> と getElementById(‘myChart‘) は一致している必要があります。
ポイント③ 配列データを json_encode(配列変数) で chartjs に渡す
|
1 |
labels: ". json_encode($title) .", // X軸のラベル |
テーブルから取得した１次元配列のデータを json 形式に変換して chartjs に渡しています。配列を json 形式 に変換するには json_encode で囲むだけです。
ポイント④ option の設定方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
options: { scales: { 'y-axis-1': { type: 'linear', position: 'left', beginAtZero: true, // Y軸を0から始める }, 'y-axis-2': { type: 'linear', position: 'right', beginAtZero: true, // Y軸を0から始める grid: { // 右軸の罫線を消す display: false, }, } } } |
chartjs の最新バージョンの書き方は上のようにします。複数のデータがある場合は、’y-axis-1’、’y-axis-2’というようにしていきます。また grid:{ display: false } の部分は左右でそれぞれ罫線があると見ずらいため、片方の罫線を消しています。
グラフが表示されない場合
グラフが表示されない場合、以下の２点を実行してみましょう。
①Ctrl + F5 でスーパーリロードする
Ctrl + F5 はスーパーリロードと呼ばれ、ブラウザのキャッシュをクリアして再表示します。画像の表示のような場合にはキャッシュが残ったりしますが、今回のような場合ではキャッシュが残ることは考えにくいと思いますが、一応試してみましょう。
②F12 の開発者ツール（Chrome）の Console を見る
こちらは必ず実行しましょう。Chrome の場合は 右クリック → 検証 で見ることもできます。私が今回ハマったポイントとして、Uncaught ReferenceError: Chart is not defined が Console に表示されていたことから、chartjs の読み込みタイミングが問題だと気付きました。
さいごに
今回は chartjs を使用して WordPress の記事にグラフを表示する方法をご紹介しました。
参考になれば幸いです。
ではまた。
コメント