2026年6月27日

WordPressのChart.jsでグラフを表示する方法

テーマ・デザイン

はじめに

Chart.jsは、簡単で使いやすいJavaScriptライブラリであり、ウェブページ上で様々な種類のグラフを描画することができます。この記事では、WordPressにおいてChart.jsを使用してインタラクティブなグラフを作成する方法について解説します。

症状・背景

このテーマが必要になる主な場面:

サイト訪問者にデータを視覚的に提供したい場合
アクセス解析結果や売上データの可視化を行いたい場合
ユーザー体験を向上させるため、情報の伝達効率を高めたい場合

手順・設定方法

ステップ1: Chart.jsと依存ライブラリのインストール

# WordPressテーマディレクトリに移動します。
cd wp-content/themes/your-theme

# Chart.jsとその他の必要なライブラリをダウンロードします。
npm install chart.js axios moment --save

# インストールしたChart.jsとその他のJavaScriptファイルをWPのスクリプトとして登録します。
wp script init
wp script include node_modules/chart.js/dist/Chart.min.js
wp script include node_modules/moment/min/moment.min.js

ステップ2: PHPからJavaScriptへデータの送信

# データを取得するPHPファイルを作成または編集します。
vi wp-content/themes/your-theme/js/data.php

# グラフに表示したいデータを取得し、JSON形式で返すPHPコードを追加します。
<?php
header('Content-Type: application/json');
$data = array(
    'months' => ['1月', '2月', '3月'],
    'sales'  => [40, 56, 78],
);
echo json_encode($data);
?>

ステップ3: JavaScriptファイルの作成とChart.jsの使用

# Chart.jsを使用してグラフを描画するJavaScriptファイルを作成します。
vi wp-content/themes/your-theme/js/chart.js

// データ取得PHPファイルからデータを読み込みます。
fetch('/wp-content/themes/your-theme/js/data.php')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.months,
                datasets: [{
                    label: '売上',
                    data: data.sales
                }]
            },
            options: {}
        });
    });

ステップ4: WordPressのフロントエンドにJavaScriptを追加

# WordPressテーマのfunctions.phpファイルを開きます。
vi wp-content/themes/your-theme/functions.php

// グラフ表示用のHTMLとJSを登録します。
function register_my_script() {
    wp_enqueue_script('chart', get_template_directory_uri() . '/js/chart.js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'register_my_script' );

注意事項

グラフのデータは定期的に更新されるように、APIエンドポイントを適切に設定すること。
JavaScriptエラーが発生した場合、ブラウザの開発者ツールで確認して対処すること。
安全性の観点から、外部からのリクエストは必ず認証やIP制限をかけること。
グラフ表示に時間がかかる場合は、データ取得プロセスを見直しパフォーマンス向上を目指すこと。

まとめ

1. インストール: Chart.jsと必要なライブラリをnpmでインストールします。

2. データ取得: PHPからJSON形式のデータを生成してJavaScriptに渡します。

3. グラフ描画: JavaScriptファイル内でChartオブジェクトを作成し、HTMLに描画します。

4. エンドポイント設定: WordPressテーマ内にAPIエンドポイントを追加します。

5. セキュリティ対策: データの安全性とパフォーマンス向上のために適切な設定を行います。

Post Views: 1