WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】

- WordPress
- Tech
2023/01/03

WordPressの記事内でレーダーチャートを使用したい
でもプラグインとかはできるだけ使いたくない
ショートコードとして何回も使い回したい

という方に向けて、おしゃれなレーダーチャートの作り方をまとめました。

ショートコードとして実装するので、今日から誰でも簡単にレーダーチャートを使えるようになりますよ。

完成イメージ

このようなチャートを記事内に挿入することができ、下記を自由にカスタマイズ可能です。

各パラメーターの値
各パラメーターのタイトル
チャートの色
アニメーションのON・OFF

複数のモノよりかは単体のモノを評価するのに向いており、私の特化サイトでも頻繁に使用していますが各項目やスコアを直感的にかつ見やすく表現できるので、我ながらとても気に入っています。

またプラグインやライブラリを使用していないので、速度にこだわる人やできるだけプラグインを増やしたくない人にもおすすめです。

※ 本カスタマイズで使えるようになるのは5角形のレーダーチャートのみになります。

実装方法

0. バックアップを忘れずに

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをおすすめします。

その方法について詳しくは下記記事にまとめているのでぜひ参考にしてください。

1. functions.phpに追記し色を調整する

/**************************
 * レーダーチャート
 ***************************/
function radar_chart($atts)
{
    if (is_null($atts)) {
        return '';
    }

    extract(shortcode_atts([
        'title1' => '項目1',
        'score1' => 1,
        'title2' => '項目2',
        'score2' => 1,
        'title3' => '項目3',
        'score3' => 1,
        'title4' => '項目4',
        'score4' => 1,
        'title5' => '項目5',
        'score5' => 1,
        'aria_label' => 'レーダーチャート'
    ],$atts));

    $item1_array=[" L 160 128"," L 160 106"," L 160 84"," L 160 62"," L 160 40"];
    $item2_array=[" L 140 143"," L 120 136"," L 100 129"," L 80 122"," L 60 115"];
    $item3_array=[" L 147.5 167"," L 135 184"," L 122.5 201"," L 110 218"," L 97.5 235"];
    $item4_array=[" L 172.5 167"," L 185 184"," L 197.5 201"," L 210 218"," L 222.5 235"];
    $item5_array=[" L 180 143"," L 200 136"," L 220 129"," L 240 122"," L 260 115"];

    for($i = 1; $i <= 5; $i++){
        $index = ${"score{$i}"}-1;
        ${"item{$i}"} = ${"item{$i}_array"}[$index];
    }
    $item1_replaceM=str_replace(" L", "M", $item1);

    $point_regex_patern = "/L (\d+.*\d*) (\d+.*\d*)/";
    for($i = 1; $i <= 5; $i++){
        preg_match($point_regex_patern,${"item{$i}"},${"item{$i}_point"});
        ${"item{$i}_pointX"} = ${"item{$i}_point"}[1];
        ${"item{$i}_pointY"} = ${"item{$i}_point"}[2];
    }
    $line_positions = $item1_replaceM.$item5.$item4.$item3.$item2.$item1;

    $point_color = '#ff9630'; // 座標の色
    $aria_color = '#f8c678';  // 塗り潰しの色

    $output = <<<EOF
    <div style="text-align:center;">
      <div class="radar-chart">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="320" height="291"  viewbox="0 0 320 291" role="img" aria-label="{$aria_label}">
            <g class="radar-chart-grid">
                <path fill="none" d="M 160 150 L 160 40" stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 150 L 260 115" stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 150 L 222.5 235" stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 150 L 97.5 235" stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 150 L 60 115" stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
            </g>
            <g class="radar-chart-grid">
                <path fill="none" d="M 160 150 L 160 150 L 160 150 L 160 150 L 160 150 L 160 150 L 160 150 L 160 150 L 160 150 L 160 150"
                      stroke="#dce5eb" stroke-width="1" zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 128 L 140 143 L 147.5 167  L 172.5 167 L 180 143 L 160 128" stroke="#dce5eb" stroke-width="1"
                      zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 106 L 120 136 L 135 184  L 185 184 L 200 136  L 160 106" stroke="#dce5eb" stroke-width="1" zIndex="1"
                      opacity="1"></path>
                <path fill="none" d="M 160 84  L 100 129 L 122.5 201  L 197.5 201 L 220 129  L 160 84" stroke="#dce5eb" stroke-width="1"
                      zIndex="1" opacity="1"></path>
                <path fill="none" d="M 160 62  L 80 122 L 110 218 L 210 218 L 240 122  L 160 62" stroke="#dce5eb" stroke-width="1" zIndex="1"
                      opacity="1"></path>
                <path fill="none" d="M 160 40  L 60 115 L 97.5 235  L 222.5 235 L 260 115 L 160 40" stroke="#dce5eb" stroke-width="1" zIndex="1"
                      opacity="1"></path>
            </g>
            <g class="radar-chart-aria">
                <g transform="translate(0,0) scale(1 1)">
                    <path fill="{$aria_color}" d="{$line_positions}" fill-opacity="0.3"></path>
                    <path fill="none" d="{$line_positions}" stroke="{$point_color}" stroke-width="1" zIndex="1" stroke-linejoin="round" stroke-linecap="round"></path>
                </g>
                <g class="radar-chart-point">
                    <circle cx="{$item1_pointX}" cy="{$item1_pointY}" r="3" fill="{$point_color}" />
                    <circle cx="{$item2_pointX}" cy="{$item2_pointY}" r="3" fill="{$point_color}" />
                    <circle cx="{$item3_pointX}" cy="{$item3_pointY}" r="3" fill="{$point_color}" />
                    <circle cx="{$item4_pointX}" cy="{$item4_pointY}" r="3" fill="{$point_color}" />
                    <circle cx="{$item5_pointX}" cy="{$item5_pointY}" r="3" fill="{$point_color}" />
                </g>
            </g>
        </svg>
        <ul class="radar-chart-dls">
            <li class="radar-chart-dl1">
                <dl>
                    <dt>{$title1}</dt>
                    <dd>{$score1}</dd>
                </dl>
            </li>
            <li class="radar-chart-dl2">
                <dl>
                    <dt>{$title2}</dt>
                    <dd>{$score2}</dd>
                </dl>
            </li>
            <li class="radar-chart-dl3">
                <dl>
                    <dt>{$title3}</dt>
                    <dd>{$score3}</dd>
                </dl>
            </li>
            <li class="radar-chart-dl4">
                <dl>
                    <dt>{$title4}</dt>
                    <dd>{$score4}</dd>
                </dl>
            </li>
            <li class="radar-chart-dl5">
                <dl>
                    <dt>{$title5}</dt>
                    <dd>{$score5}</dd>
                </dl>
            </li>
        </ul>
      </div>
    </div>
EOF;

    return $output;
}
add_shortcode('radar_chart', 'radar_chart');

