php→javascriptに変数を挿入する方法を教えてください...【chart.jsでレーダーグラフ】

Question

前提・実現したいこと

chart.jsでレーダーグラフを実装しています。
下記のデータをphp（wordpress）で取得し、

<?php the_field('data1'); ?>
<?php the_field('data2'); ?>
<?php the_field('data3'); ?>
<?php the_field('data4'); ?>
<?php the_field('data5'); ?>
<?php the_field('data6'); ?>
<?php the_field('data7'); ?>
<?php the_field('data8'); ?>

下記の「ここにdata*いれたい」に変数として入れたく思っております。

<canvas id="Chart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("Chart");

var myChart = new Chart(ctx, {
  type: 'radar',									  
  data: {
    labels: ["a", "b", "c", "d", "e", "f", "g", "h"],
    datasets: [{
      label: '見出し',
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      data: [ ここにdata1をいれたい ,ここにdata2をいれたい , ここにdata2をいれたい, ここにdata3をいれたい, ここにdata4をいれたい, ここにdata5をいれたい, ここにdata6をいれたい, ここにdata7をいれたい, ここにdata8をいれたい],
    }],									  
  },/*data*/
  options: {
	    scale: {
	        ticks: {
	            beginAtZero: true,
	            max: 30,
	            min: 0,
	            
	        }
	    }	 
	},/*option*/
});
																		
</script>

ただ、下記のような記載だと、グラフにうまく表示されません。

data: [ <?php the_field('data1'); ?> ,<?php the_field('data2'); ?> , <?php the_field('data3'); ?>, <?php the_field('data4'); ?>, <?php the_field('data5'); ?>, <?php the_field('data6'); ?>, <?php the_field('data7'); ?>, <?php the_field('data1'); ?>,

数値自体は、ソースとして表示はされるが、chart.js等のライブラリ処理を噛ませていないからなのか、
記述の仕方がいけないのか、エンジニアリングとして大変初歩的にはなるかと思いますが、変数の代入の仕方をアドバイスいただければ幸いです。
質問が稚拙で大変恐縮でございます。

よろしくお願い申し上げます。

追記

STEP1 このように<?php〜〜>タグを挿入すると、値は帰ってきており（<?php the_field('データ1'); ?>というコードに対して70という数字が帰ってきている）

STEP2下記のようにソース（ブラウザでソースを表示をしているスクショ）には値が表示される

STEP3しかしグラフには値が反映、表示されていない

=要は、javascriptの変数としていれたphpの値が、javascriptの処理を通っていない、というかと思っております。

Comments

[kei344]

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[katmax]

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js

[katmax]

ご回答誠にありがとうございます、こちらのライブラリでございます

[katmax]

https://misc.0o0o.org/chartjs-doc-ja/charts/radar.html

[katmax]

上記ライブラリ内の、レーダーチャートを使っております。

[kei344]

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。質問本文は編集することが可能なので、その依頼をしています。

Answer 1

<?php the_field('data1'); ?>

これはなんですか？

PHPはHTMLモードとPHPスクリプト実行モードを切り替えながらプログラミングして、効率良くHTMLを作るのが最も得意な言語です。
(PHPにモードという正式な用語はなくて単なる造語ですがそんなもんだと考えて下さい)
PHP タグ - 公式マニュアル

<?php ?>の部分はPHPの構文を解析を実行を明示する為のタグです。
つまり、the_field('data1');の部分を愚直に実行しようとするだけ。
このthe_fieldは関数だと思いますが、echo $foo;みたいな文字列を出力する命令はありますか？
もし無ければ何も表示されません。

もしthe_field関数の中身がreturn $foo;みたいに何かしらの値を返す関数であれば、
<?php ?>ではなく、<?= the_field('data1') ?>を利用してみてください。
これは<?php echo the_field('data1'); ?>の短縮ですので値をHTML文字列としてその場に出力してくれるはずです。

---

【追記部分への回答】
PHPからHTMLファイルへの出力は上手くいっており、ついでに画像ですね。
グラフが描画されない理由に関してですが、

スクショの下部分、options→scale→ticks→maxの値が30で、dataの各要素が20とか30とかなのに、突如70が出現して描画できなくなってるだけなのでは？
いや、chart.jsの事は全然分からないのでヤマ勘ですが、一度Maxの値を30から70に引き上げて見てはどうでしょうか？

Comments

[m.ts10806]

WordPressらしいのでそちらの仕様要確認ですね。

[katmax]

みなさまご回答誠にありがとうございます。追記いたしましたので、改めてご教示いただければ幸いです。
レベルの低い質問で大変恐縮でございます。。