Cakephp3のコントローラからsetメソッドでviewに渡した変数をChart.jsで使いたい

Question

cakephp3のコントローラからsetメソッドで変数chart_data1にデータをセットして
View側のChart.jsのdataプロパティに変数chart_data1を渡してグラフを表示したいのですが、思うように実装できません。
実装の仕方を教えて頂けますでしょうか。

class Frmsv0170Controller extends FrmBaseController
 public function index($id_page = ""){
  略
  $this->set('chart_data1',[12, 19, 3, 17, 6, 3, 7]);
　略
 }

      <canvas id="myChart"></canvas>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
      <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
            datasets: [{
              label: 'apples',
              data: $chart_data1, ←ここでコントローラからの変数を受け取りたい
              // data: [12, 19, 3, 17, 6, 3, 7],
              backgroundColor: "rgba(153,255,51,0.4)"
            }, {
              label: 'oranges',
              data: [2, 29, 5, 5, 2, 3, 10],
              backgroundColor: "rgba(255,153,0,0.4)"
            }]
          }
        });
      </script>

Answer 1

PHP はサーバ側で動いて最終的に HTML として、変数の中身を吐きます。
一方 JavaScript はクライアント側で動くため、PHP から直接はデータを受け取れません。
※PHP が <script> タグの中身まで含めて出力しているならあらかじめ埋め込むことはできますが

受け取る方法としては

1. セッションに記録しておいて、JavaScript でセッションから読み取って使用する
2. HTML 内に hidden の input を設けて、そこにデータを突っ込んでおいて、JavaScript ではそこから取り出す

などがあります。
※両者がともにアクセスできるのは HTML かクッキーかセッションなので、それらを仲介役にしないとデータがやりとりできない

2 をする場合、データ内に ' や " や印字不可の文字があったりすると HTML を崩してしまいます。
例えばでかくて複雑な構造を持つデータならば、PHP 側で JSON オブジェクトにして、それをシリアライズ→Base64エンコードして書き込み、JavaSCript は逆手順で展開して JSON オブジェクトを手に入れる、というのもありでしょう。

Comments

[susumu_0414]

丁寧な回答ありがとうございます！
HTML内に情報を入れるか、セッションかクッキー経由でないとデータを共有することができないとのことで大変勉強になりました。
しかし、ダメもとで上記のnojimageさんの回答のようにjson_encodeと書いてやると変数を使用できました。。。
なぜこれで受け取れたのか謎です。

[tacsheaven]

回答にあるように「PHP が <script> タグの中身まで含めて出力している」ので、script タグ内の JavaScript ソースコードに直接変数の値を書き込めているからです。

JavaScript が別ファイルになっているような状況では使えません。

[susumu_0414]

なるほど！わかりました。
ありがとうございます。

Answer 2

JavaScriptがテンプレート中に書かれている前提であれば、PHP → JavaScriptへのデータの変換は json_encode を利用するのが簡単です。

   label: 'apples',
   data: <?= json_encode($chart_data1) ?>,
   backgroundColor: "rgba(153,255,51,0.4)"

Comments

[susumu_0414]

回答ありがとうございます。
試しにjson_encodeを入れると変数が使用できました！
でもなぜこれでJavascriptに変数を渡せるのか謎です。。。
少し勉強します。
予想はcakephp3ではviewを呼び出すときに変数の中身を展開してhtml内に配列の情報を持たせていると予想しています。。。
ありがとうございます。