上記コードをfunctions.phpにコピペします。

PHPファイルの編集の仕方について、詳しくは下記記事にまとめているのでぜひ参考にしてください（記事ではCSSの編集の仕方を取り扱っていますが、同じ要領でPHPファイルも編集することが可能です）。

これでショートコードでレーダーチャートを挿入できるようになったので、次は色の調整をしていきます。

$point_color = '#ff9630'; // 座標の色
$aria_color = '#f8c678';  // 塗り潰しの色

先程functions.phpに追加したコードの中に上のようなコメントのある箇所があるので、そこに自分の好みの色を指定してあげてください。

2. CSSを追加する

/*--------------------------------------
レーダーチャート
--------------------------------------*/

.radar-chart {
  margin: 0.9em auto 1.7em;
  display: inline-block;
  position: relative;
}

ul.radar-chart-dls {
  list-style: none;
  color: #777;
  font-size: 0.72em;
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.radar-chart-dls li {
  position: absolute;
  white-space: nowrap;
  padding: 0;
}

.radar-chart-dls dd {
  margin: 0 auto;
  font-size: 1em;
  line-height: 1.5;
}

.radar-chart-dls dt {
  line-height: 1;
}

.radar-chart-dl1 {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.radar-chart-dl2 {
  top: 70px;
  left: 5%;
}

.radar-chart-dl3 {
  top: 232px;
  left: 20%;
}

.radar-chart-dl4 {
  top: 232px;
  right: 20%;
}

.radar-chart-dl5 {
  top: 70px;
  right: 5%;
}

.radar-chart-aria {
  transform-origin: center;
}

/* 以下はアニメーションをつけたい場合*/
.radar-chart-animataion {
  animation: radar-chart-animataion 1s ease-out;
}

@keyframes radar-chart-animataion {
  0% {
    transform: scale(0);
  }
}

CSSの変更が反映されない場合は、下記記事をぜひ参考にしてください。

3. JavaScriptを追加する（任意）

こちらはレーダーチャートにアニメーションを付けたい場合です。

3-1. 空のjsファイルを作成

空のjsファイルを作成

空のjsファイルを作成します。名前は何でもいいですが、今回はとりあえずradar-chart-animataion.jsとしておきます。

3-2. コードを追加

document.addEventListener("DOMContentLoaded", function () {
  let radar_chart_aria = document.querySelectorAll(".radar-chart-aria");

  window.addEventListener("scroll", function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let windowHeight = window.innerHeight;

    if (radar_chart_aria) {
      for (let i = 0; i < radar_chart_aria.length; i++) {
        let rect = radar_chart_aria[i].getBoundingClientRect();
        let radar_chart_position = rect.top + scrollTop + 75; // ここの数値でスクロールするタイミングを調整可
        let radar_chart_diff = radar_chart_position - windowHeight;

        if (scrollTop > radar_chart_diff) {
          radar_chart_aria[i].classList.add("radar-chart-animataion");
        } else {
          radar_chart_aria[i].classList.remove("radar-chart-animataion");
        }
      }
    }
  });
});

上記コードを先程作成したradar-chart-animataion.jsに追記します。

3-3. jsファイルをアップロード

jsファイルをアップロード

radar-chart-animataion.jsをアップロードしてあげます。設置場所は自由ですが、おすすめは<子テーマ>/js下になります。

3-4. functions.phpに追記する

wp_enqueue_script( 'radar-chart-js', get_stylesheet_directory_uri() . '<ファイルのパス>/radar-chart-animataion.js', array(), '', true );

上記コードを、先ほどfunctions.phpに追記した関数内に追記してあげます。

ファイルのパスを指定することを忘れずに。このファイルへの記述を間違えてしまうとサイトが真っ白になってしまうのでご注意ください。

以上でカスタマイズは完了です 🎉

ちなみにjsは子テーマのscript.jsに書いてもいいのですが、その場合だとレーダーチャートを埋め込んでいない記事や記事以外のページでもそのスクリプトを読み込んでしまいリソースの無駄になってしまいます。また、こういった風にレーダーチャート専用のjsファイルに書いていった方がその後の管理がしやすいです。

なのでこのように個別にファイルを用意する方法の方が当サイト的にはおすすめになります。（そこまで速度などにこだわらない方はscript.jsに書いても大丈夫です）

記事への挿入方法

[radar_chart title1="項目1" score1=1 title2="項目2" score2=1 title3="項目3" score3=1 title4="項目4" score4=1 title5="項目5" score5=1 aria_label="レーダーチャート"]

使い方としては上記のショートコードを記事内に挿入するだけです。

それぞれのパラーメーターの意味と指定する値については以下の通り。

パラメーター	概要
title（1〜5）	項目のタイトル
score（1〜5）	項目の得点。1〜5まで指定可（※整数のみ）
aria_label	レーダーチャートの説明

aria_labelはそのチャートが何を表しているかを指定してください。imgタグでいうところのaltのようなものと思ってもらえればOKです。

参考：aria-label - Accessibility | MDN

チャートをより簡単に作れるツール作りました

今回ご紹介したのは五角形のレーダーチャートのみでしたが、より多様なチャートを生成できるよう、専用のツールを作りました。

【コピペで完成】HTML・CSSのみで作るおしゃれなレーダーチャートのテンプレート4選

WordPressのショートコード専用というよりかはプレーンなHTML・CSSを生成するサービスではありますが、ぜひ利用してみてください。