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

2022年2月23日2023年1月3日

くるみ

プラグインとかは使わずに、レーダーチャートを記事内に挿入したいな

というわけで本記事では

WordPressの記事内でレーダーチャートを使用したい
でもプラグインとかはできるだけ使いたくない
コピペでできて、何回も使いまわせるようにしたい

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

コピペでできる＆ショートコードとして実装するので、今日から誰でも簡単にかつ手軽にショートコードを使えるようになりますよ。

お品書き

レーダーチャートの完成イメージ
レーダーチャートの挿入方法
WordPressでおしゃれなレーダーチャートを作成する方法
CSSの変更が反映されない場合の対処法
- キャッシュ系プラグインを疑う
- プラウザのキャッシュを削除
レーダーチャートを簡単に作成できるツールを作りました
まとめ

レーダーチャートの完成イメージ

項目1
4
項目2
3
項目3
4
項目4
5
項目5
4

本カスタマイズを参考にすれば、上のように自由に各パラメーターを指定しながらレーダーチャートを挿入することができるようになります。

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

サイトのレベルが1段階上がりそう！

くるみ

加えて、スクロールと同時に塗りつぶした部分を拡大させるアニメーションを付けることも可能です。(上のレーダーチャートで確認してみてください)

注意

本カスタマイズで使えるようになるのは五角形のレーダーチャートのみになります。（もし要望などあれば三角形のものなども作成するかも…？）

レーダーチャートの挿入方法

[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で指定するのはそのSVGの代替テキストになります。imgタグでいうところのaltのようなものと思ってもらえればOKです。
参考 ARIA:imgロールMDN ショートコードであれば一度コピペさえしてしまえばその後も簡単に記事内に挿入することができます。

プラグインやライブラリを使っているわけでもないので、速度にこだわる人や「できるだけプラグインは増やしたくない」という人にもおすすめですよ。

WordPressでおしゃれなレーダーチャートを作成する方法

カスタマイズ手順は以下の通り。

手順

step1

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

step2

CSSを追加する

step3

JavaScriptを追加する(任意)

step3に関してはアニメーションを付けたい方のみが対象で、基本的にstep2まで終えればレーダーチャートは挿入可能になります。

バックアップは忘れずにしておこう

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

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

step1：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');

コメント無しのコードはこちら

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_pattern = "/L (\d+.*\d*) (\d+.*\d*)/";
    for($i = 1; $i <= 5; $i++){
        preg_match($point_regex_pattern,${"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にコピペします。

「テーマエディター」を使って追加
FTPソフトを使って追加

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSを編集する方法を徹底解説これでショートコードでレーダーチャートを挿入できるようになったので、次は色の調整をしていきます。

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

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

色の調整が完了したら、次はCSSで見た目を整えていきます。

step2：CSSを追加する

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

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

ul.radar-chart-dls {
    list-style: none;
    color: #777;
    font-size: .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);
    }
}

コメント無しのコードはこちら

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

ul.radar-chart-dls {
    list-style: none;
    color: #777;
    font-size: .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を以下のどれかの方法でコピペします。

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

step3：JavaScriptを追加する(任意)

こちらはレーダーチャートにアニメーションを付けたい方が対象になります。

step1

空のjsファイルを作成

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

step2

JavaScirptを追加

先程作成したファイルに以下の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");
                }
            }
        }
    });
});

step3

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

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

step4

functions.phpに追記する

以下のコードを、step1で追記した関数内に追記してあげます。ファイルのパスを指定することを忘れずに。

このファイルへの記述を間違えてしまうとサイトが真っ白になってしまうのでご注意ください。

wp_enqueue_script( 'radar-chart-js',get_stylesheet_directory_uri() . '{ファイルの設置場所}/radar-chart-animataion.js', array(), '', true );

具体的な追加箇所はこちら

/**************************
 * レーダーチャート
 ***************************/
function radar_chart($atts)
{
    (省略)
EOF;
    //returnの前に追加
    wp_enqueue_script( 'radar-chart-js',get_stylesheet_directory_uri() . '{ファイルの設置場所}/radar-chart-animataion.js', array(), '', true );

    return $output;
}

これで先程アップロードしたjsファイルを読み込むことができました。

これで今回のカスタマイズは終了です。ぜひレーダーチャートを使い倒しちゃってください。

お疲れ様！

くるみ

ちなみにjsは子テーマのscript.jsに書いてもいいのですが、その場合だとレーダーチャートを埋め込んでいない記事や記事以外のページでもそのスクリプトを読み込んでしまいリソースの無駄になってしまいます。

加えて、こういった風にレーダーチャート専用のjsファイルに書いていった方がその後の管理がしやすいですからね。

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

CSSの変更が反映されない場合の対処法

「CSSを追記して保存したにも関わらず反映されない…」となった場合は、以下が原因であることが多いです。

キャッシュ系プラグイン
プラウザキャッシュ

キャッシュ系プラグインを疑う

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows	［Shift］＋［Ctrl］＋［Delete］キー
Mac	［shift］＋［command］＋［delete」キー

レーダーチャートを簡単に作成できるツールを作りました

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

WordPressのショートコード専用というよりかはプレーンなHTML・CSSを生成するサービスではありますが、ぜひ参考にしてみてください。
参考 HTML・CSSで作るレーダーチャートのテンプレート4選Pote Stock

まとめ

以上、WordPressでおしゃれなレーダーチャートを作成する方法でした。

レーダーチャートを有効活用して他のサイトとの差別化を図ってみてはいかがでしょうか。

