PHP→smarty→外部jsでグラフ(chart.js)の表示方法

Question

Web開発初心者です。
PHPでデータを取得(配列)し、そのデータをもとにchart.jsでグラフ表示したいのですが、
PHPからsmartyへ配列は普通に渡せますが、smartyからJavaScript(外部ファイル)へ
どのように配列を渡せばよいのかがわかりません。
JavaScript外部ファイルはHTMLのheadで読み込んでいます。

初心者ですので具体的なソースコードを載せてもらえると助かります。
よろしくお願いします。

ご指摘がありましたので、こちらで試したサンプルソースを載せてみます。
下記のコードでは一度HTMLファイルにsmartyの配列をもとに
テーブル(表)を作成し、その表をjavascriptでもう一度読み込んで配列を作成し、
chart.jsのデータに設定しています。
しかし、コードが非常に長くなることと表からもう一度読み込むという部分が
回りくどく感じるため、直接配列をchart.jsのデータに設定したいのです。

window.onload =  function() {
  //項目用の配列を定義
  var array01 = []; //売上年
  var array02 = []; //売上数量
  var array03 = []; //売上合計
  var array04 = []; //粗利合計
  var array05 = []; //粗利率
  //テーブルから値取得(売上年)
  $('#tbl_result td.s_year').each(function(){
    var amount01 = $(this).find('span').text();
    array01.push(amount01);
  });
  //テーブルから値取得(売上数量)
  $('#tbl_result td.sum_suryo').each(function(){
    var amount02 = $(this).find('span').text();
    array02.push(amount02);
  });
  //テーブルから値取得(売上合計)
  $('#tbl_result td.sum_kingaku').each(function(){
    var amount03 = $(this).find('span').text();
    array03.push(amount03);
  });
//テーブルから値取得(粗利合計)
  $('#tbl_result td.sum_arari').each(function(){
    var amount04 = $(this).find('span').text();
    array04.push(amount04);
  });
//テーブルから値取得(粗利率)
  $('#tbl_result td.araritu').each(function(){
    var amount05 = $(this).find('span').text();
    array05.push(amount05);
  });

  var complexChartOption = {
    responsive: false,
    scales: {
      yAxes: [
        {
          id: "y-axis-1",   // Y軸のID
          type: "linear",   // linear固定
          position: "left", // どちら側に表示される軸か？
          scaleLabel : {
            display: true,
            labelString: '売上金額(円)',
          },
          gridLines:{
            display : true,
          },
          ticks: {
            callback: function(label, index, labels) {
              return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
            },
          },
        },
        {
          id: "y-axis-2",
          type: "linear",
          position: "right",
          scaleLabel : {
            display: true,
            labelString: '粗利率(%)',
            fontColor :"#e61f4b",
          },
          gridLines:{
            display : false,
          },
          ticks: {
            callback: function(label, index, labels) {
              return label +' %';
            },
          },
        },
      ],
    }
  };

  var ctx = document.getElementById('graph').getContext('2d');

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: array01,
      datasets: [
        {
          label: '売上合計金額',
          data: array03,
          backgroundColor: "rgba(153,255,51,0.4)",
          yAxisID: "y-axis-1",
        },
        {
          type: 'line',
          label: '粗利率',
          data: array05,
          backgroundColor: "rgba(255, 0, 0, 0.51)",
          borderColor : "#ff0000",
          borderWidth : "1",
          pointBackgroundColor : "#ff0000",
          yAxisID: "y-axis-2",
          lineTension: 0,
          fill: false,
        },
      ]
    },
    options: complexChartOption,
  });
};

Comments

[m.ts10806]

この質問内容で具体的なコードなどは無理です。どのようなデータを渡すかによります。自身の試したコードや具体的なデータを提示してください。またサーバーサイドとクライアントサイドの関係性をきちんと理解しないことには今後の理解や成長が見込めませんし解決に時間ばかりかかるのでこの際きちんと理解するようにしてください

[m.ts10806]

PHPで作った配列を外部JSで、と概念は全く同じなのでSmarty独自の問題はありません。Smartyも裏ではガリガリPHPで置換走ってるPHPそのものですしね

[m.ts10806]

