WordPressで効果的なチャートを作成・展示する方法

2024年5月4日2024年8月19日

ウェブサイトで情報を分かりやすく伝えるためには、データの視覚化が非常に有効です。

WordPressでは、様々な方法でチャートやグラフを簡単に作成し、コンテンツに追加することが可能です。

この記事では、WordPress上でチャートを作成・表示するための詳細な手順と、おすすめのプラグイン、さらにカスタムコーディングの方法まで、幅広くカバーします。

WordPressでのチャート作成オプション

WordPressには、チャートやグラフを作成するための多くのオプションが用意されています。

最も一般的な方法はプラグインの利用ですが、より制御を求めるユーザーのためにカスタムコードを使う方法もあります。

プラグインを使用する方法

プラグインを使用する方法は、プログラミングの知識がなくても直感的にチャートを作成できるため、多くのユーザーにとって最もアクセスしやすい選択肢です。

WP Charts and Graphs

このプラグインは、HTML5を使用してインタラクティブなチャートを提供します。
ライン、バー、円、ポーラー、レーダーチャートなど、多様なチャートオプションがあります。
管理画面からデータを入力し、短コードをページや投稿に貼り付けるだけで、簡単にチャートが表示されます。

Visualizer

Google Chartsを基にしており、動的かつレスポンシブなチャートを生成します。
表、ゲージチャート、エリアチャートなど、豊富なタイプに対応。
データはCSVファイルからインポート可能で、リアルタイムでのデータ更新が反映されます。

Gutenbergブロックエディターを活用する

Gutenbergの導入により、ブロックを利用して直接チャートをページに挿入することが可能になりました。

専用のチャートブロックを追加することで、カスタムのデータビジュアライゼーションが実現します。

カスタムコーディング

HTML5とJavaScript（例えば、Chart.jsやD3.js）を使用して、サイトに完全にカスタマイズされたチャートを実装する方法です。

これにより、デザインと機能の全面的な制御が可能になります。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                ...
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                ...
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]


 }
    }
});