参考になれば幸いです。

13 COMMENTS

K 2022年1月7日

お世話になっております。いつも素敵な記事ありがとうございます。
質問なのですが、アニメーションのJavaScirptの10行目の else {の部分がエラー出てしまっています…

私が間違っていたら申し訳ございません…

関数内のSANGOの子テーマにJSフォルダを作って、jsファイル「radar-chart-animataion.js」を作っていれてみたのですが、記述は、↓であっているでしょうか？

wp_enqueue_script( ‘radar-chart-js’,get_stylesheet_directory_uri() . ‘/js/radar-chart-animataion.js’, array(), ”, true );

お時間あるときにでも、回答していただけたら、幸いです。

返信する

おはようポテト 2022年1月7日

Kさん

>アニメーションのJavaScirptのエラー

大変失礼しました…
こちら修正しましたのでご確認よろしくお願いします🙇‍♂️

加えて、jsファイルのパスの件については記述いただいた通りで問題ありません。
よろしくお願いします。

返信する

K 2022年1月7日

お世話になります。やっぱり間違ってましたか…笑
何回やってもエラー出て、JavaScirptは無知なもので…沼にハマってました…

ご対応ありがとうございました。また、SANGOの画像の吹き出しとかのカスタマイズの記事楽しみにしております＾＾

返信する

I 2022年1月30日

こんにちは！とても素敵なチャートの作り方の記事ありがとうございます。
項目１、項目２などが、グラフとは全然違うところに表示されてしまうのですが、なぜなのでしょうか。
全く、プログラミングの知識がない初心者なので困ってます。
お時間ありますときに教えていただけたら幸いです。。。

返信する

おはようポテト 2022年2月3日

Iさん

返信が遅くなり申し訳ありません。

記事内CSSの中にある下記CSSは記述されていますでしょうか…？
———–
.radar-chart-dls li {
position: absolute;
white-space: nowrap;
padding: 0;
}
———–

しっかりと記述されているにも関わらず項目の表示がおかしい場合は、お手数ですが再度ご連絡ください🙇‍♂️

返信する

ぽんすけ 2022年3月1日

こんにちは、本当に素敵なJINカスタマイズをありがとうございます。
わたしもIさん同様にレーダーチャートの下に項目が縦一列に並んでしまいます。
わたしはブロックエディタのショートコードブロックとクラシックブロック、クラシックエディタで試して見ましたがいずれも、同じになりました。
ちなみに上記のCSS記述を試しに消しても同じチャートができました。
大変お手数をおかけいたしますがよろしくお願いいたします。

返信する

ゆめ 2022年3月20日

レーダーチャートを作成するために本記事を参考にさせていただきました。
JINにて実装を試みましたが、HTMLを貼ってプレビュー確認すると、項目がグラフ横に並ばず、下の方に行ってしまいます。

キャッシュの問題はなさそうで、コードも再度はり直しましたがダメでした。JINにも対応できそうな感じですが、このような問題は解決できますでしょうか？

お忙しいところ恐縮ですが、よろしくお願いします。

返信する

レンジウ 2022年3月22日

ゆめさん、こんばんは。部外から失礼いたします。

私もJINにて実装を試みておりましたが、同じように下にいきました。
検証ツールで確認したところ、CSSのposition:absolute;とpadding:0;が消されています。
（JINのどこかに優先順位が高いCSSが設定されており、そちらで上書きされているのかもしれません）

少し力技になりますが、追加CSSのposition:absolute;とpadding:0;に「!important」をつけることで解消されました。（強制的に優先順位を上げるコードになります）

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

根本的解決ではなく恐縮なのですが、少しでもご参考になれば幸いです。

返信する

ロガシ 2022年4月5日

こんにちは、レーダーチャートを作成するために、こちらの記事を参考にさせていただきました。
おかげで、レーダーチャートを導入することができました。
ありがとうございます！
ところで、質問なのですが項目は一つ足すのはどうすればいいのでしょうか？
初歩的な質問かもしれませんが、よろしくお願いします。

返信する

匿名 2022年5月3日

アニメーションつける際に空のjsファイル作成とありましたがどうやって作るのでしょうか？
デスクトップ上で新規作成を押しても出てこなくて、自分で調べてもわからなくてアニメーションつけれません。

返信する

あいか 2022年7月6日

こんにちは。有用な情報有難うございます。
以下のような現象が確認されました。
これは使っているWPテーマの問題なのでしょうか…。キャッシュプラグインなどは入れていません。テーマはSWELLです。
例：レーダーチャートの値を全て5と仮定。
スクロールする
↓
スクロールの途中（レーダーチャートの上半分くらいが表示）で既にレーダーチャートの値5が表示される。この時のアニメーション効果は無し。
↓
さらにスクロールする
↓
ちらつきと同時に値が0になり、レーダーチャート全体が表示されたところで、値5までアニメーション効果と共に表示される。

返信する

ずーまー 2022年9月20日

とても有用な情報を無料で教えていただき本当に感謝の一言です。早速導入させていただきました。現在は5項目のみ表示できますが、これを8項目まで増やすにはどうすればよいのでしょうか…？厚かましくもご質問させていただきました。

返信する

ななお 2022年11月2日

はじめまして。
ブログを始めるあたり、レーダーチャートを使用したいと検索していたらこちらにたどり着きました。
他の方も質問されていますが、私も6項目のレーダーチャートを使いたいため、項目を増やす方法があればご教授いただきたくコメントをさせていただきました。

お時間がありましたらご回答よろしくお願い致します。

返信する