Chart.jsとカスタムフィールドでWordPressにレーダーチャートを表示させたい

前提・実現したいこと

Chart.jsを使用して、WordPressのプラグインACF(Advanced Custom Fields)から数値を取得してレーダーチャートを表示させたいです。
ACFは無料版で、フィールドタイプはGroupに設定。
サブフィールドは6つ作成し、0~5で評価できる六角形のレーダーチャートにします。
このグラフ自体のタイトルは表示させませんが、各項目の名前(サブフィールドのラベル)はそれぞれの頂点部分に表示させたいです。

チャートの下には星の数で評価内容を表示したいです。
例「①評価１
★★★☆☆(3)
②評価２
★★★☆☆(3)
・・・」
現在、cssの:beforeを使って、星のみ表示させるようにコードを書いています。

また、チャートの大きさの調整もしたいのですが、やり方も調べても出てこず、できていません。
widthだとその半分の大きさで中央に表示されます。
目盛や数字、点の大きさも調節できるのでしょうか。

ACFの設定
<フィールド>
フィールドラベル：チャート
フィールド名：chart
フィールドタイプ：Group
<サブフィールド>
フィールドラベル：評価1,評価2,評価3,評価4,評価5,評価6
フィールド名：chart1,chart2,chart3,chart4,chart5,chart6
フィールドタイプ：数値
最小値：0
最大値：5
ステップサイズ：1

発生している問題・エラーメッセージ

レーダーチャートの0の部分に点が打たれて、ラベルとデータが反映されません。
データを取得して配列に入れる部分、もしくは取り出す部分がどこかで間違っていると思います。

↑サイズ調整もできていないです。

(3, 3, 3, 3, 3, 3
Notice: Trying to access array offset on value of type null in (ファイルの場所)/single-product.php on line 73 )

3,3,3,3,3,3というのはサブフィールドで入力した5点満点の数字がちゃんと入っています。
６項目分、行数の部分のみ変わって繰り返し表示されます。
チャート下の、星の数を表示させる部分のエラーです。

また時々、処理が重いのかグラフ自体が表示されなくなります。
リロードした時や、コードを書いたり調べたりしてしばらく放置していると起こります。
（目盛すら表示されなくなり、検証ツールで見ても何も無くなっています。　）
再び何度かリロードすると戻ります。
こちらは後回しにしています。

該当のソースコード

header、footer、表示する記事(single-product.php)、theme_style.cssの、四つを編集しました。
header、footerはchart表示用に別に作ったので「-3」がファイル名についています。

↓header-3.php

php
1<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" async></script>

↓footer-3.php

<?php wp_footer(); ?>以降

php
1<!-- レーダーチャート -->
2<!-- レーダーチャートデータ取得 -->
3<?php
4  $chartLabels = array();
5  $chartPoints = array();
6  // 繰り返しフィールドではないので削除
7  // while(the_repeater_field('chart')) {
8    // array_push($chartLabels, get_sub_field('label'));
9    // array_push($chartPoints, get_sub_field('point'));
10  //}
11
12  $fields = get_fields();
13  // カスタムフィールドをそれぞれ$keyと$valueに順に代入している？
14  foreach($fields as $key => $value){
15    if($value){
16      //フィールドのラベルやタイプを取得している？
17      $data = get_field_object($key);
18      //$label = $data['label'];
19      $type = $data['type'];
20      //「グループだったら」の処理
21      if($type == 'group'){
22        // サブフィールドのラベルと値を取得？
23        foreach($value as $child_key => $child_value){
24          $child_data = get_field_object($child_key);
25          //$child_label = $child_data['label'];
26          array_push($chartLabels, get_field_object($child_key,'name'));
27          array_push($chartPoints, $child_data);
28        }
29      }
30    }
31  }
32  //jsonデータに置き換え
33  $jsonLabelArray = json_encode($chartLabels);
34  $jsonPointArray = json_encode($chartPoints);
35  ?>
36  <!-- レーダーチャート表示 -->
37  <script>
38    var $labelArray = <?php echo $jsonLabelArray; ?>;
39    var $pointArray = <?php echo $jsonPointArray; ?>;
40    var radarChart = document.getElementById("radarChart").getContext('2d');
41    var chart = new Chart(radarChart, {
42      type: 'radar',
43      data: {
44        labels: $labelArray,
45        datasets: [{
46          data: $pointArray,
47          backgroundColor: 'RGBA(255,191,143,0.5)',
48          borderColor: 'RGBA(234,156,97, 1)',
49          borderWidth: 1,
50          pointBackgroundColor: 'RGB(234,156,97)'
51        }]
52      },
53      options: {
54        legend: {
55          display: false,
56        },
57        scale:{
58          ticks:{
59            suggestedMin: 0,
60            suggestedMax: 5,
61            stepSize: 1,
62            callback: function(value, index, values){
63              return value
64            }
65          }
66        }
67      },
68    });
69  </script>

