質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

1回答

3001閲覧

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

cherry_414

総合スコア0

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2021/06/23 03:00

編集2022/01/12 10:55

前提・実現したいこと

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

チャートの下には星の数で評価内容を表示したいです。
例「①評価1
★★★☆☆(3)
②評価2
★★★☆☆(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点満点の数字がちゃんと入っています。
6項目分、行数の部分のみ変わって繰り返し表示されます。
チャート下の、星の数を表示させる部分のエラーです。

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

該当のソースコード

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(モジュール版)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問