WordPressとChart.jsで解析チャート管理画面を実装する方法を徹底解説(サンプルコード付き)
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressとChart.jsで解析チャート管理画面を実装する方法を徹底解説していきたいと思います。
Chart.jsはJSON形式のデータを簡単にグラフ化して表示することが可能なライブラリです。
このChart.jsは非常に人気のライブラリで、非常に優秀な機能を持ち合わせておりますので、筆者としてはグラフ周りの実装を考えた時にまずこのChart.jsが頭に浮かぶぐらいです。
今回はこのChart.jsの基礎や使い方を習得しつつ、WordPressの管理画面に日別の投稿数のチャート画面の実装を通して実装のコツや知識を身につけていただけたらと思います。
Chart.jsについて詳しく解説いたしますので、よろしければ当記事をお仕事などにご活用いただけましたら幸いです。
Chart.jsとは
Chart.jsとは、JSON形式のデータを簡単にグラフやチャート化することができる、オープンソースのJavaScriptライブラリです。
データをグラフ化する場面で簡単に使えるAPIを提供しており、WebアプリケーションやWebサイトで視覚的に見やすくリッチなチャートを作成するために使用されます。
提供しているグラフの種類としては、折れ線グラフや棒グラフ、円グラフ、ドーナツグラフ、レーダーチャート、散布図など、多様なチャートタイプに対応しています。
HTML5の<canvas>タグを利用して描画するため、軽量で高性能なグラフを提供でき、レスポンシブデザインにも対応しています。
また、カスタマイズ性が高く、色やスタイル、ラベル、ツールチップなどの設定を少しのコードで自由に変更したり拡張することが可能です。
初心者でも簡単に扱えるシンプルなAPIであるところが特徴で、公式ドキュメントやコミュニティサポートが充実しているため、初心者からエンジニア上級者まで幅広く利用されています。
以下がChart.jsの公式ドキュメントですので、よろしければご確認ください。
Chart.jsのGithubは以下になります。
https://github.com/chartjs/Chart.js
Chart.jsのメリット
Chart.jsにはいくつかメリットがあります。
メリットとしては以下があげられます。
- 豊富な種類のチャートタイプ
- レスポンシブ対応している
- カスタマイズ性が高い
- 軽量で使いやすい
- Canvasベースで出力
- コミュニティやドキュメントが充実
それぞれ解説いたします。
豊富な種類のチャートタイプ
Chart.jsは、折れ線グラフ、棒グラフ、円グラフ、ドーナツグラフ、レーダーチャート、散布図、極座標チャートなど、さまざまな種類のチャートに対応しています。
これにより、視覚化したいデータの性質に最適な形式で表示することができ、複雑なデータ分析にも柔軟に対応可能です。
レスポンシブ対応している
Chart.jsはデフォルトでレスポンシブデザインをサポートしており、画面サイズやデバイスに応じて自動的にチャートが調整されます。
そのため、スマートフォンやタブレット、デスクトップといった異なる環境でも一貫したユーザー体験を提供できます。
カスタマイズ性が高い
Chart.jsは、チャートの色やフォント、データポイントの表示方法、ラベル、ツールチップなど、あらゆる要素を詳細にカスタマイズすることが可能です。
また、以下のページからご確認いただけるプラグインを使用することでさらに機能を拡張でき、独自の要件に応じたチャートを簡単に作成できます。
https://www.chartjs.org/docs/latest/developers/plugins.html
軽量で使いやすい
Chart.jsは比較的軽量で、初心者でも扱いやすいシンプルなAPI設計が特徴です。
基本的な設定だけで美しいチャートを描画できるため、コーディング経験が少ない人でも簡単に導入・利用することができます。
Canvasベースで出力
Chart.jsはHTML5の<canvas>要素を使用してグラフを描画します。
これにより、パフォーマンスが高く、拡大しても解像度が劣化しない高品質なグラフを提供でき、Webページでの描画処理もスムーズに行われます。
コミュニティやドキュメントが充実
Chart.jsはオープンソースプロジェクトであり、世界中の活発な開発者コミュニティによってサポートされています。
公式ドキュメントやチュートリアルも充実しており、初心者から上級者まで利用しやすい環境が整っているため、疑問点や課題に対して迅速に対応しやすい環境が揃っています。
Chart.jsの使い方
実装方法の解説の前に、Chart.jsの使い方について解説いたします。
Chart.jsを使うには、まずライブラリをインストールし、HTML内でチャートを描画する<canvas>タグを配置します。
その後、Chart.jsがライブラリとして提供する文法を含めたJavaScriptコードでデータや設定を定義し、チャートを作成します。
基本的な手順をまとめると、以下になります。
- Chart.jsのインストール
- HTMLで描画領域の準備
- JavaScriptでチャートを作成
それぞれ手順に沿って解説します。
Chart.jsのインストール
Chart.jsは、まずはじめにCDNもしくはnpmのどちらかでインストールします。
CDNでインストールする方法は以下になります。
以下のCDNをヘッダーかフッターの箇所にコピー＆ペーストして読み込みます。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>npmでインストールする方法は以下になります。
npm install chart.jsnpmについてわからない方は、以下の記事をご確認いただければと思います。
ちなみに、インストールについて以下の公式ページからご確認いただけますので、よろしければチェックしてみてください。
https://www.chartjs.org/docs/latest/getting-started/installation.html
HTMLで描画領域の準備
チャートを表示するために以下の<canvas>タグのコードを、PHPファイルかHTMLファイルの表示したい場所にコピー＆ペーストします。
<canvas id="myChart"></canvas>JavaScriptでチャートを作成
描画領域である<canvas>タグをコピペできたら、以下のコードをjsファイルもしくはPHPファイルかHTMLファイルのフッターあたりにコピー＆ペーストします。
<script>
// チャートを描画するコンテキストを取得
const ctx = document.getElementById('myChart').getContext('2d');
// チャートの作成
const myChart = new Chart(ctx, {
type: 'bar', // グラフの種類（棒グラフ）
data: {
labels: ['1月', '2月', '3月', '4月', '5月'], // X軸のラベル
datasets: [{
label: '売上 (万円)', // データセットのラベル
data: [12, 19, 3, 5, 2], // グラフのデータ
backgroundColor: [ // 棒の色
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [ // 棒の枠線の色
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1 // 棒の枠線の幅
}]
},
options: {
scales: {
y: {
beginAtZero: true // Y軸を0から始める
}
}
}
});
</script>ここまでの手順をまとめると、以下のコードになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.jsの基本例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
// チャートを描画するコンテキストを取得
const ctx = document.getElementById('myChart').getContext('2d');
// チャートの作成
const myChart = new Chart(ctx, {
type: 'bar', // グラフの種類（棒グラフ）
data: {
labels: ['1月', '2月', '3月', '4月', '5月'], // X軸のラベル
datasets: [{
label: '売上 (万円)', // データセットのラベル
data: [12, 19, 3, 5, 2], // グラフのデータ
backgroundColor: [ // 棒の色
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [ // 棒の枠線の色
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1 // 棒の枠線の幅
}]
},
options: {
scales: {
y: {
beginAtZero: true // Y軸を0から始める
}
}
}
});
</script>
</body>
</html>
画面を確認していただくと、下図のようなイメージです。
上記コードの内容を解説します。
まず、HTMLの<canvas>タグに設定したidを使って、その要素の描画コンテキストを取得します。この際にgetContext(‘2d’)関数を使用します。
次に、Chartクラスのインスタンスを作成し、その中でtypeを指定してチャートの種類を決めます。
たとえば、上記コードのように「type」を「bar」にすると棒グラフが描画されます。
その後、「data」オプションを使ってX軸のラベルやデータの値を定義します。
また、「options」を使用することで、軸や見た目の設定を細かくカスタマイズすることができます。これらの設定を組み合わせることで、目的に合ったチャートを作成できます。
ちなみに「data」や「options 」などの記述内容は「type」で指定するチャートの種類によって若干変わってくるため、それぞれの種類に適した形で記述することに注意しましょう。
Chart.jsで解析チャート管理画面を実装する方法
それでは早速、Chart.jsでWordPressの解析チャート管理画面を実装する方法について解説いたします。
Chart.jsではざっと以下のような種類があります。
- 棒グラフ（bar）
- 線グラフ（line）
- レーダーチャート（radar）
- 円グラフ（pie）
- ドーナツチャート（doughnut）
- 鶏頭図（polarArea）
- バブルチャート（bubble）
- 散布図（scatter）
それぞれ実装していきたいと思います。
コード自体はシンプルですが、ご自身でオプション等をカスタマイズするなどして理想のチャートを実装していただければ幸いです。
棒グラフの場合
棒グラフで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '日付'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: '投稿数'
}
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="200"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードでは、Chart.jsを使用して日別の投稿数を棒グラフとして表示しています。
まず、PHPで生成した日付と投稿数のデータをjson_encode()関数でJavaScript形式に変換し、それをグラフのlabels（X軸）とdata（Y軸）に渡しています。
次に、getContext(‘2d’)関数を使用して、HTMLの<canvas>タグの描画コンテキストを取得し、これを元にグラフを初期化しています。
グラフの種類は「type: ‘bar’」で棒グラフに指定され、データセット内で棒の枠線の色や滑らかな表示の設定が行われています。
また、「options」では、軸のカスタマイズが行われており、X軸には日付ラベルを設定し、ラベルが読みやすいよう自動で間引かれる設定を追加しています。一方、Y軸には「投稿数」というタイトルと、値が0から始まるように指定されています。
さらに、「responsive: true」を設定することで、グラフが画面サイズに応じて自動的に調整され、どのデバイスでも適切に表示されるようになっています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
線グラフの場合
線グラフで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line', // グラフの種類を線グラフに変更
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 線の背景色（透明度あり）
borderWidth: 2,
tension: 0.1 // 線の滑らかさ
}]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '日付'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: '投稿数'
}
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="200"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPress管理画面に日別投稿数を可視化するグラフを表示するものです。
投稿データを取得し、Chart.jsを用いて線グラフ（折れ線グラフ）を描画します。
最初に、独自に定義したget_daily_post_counts()関数で、WordPressデータベースから日別の投稿数をSQLで取得します。このデータは「post_date」を基準に集計され、「day」として日付がフォーマットされます。
次に、独自に定義したadd_chartjs_to_admin()関数でChart.jsを読み込み、取得したデータ（日付と投稿数）をJavaScriptで使用できる形式に変換します。このデータはjson_encodeを使って配列形式に変換され、グラフ描画スクリプト内で利用されます。
JavaScriptでは、<canvas>タグを特定し、その2Dコンテキストを取得します。その後、Chartクラスのインスタンスを作成し、グラフを描画します。この場合、グラフの種類は「type: ‘line’」で指定されており、線グラフが表示されます。
「data」オプションには、日付が「labels」として、投稿数がデータセット「data」として渡されます。また、「borderColor」や「backgroundColor」を指定して、線や背景の色をカスタマイズしています。
さらに、「options」オプションでは、グラフがレスポンシブ対応する設定や、軸ラベルやスケールのカスタマイズが行われています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
レーダーチャートの場合
レーダーチャートで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'radar', // グラフの種類をレーダーチャートに変更
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
fill: true,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 塗りつぶしの色
borderWidth: 2
}]
},
options: {
responsive: true,
scales: {
r: { // レーダーチャート特有のスケール設定
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: Math.max(..." . json_encode($counts) . ") + 2,
title: {
display: true,
text: '投稿数'
}
}
},
plugins: {
legend: {
position: 'top'
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPress管理画面にレーダーチャートを使用して日別投稿数を可視化するものです。
投稿データを取得し、Chart.jsでレーダーチャートを描画します。
最初に、独自に定義したget_daily_post_counts()関数を使用して、WordPressデータベースから日別の投稿数を取得します。SQLクエリを用いて、公開された投稿数を日付ごとに集計し、取得したデータはPHP配列として返されます。
次に、独自のadd_chartjs_to_admin()関数では、Chart.jsを読み込み、取得したデータをJavaScript形式に変換します。json_encode()関数を使用してPHPの配列をJavaScript用のJSON形式に変換し、「labels」には日付を、「data」には投稿数を設定します。
JavaScript内では、<canvas>タグを特定してその描画コンテキストを取得し、Chart.jsを利用してレーダーチャートを描画します。グラフの種類は「type: ‘radar’」で指定されています。また、データセットに対して「fill: true」を指定して背景を塗りつぶし、「borderColor」と「backgroundColor」を使って外枠と塗りつぶしの色をカスタマイズしています。
「options」の設定では、レーダーチャート特有のスケール設定を使用しています。rスケールで軸の最小値（suggestedMin）を0、最大値（suggestedMax）を投稿数の最大値に応じて動的に設定しています。また、「plugins」：オプションで凡例（legend）をグラフの上部に配置しています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
上図だと見づらいですが、以下のように表示されております。
円グラフの場合
円グラフで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function get_fixed_colors($count) {
// 固定のカラーパレット（色を増やすことも可能）
$palette = [
'rgba(255, 99, 132, 0.6)', // 赤
'rgba(54, 162, 235, 0.6)', // 青
'rgba(255, 206, 86, 0.6)', // 黄
'rgba(75, 192, 192, 0.6)', // 緑
'rgba(153, 102, 255, 0.6)', // 紫
'rgba(255, 159, 64, 0.6)', // オレンジ
];
// 必要な数だけカラーパレットを繰り返す
$colors = [];
for ($i = 0; $i < $count; $i++) {
$colors[] = $palette[$i % count($palette)];
}
return $colors;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// 固定カラーパレットから色を取得
$backgroundColors = get_fixed_colors(count($days));
$borderColors = array_map(function($color) {
return str_replace('0.6', '1', $color); // 背景色を基に境界線色を作成
}, $backgroundColors);
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'pie', // グラフの種類を円グラフに変更
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
backgroundColor: " . json_encode($backgroundColors) . ",
borderColor: " . json_encode($borderColors) . ",
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top' // 凡例の位置を指定
},
tooltip: {
enabled: true
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPress管理画面に日別投稿数を円グラフとして表示するためのものです。
投稿データをデータベースから取得し、Chart.jsを利用して円グラフを描画します。グラフには固定のカラーパレットが使用され、各データポイントが異なる色で表現されます。
まず、独自に定義したget_daily_post_counts()関数を使用して、投稿の公開日ごとの投稿数を取得します。この関数はSQLクエリを実行し、データベースから投稿データを日付ごとに集計して返します。このデータはPHP配列として処理され、日付と投稿数がそれぞれ別の配列に分けられます。
次に、独自のget_fixed_colors()関数を使って、カラーパレットから必要な数の色を生成します。この関数は固定された色リストを基にしており、投稿データの数に応じて繰り返し色を取得します。各色は背景色（透明度あり）として使用され、さらに透明度を調整して境界線の色を生成します。
独自のadd_chartjs_to_admin関数では、WordPressのwp_enqueue_script()関数を用いてChart.jsライブラリを読み込み、取得したデータをJavaScript形式に変換します。
そして、HTMLの<canvas>タグをターゲットにして円グラフを描画します。「type: ‘pie’」でグラフの種類を指定し、「labels」には日付、「data」には投稿数が設定されます。また、「backgroundColor」にはデータごとの背景色を、「borderColor」には境界線の色を指定しています。
ちなみにこのグラフはレスポンシブ対応であり、画面サイズに応じて自動調整されます。また、凡例はグラフの上部に配置されており、「tooltip」オプションを有効にすることで、ホバー時に詳細情報が表示されます。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
上図だと見づらいですが、以下のように表示されております。
ドーナツチャートの場合
ドーナツチャートで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function get_fixed_colors($count) {
// 固定のカラーパレット（必要に応じて追加可能）
$palette = [
'rgba(255, 99, 132, 0.6)', // 赤
'rgba(54, 162, 235, 0.6)', // 青
'rgba(255, 206, 86, 0.6)', // 黄
'rgba(75, 192, 192, 0.6)', // 緑
'rgba(153, 102, 255, 0.6)', // 紫
'rgba(255, 159, 64, 0.6)', // オレンジ
];
// 必要な数だけカラーパレットを繰り返す
$colors = [];
for ($i = 0; $i < $count; $i++) {
$colors[] = $palette[$i % count($palette)];
}
return $colors;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// 固定カラーパレットから色を取得
$backgroundColors = get_fixed_colors(count($days));
$borderColors = array_map(function($color) {
return str_replace('0.6', '1', $color); // 背景色を基に境界線色を作成
}, $backgroundColors);
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'doughnut', // グラフの種類をドーナツチャートに変更
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
backgroundColor: " . json_encode($backgroundColors) . ",
borderColor: " . json_encode($borderColors) . ",
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top' // 凡例の位置
},
tooltip: {
enabled: true
}
},
cutout: '50%' // ドーナツの中央部分の空白サイズを指定
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPress管理画面で日別の投稿数を可視化するドーナツチャートを作成するためのものです。
まず、独自に定義したget_daily_post_counts()関数を使用してWordPressデータベースから日別の投稿数を取得します。この関数では、SQLクエリを実行し、投稿タイプが「投稿（post）」で公開済み（publish）であるものを対象に日ごとに集計します。結果は日付と投稿数のペアで返されます。
次に、独自のget_fixed_colors()関数を使い、グラフに使用する色を準備します。この関数では、固定されたカラーパレットからデータの数に応じた色をリストとして返します。色は透明度付きの背景色と、その透明度を除去した境界線色に分かれています。
独自のadd_chartjs_to_admin()関数では、JavaScriptライブラリのChart.jsを読み込みます。その後、get_daily_post_counts()関数から取得したデータをJavaScriptの形式に変換し、グラフ用のデータセットを構築します。このデータをもとに、WordPress管理画面にある<canvas>タグをターゲットとして、ドーナツチャートを描画します。「cutout: ‘50%’」オプションによって、中央部分が空白のドーナツ型チャートが作成されます。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
上図だと見づらいですが、以下のように表示されております。
鶏頭図の場合
鶏頭図で実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function get_fixed_colors($count) {
// 固定のカラーパレット（必要に応じて追加可能）
$palette = [
'rgba(255, 99, 132, 0.6)', // 赤
'rgba(54, 162, 235, 0.6)', // 青
'rgba(255, 206, 86, 0.6)', // 黄
'rgba(75, 192, 192, 0.6)', // 緑
'rgba(153, 102, 255, 0.6)', // 紫
'rgba(255, 159, 64, 0.6)', // オレンジ
];
// 必要な数だけカラーパレットを繰り返す
$colors = [];
for ($i = 0; $i < $count; $i++) {
$colors[] = $palette[$i % count($palette)];
}
return $colors;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 日と投稿数のデータを準備
$days = [];
$counts = [];
foreach ( $daily_counts as $data ) {
$days[] = $data->day;
$counts[] = $data->post_count;
}
// 固定カラーパレットから色を取得
$backgroundColors = get_fixed_colors(count($days));
$borderColors = array_map(function($color) {
return str_replace('0.6', '1', $color); // 背景色を基に境界線色を作成
}, $backgroundColors);
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'polarArea', // グラフの種類を鶏頭図に変更
data: {
labels: " . json_encode($days) . ",
datasets: [{
label: '日別公開記事数',
data: " . json_encode($counts) . ",
backgroundColor: " . json_encode($backgroundColors) . ",
borderColor: " . json_encode($borderColors) . ",
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right' // 凡例の位置
},
tooltip: {
enabled: true
}
},
scales: {
r: {
beginAtZero: true,
ticks: {
stepSize: 1 // ステップサイズを設定
}
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPressの管理画面に鶏頭図（Polar Area Chart）を使用して日別の投稿数を表示する機能を追加するものです。
まず、独自に定義したget_daily_post_counts()関数では、WordPressデータベースから日別の投稿数を取得します。この関数は、投稿タイプが「post」でステータスが「publish」の投稿をSQLクエリを使用して集計し、日付と投稿数のペアを返します。
次に、独自のget_fixed_colors()関数では、グラフで使用する固定のカラーパレットを生成します。事前に定義された色の配列を使用し、データ数に応じて配列を繰り返しながら必要な数の色を生成します。背景色用の色を取得するだけでなく、透明度を調整した境界線用の色も派生させています。
独自のadd_chartjs_to_admin()関数では、Chart.jsライブラリをWordPressに読み込ませ、グラフの描画に必要なJavaScriptコードを動的に生成します。
この関数内で、get_daily_post_counts()関数から取得したデータを基に日付と投稿数の配列を作成し、さらにget_fixed_colors()関数を用いてカラーパレットを取得しています。
また、凡例の位置を「右」に設定し、スケールの開始値をゼロに固定するなど、グラフのオプションもカスタマイズされています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
上図だと見づらいですが、以下のように表示されております。
バブルチャートの場合
バブルチャートで実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// バブルチャートのデータ準備
$dataPoints = [];
$colors = [];
$colorPalette = [
'rgba(255, 99, 132, 0.6)', // 赤
'rgba(54, 162, 235, 0.6)', // 青
'rgba(255, 206, 86, 0.6)', // 黄
'rgba(75, 192, 192, 0.6)', // 緑
'rgba(153, 102, 255, 0.6)', // 紫
'rgba(255, 159, 64, 0.6)', // オレンジ
];
$index = 0;
foreach ($daily_counts as $data) {
$dataPoints[] = [
'x' => strtotime($data->day), // x軸（UNIXタイムスタンプ）
'y' => $data->post_count, // y軸（投稿数）
'r' => $data->post_count * 2 // バブルの半径（投稿数に応じたサイズ）
];
$colors[] = $colorPalette[$index % count($colorPalette)];
$index++;
}
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bubble', // グラフの種類をバブルチャートに変更
data: {
datasets: [{
label: '日別公開記事数',
data: " . json_encode($dataPoints) . ",
backgroundColor: " . json_encode($colors) . ",
borderColor: 'rgba(0, 0, 0, 0.8)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(context) {
var data = context.raw;
var date = new Date(data.x * 1000).toISOString().slice(0, 10);
return '日付: ' + date + ', 投稿数: ' + data.y;
}
}
}
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: '日付 (タイムスタンプ)'
},
ticks: {
callback: function(value) {
var date = new Date(value * 1000).toISOString().slice(0, 10);
return date;
}
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: '投稿数'
}
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPressの管理画面にバブルチャートを使用して日別の投稿数を表示する機能を追加します。
独自に定義したget_daily_post_counts()関数では、WordPressデータベースから日別の投稿数を取得します。この関数は、投稿タイプが「post」でステータスが「publish」の投稿をSQLクエリを使用して集計し、日付と投稿数を返します。
独自のadd_chartjs_to_admin()関数では、Chart.jsライブラリを読み込み、日別の投稿数データをバブルチャート形式で描画するためのJavaScriptコードを生成します。
この関数では、各データポイントが「x: UNIXタイムスタンプ」「y: 投稿数」「r: バブルのサイズ」として表現されます。バブルの半径は投稿数に比例させています。背景色には固定されたカラーパレットが使用され、色はデータポイントごとに循環します。
グラフのJavaScriptコードでは、「tooltip」にカスタムラベルを設定して、ツールチップ内に日付と投稿数を表示するようにしています。また、x軸のスケールは「linear」に設定され、値はタイムスタンプから日付形式に変換されます。y軸は投稿数を表し、ゼロから始まるスケールになっています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
散布図の場合
散布図で実装する方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー＆ペーストしてください。（プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー＆ペーストしてください）
<?php
function get_daily_post_counts() {
global $wpdb;
// 日別の投稿数を取得するSQL
$results = $wpdb->get_results(
"
SELECT
DATE_FORMAT(post_date, '%Y-%m-%d') AS day,
COUNT(ID) AS post_count
FROM
$wpdb->posts
WHERE
post_type = 'post' AND post_status = 'publish'
GROUP BY
day
ORDER BY
day ASC
"
);
return $results;
}
function add_chartjs_to_admin() {
wp_enqueue_script( 'chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
// 日別投稿数のデータを取得
$daily_counts = get_daily_post_counts();
// 散布図のデータ準備
$dataPoints = [];
foreach ($daily_counts as $data) {
$dataPoints[] = [
'x' => strtotime($data->day), // x軸（UNIXタイムスタンプ）
'y' => $data->post_count // y軸（投稿数）
];
}
// JavaScriptでグラフを作成
echo "<script>
jQuery(document).ready(function($) {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter', // グラフの種類を散布図に変更
data: {
datasets: [{
label: '日別公開記事数',
data: " . json_encode($dataPoints) . ",
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
var data = context.raw;
var date = new Date(data.x * 1000).toISOString().slice(0, 10);
return '日付: ' + date + ', 投稿数: ' + data.y;
}
}
}
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: '日付 (タイムスタンプ)'
},
ticks: {
callback: function(value) {
var date = new Date(value * 1000).toISOString().slice(0, 10);
return date;
}
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: '投稿数'
}
}
}
}
});
});
</script>";
}
add_action('admin_footer', 'add_chartjs_to_admin');
function add_chart_to_admin_page() {
echo '<div class="wrap">
<h1>日別投稿数のグラフ</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>';
}
add_action('admin_menu', function() {
add_menu_page(
'日別投稿数グラフ',
'日別投稿数グラフ',
'manage_options',
'chartjs-demo',
'add_chart_to_admin_page'
);
});上記コードは、WordPressの管理画面で散布図を使用して日別の投稿数を視覚的に表示する機能を提供します。
独自に定義したget_daily_post_counts()関数は、投稿データベースから日別の投稿数をSQLクエリで取得します。このクエリでは、投稿タイプが「post」で、ステータスが「publish」の投稿を日付ごとにグループ化し、結果を返します。
独自のadd_chartjs_to_admin()関数では、Chart.jsライブラリを読み込み、日別投稿数のデータを散布図形式で描画するためのJavaScriptコードを生成します。
この関数では、各データポイントが「x: UNIXタイムスタンプ」「y: 投稿数」として表現されます。「backgroundColor」と「borderColor」には同じ色が使用され、データポイントは統一されたスタイルで表示されます。（場合によっては色を分けるなどした方がわかりやすいかもしれません）
JavaScriptコード内では、「tooltip」にカスタムラベルを設定し、ツールチップ内で日付と投稿数が表示されるようにしています。
また、x軸は「linear」スケールとして設定され、タイムスタンプを日付形式に変換して表示します。y軸は投稿数をゼロから始めるスケールになっており、投稿数をわかりやすく比較できるようになっています。
ペーストできたら、ブラウザを更新してからWordPress管理画面左メニューの「日別投稿数グラフ」をクリックして表示を確認してみましょう。
すると下図のイメージで表示されているかと思います。
まとめ
WordPressとChart.jsを活用して解析チャート管理画面を実装する方法について解説は以上になります。
Chart.jsは、JSON形式のデータを簡単にグラフ化できる非常に優れたライブラリです。その人気の高さはもちろん、機能の豊富さや使いやすさから、グラフの実装を考える際に真っ先に候補として挙がるツールのひとつです。
今回の記事では、Chart.jsの基礎や使い方を習得しつつ、WordPressの管理画面に日別投稿数を可視化するチャート画面を実装するプロセスを詳しく解説しました。この実装を通じて、Chart.jsの活用方法やWordPressとの連携のコツを学んでいただけたのではないかと思います。
この記事が、皆様の業務やプロジェクトにおいて役立つ知識となれば幸いです。ぜひ、今回の内容を参考にしながら、実際の開発に役立ててください。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など