プラグインなしでレーダーチャートの作り方

HP

4
MP

4
STR

5
ATK

5
AGI

5

STEP

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にコピペします。

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

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

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

STEP

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」に記載します。

STEP

JavaScriptを追加する（任意）

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

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

コードを追加

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に追記します。

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

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

functions.phpに追記する

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

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

wp_enqueue_script( 'radar-chart-js', get_stylesheet_directory_uri() . '<wp-content/themes/swellradar-chart-animataion.js', array(), '', true );

これがこのサイトに入れたコードです。

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

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

STEP

記事への挿入方法

[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	レーダーチャートの説明