↓single-product.php

php
1<div class="article-evaluation">
2  <canvas id="radarChart"></canvas>
3  <?php if( get_field('chart') ): ?>
4<!-- ↓この下六行がエラーメッセージの73行目~78行目 -->
5    <p class="star star<?php the_field('chart')['chart1']; ?>">(<?php the_field('chart')['chart1']; ?>)</p>
6    <p class="star star<?php the_field('chart')['chart2']; ?>">(<?php the_field('chart')['chart2']; ?>)</p>
7    <p class="star star<?php the_field('chart')['chart3']; ?>">(<?php the_field('chart')['chart3']; ?>)</p>
8    <p class="star star<?php the_field('chart')['chart4']; ?>">(<?php the_field('chart')['chart4']; ?>)</p>
9    <p class="star star<?php the_field('chart')['chart5']; ?>">(<?php the_field('chart')['chart5']; ?>)</p>
10    <p class="star star<?php the_field('chart')['chart6']; ?>">(<?php the_field('chart')['chart6']; ?>)</p>
11  <?php endif; ?>
12</div>

↓theme_style.css

css
1.star:before {color:#60554C;}
2.star5:before {content:'★★★★★';}
3.star4:before {content:'★★★★☆';}
4.star3:before {content:'★★★☆☆';}
5.star2:before {content:'★★☆☆☆';}
6.star1:before {content:'★☆☆☆☆';}
7.star0:before {content:'☆☆☆☆☆';}

試したこと

【WordPress】Advanced Custom Fields PROで入力したデータをChart.jsのグラフに使用して、ショートコード化したついでにクイックタグ化する
→初めにこちらのサイトからコードをコピペして使いました。PRO版ではないので繰り返しフィールドを使えず、コードを書き換えてみたところが間違っているのかもしれません。

Advance Custom fields(ACF)の出力方法まとめ【個別・一括】
→次に、こちらのサイトも見てコピペして、追加したり削除したりしました。

下記のようにデータを直接、Javascriptでのグラフを表示する処理部分に入力するとラベルも数値も反映されます。
各評価のラベルは今の所記事ごとに変える予定がないので、この方法を使えばうまくいきそうです。

footer
1data: {
2  labels: ["評価1","評価2","評価3","評価4","評価5","評価6"],//$labelArray
3  datasets: [{
4    data: [3,3,3,3,3,3],//$pointArray
5    backgroundColor: 'RGBA(255,191,143,0.5)',
6    borderColor: 'RGBA(234,156,97, 1)',
7    borderWidth: 1,
8    pointBackgroundColor: 'RGB(234,156,97)'
9  }]
10},

見たサイト
Radar | Chart.js
ACF | get_field_object()
Advanced Custom Fieldsの関数の全部の使い方を調べてみた

補足情報（FW/ツールのバージョンなど）

WordPress5.7.1
php7.4(モジュール版)

行動規範の内容に同意します

回答1件

Advanced Custom Fieldsからデータを取り出す部分がうまくないようです。
取り出したいデータがわかっているので、それに合わせてコードを書いてみました。

$chartLabels = array();
$chartPoints = array();

$fields = get_fields();

  foreach( $fields as $key => $value ){
    if( $value ){
      $data = get_field_object( $key );

      $type = $data['type'];
      $subfields = $data['sub_fields'];

      if( $type == 'group' ){
        foreach( $subfields as $subfield => $label ){
          array_push( $chartLabels, $label['label'] );
        }
        foreach( $value as $child_key => $child_value ){
          array_push( $chartPoints, $child_value );
        }
      }
    }
  }

  $jsonLabelArray = json_encode( $chartLabels, JSON_UNESCAPED_UNICODE );
  $jsonPointArray = json_encode( $chartPoints );

single-product.phpの部分もうまく取り出せていないようです。
先述のコードを利用して、

<div class="article-evaluation">
  <canvas id="radarChart"></canvas>
	<?php
if( get_fields() ){
  $fields = get_fields();
  foreach( $fields as $key => $value ){
    foreach( $value as $child_key => $child_value ){
      echo '<p class="star star'.$child_value.'">('.$child_value.')</p>';
    }
  }
}
  ?>
</div>

＞サイズ調整もできていない
どう調整されているかわからないので…。
以下のページが参考になるのではないでしょうか。
chart.jsの(レーダーチャート)ラベルのフォントサイズ変更がしたい
 https://teratail.com/questions/129607

参考まで。

投稿2021/06/30 07:42