「外部jsでなければできる」のであれば外部jsでもできますので、その観点からも考えてみてください

Answer 1

具体的なデータが提示されないのでひとつの考え方として参考にしてもらいたいのですが、

Smartyのいいところってロジックとか処理系統と画面表示部分を分離できる部分だと思うんですね。
そこであまり処理っぽいところが入ってくるとメリットを潰してしまってることにもなりますし「データをどう表示させよう」と考えるのは冗長にも思います。

そこでajaxを使うのはいかがでしょうか。
「phpからどうやってデータを渡すか」ではなく、「JavaScriptから必要なデータをphpに取りに行く」という考え方です。
php側はデータの配列をjson_encodeして返すだけ、JavaScript側はjsonオブジェクトを表示用(chart用)に整形するだけ、
と役割分担ができます。
Smarty関係なく、外部js、直js関係なくできますしね。

ご参考まで。

Comments

[ms5025]

0
＞JavaScript側はjsonオブジェクトを表示用(chart用)に整形するだけ

個人的にはここもsmartyでtpl化して、
ajaxで形成されたviewをhtml形式を受けとり、
jsでは指定の場所にそのhtmlごと埋め込むほうがスマートかなと思います。

私もjsで形成は可読性も悪くなるかなと思います。

ごめんなさい、コメントに書くつもりが回答になってしまいました。。

[m.ts10806]

質問者さんが何をどうやりたいのか今一つ分からない内容ですが、chartのdata部分をphpで作るのであればview不要じゃないです？
viewにはchart置く箱だけ用意することになるので。
dataの形式次第ですが、ajaxで取ってきたデータそのままセットするだけにもできるのでそんなに冗長にはならないようにも思います

[susumu_0414]

大変勉強になります。まだajaxに手を付けていませんので、
話についていけてないのが残念です。(なんとなく伝わってますが)
まず、ajaxを勉強してみます。
どこかよいサイトとかありますか。いつも聞いてばかりですいません。

[m.ts10806]

まずはhello worldから
なのでphp ajax で検索して記事を試してください。
書き方にもトレンドがいちおうあるのでなるべく新しい日付の記事の方が好ましいですが、こうじゃなきゃできないというのはなくて、リクエストとレスポンスの考え方は同じなのでQiitaなどで評価数の多い記事を試していくといいです

[ms5025]

すいませんchart.jsというのはグラフ作成ライブラリなんですね。
そのようなものがあるとは知りませんでした。
js側でガリガリ描画するおつもりかと思いまして。
それならviewで形成したほうが可読性もいいよと思ったわけですが、
そのようなライブラリがあるならAjaxでdataで受け取り、
chart.jsで形成がいいと思います。

[m.ts10806]

ms5025さん
はい。結構知られたライブラリですが、確かにこの質問内容だとライブラリ利用がこのライブラリを知らない人には伝わりにくいかもしれませんね。
そのあたりは質問者さんも色々とやりたいことと調べたことと試したことで整理がついてないところはあるのかもしれません。

Answer 2

例えば　配列itemListを
tpl側でこのように表示したとして

<div class="list">
	{foreach from=$itemList key=key item=detail }
			//この辺テーブルだったりなんだったり色々ですがとりあえず回答の為hiddenで
	     <input type="hidden" class="detail_number" id="detail_number{$key}" name="detail_number[]" value="{$detail.detail_number}">
	{/foreach}
</div>

js側ではこんな感じで

 $('.list').find('.detail_number').each(function (i) {

    var $val  = $list.find('.detail_number')
}

eachでループ処理する感じですかね。
配列として渡すというより、htmlの要素で回す感じで処理する事が多いです。
グラフ表示はすべてjsでされるんですか？

もし、グラフ表示部分は別tplにし、
ajaxで飛ばしてコントローラーで処理をして、その別tplをhtml形式で受け取る感じにする場合は、

var itemarray = [];
foreach
itemarray.push($val);
/foreach

でitemarrayを飛ばしてあげるといいと思います。

Comments

[ms5025]

すいません、js部間違えました

$('.list').find('.detail_number').each(function (i) {

var $val = $(this).val()；
}

です。この場合.detail_numberクラスをループしてるので、
中では$(this).val()で価がとれます。