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

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

ただいまの
回答率

89.12%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 832

katmax

score 10

前提・実現したいこと

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の処理を通っていない、というかと思っております。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • キャンセル

  • katmax

    2018/12/11 21:01

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

    キャンセル

  • kei344

    2018/12/11 21:06

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

    キャンセル

回答 1

+3

<?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に引き上げて見てはどうでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/11 20:38

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

    キャンセル

  • 2018/12/11 20:46

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

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる