お世話になっております。
【現状のご説明】
- user.phpでユーザの選択したradioボタンにより$POSTにより値を受け取る
- 同じページ内に受け取った値にひもづく情報をMYSQLから取得する(複数行(複数の要素を含む配列)が取得される)
- 当該複数行の情報をテーブルで同じページ内で表示している
- chart.jsというJQUERYを利用して、モーダルウィンドウで複数行のそれぞれの情報をグラフで表示する
【問題点】
chart.jsとでグラフを表示させる際のスクリプトにおいて、POSTで取得したそれぞれの行を特定する変数を使用したいと考えております。
下記のコードで申し上げるとuser.phpのfor文が複数行をテーブルで表示させるコードになりますが、
イメージとして//ここにJSをいれたい!という箇所に、graph.jsを入れるのですが、その中の
data: ["<?php echo $resultact[$k][21];?>", "<?php echo $resultact[$k][23];?>",
"<?php echo $resultact[$k][25];?>", "<?php echo $resultact[$k][26];?>"],
もループにいれて、それぞれの行毎のグラフを描きたいと考えております。
for文の中出なければ$kがループしてくれないので、php(for)の中に無理やりJSコードを記載しようと考えています。
【質問】
このJSのスクリプトをphpのなかに組み込むためにすべて、for文の中で print "XXX";として
すべて書き込むのはあまり賢いやり方ではないような気がしていますが、
通常、このような場合(PHPの中でjsを使用し、jsにphpの変数を渡すようなコードを書く場合)どのようにコーディングすべきかアドバイスをいただけますでしょうか。
あまり、上手に質問を差し上げれていないかもしれないので、至らない点があれば、ご指摘ください。
宜しくお願い申し上げます。
user.php for ($k=0; $k <count($resultact) ; $k++) { $aa=$resultact[$k][5]; #preg_match('/(北海道|青森県|岩手県|宮城県|秋田県|山形県|福島県|茨城県|栃木県|群馬県|埼玉県|千葉県|東京都|神奈川県|新潟県|富山県|石川県|福井県|山梨県|長野県|岐阜県|静岡県|愛知県|三重県|滋賀県|京都府|大阪府|兵庫県|奈良県|和歌山県|鳥取県|島根県|岡山県|広島県|山口県|徳島県|香川県|愛媛県|高知県|福岡県|佐賀県|長崎県|熊本県|大分県|宮崎県|鹿児島県|沖縄県|マレーシア)/', #$resultact[$k][12],$matching);//住所 #$bb=$matching[0]; $cc=number_format($resultact[$k][21]);//取得価額 $dd=number_format($resultact[$k][23]);//取得時評価 $ee=number_format($resultact[$k][25]);//期末評価 $ff=number_format($resultact[$k][26]);//期末帳簿価額 $gg=$resultact[$k][30]."%";//稼働率 $hh=number_format($resultact[$k][32]+$resultact[$k][33]);//賃貸事業収益等 $ii=number_format($resultact[$k][34]);//賃貸事業費用等 if (!isset($ii)) { $ii=0; $jj=number_format($resultact[$k][46]);//賃貸事業損益 $kk=number_format($resultact[$k][47]);//NOI print "<tr>\n"; print "<td>".($k+1)."</td>"."<td>".$aa."</td>" ."<td style=\"text-align:right\">".$cc."</td>"."<td style=\"text-align:right\">".$dd."</td>"."<td style=\"text-align:right\">".$ee."</td>" ."<td style=\"text-align:right\">".$ff."</td>"."<td style=\"text-align:right\">".$gg."</td>"."<td style=\"text-align:right\">".$hh."</td>" ."<td style=\"text-align:right\">".$ii."</td>"."<td style=\"text-align:right\">".$jj."</td>"."<td style=\"text-align:right\">".$kk."</td>" ."</td>"."<td style=\"text-align:center\">"."<div class=\"box\"><a data-target=\"modal1\" class=\"modal-open\">"."<i class=\"fa fa-bar-chart\"></i>"."</a></div>"."</td>"; print "</tr>\n"; print "<div id=\"modal1\" class=\"modal-content\">" print "<div style=\"width:500px;\">" print " <canvas id=\"myChart\" width=\"400\" height=\"400\"></canvas>"; print "<script>"; //ここにJSをいれたい! print "</script>"; print " </div>"; print " <a class="modal-close">×</a>"; print " </div>"; }
graph.js var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["取得価額", "取得時評価額", "期末評価額","期末簿価"], datasets: [{ //label: '# of Votes', data: ["<?php echo $resultact[$k][21];?>", "<?php echo $resultact[$k][23];?>", "<?php echo $resultact[$k][25];?>", "<?php echo $resultact[$k][26];?>"], backgroundColor: [ '#ffc4d1', '#c2e6ff', '#ffe4a3', '#b5ffd7' ], borderColor: [ '#ffc4d1', '#c2e6ff', '#ffe4a3', '#b5ffd7' ], borderWidth: 1, }] }, options: { tooltips: { callbacks: { label: function(tooltipItem, data) { var value = data.datasets[0].data[tooltipItem.index]; value = value.toString(); value = value.split(/(?=(?:...)*$)/); value = value.join(','); return value; } } // end callbacks: }, //end tooltips scales: { yAxes: [{ labelstring:"<%=value%>円", ticks: { beginAtZero:true, userCallback: function(value, index, values) { // Convert the number to a string and splite the string every 3 charaters from the end value = value.toString(); value = value.split(/(?=(?:...)*$)/); value = value.join(','); return value; } } }], } } });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。