投稿2016/11/07 08:29
お世話になっております。
【現状のご説明】
【問題点】
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件
0
解決されているようですが、テーブルの行ごとにscriptを置くやり方ではなく、まとめてやったほうがコードもすっきりすると思います。
下記の show 関数の中にChartを作るための物をまとめておいて、行ごとに実行するイメージです。
HTML
1<table> 2<tr><td>1a</td><td>1b</td><td>1c</td><td>1d</td><td>1e</td></tr> 3<tr><td>2a</td><td>2b</td><td>2c</td><td>2d</td><td>2e</td></tr> 4<tr><td>3a</td><td>3b</td><td>3c</td><td>3d</td><td>3e</td></tr> 5<tr><td>4a</td><td>4b</td><td>4c</td><td>4d</td><td>4e</td></tr> 6<tr><td>5a</td><td>5b</td><td>5c</td><td>5d</td><td>5e</td></tr> 7</table>
JavaScript
1function show( a, b, c, d, e ) { 2 console.log( a, b, c, d, e ); 3} 4$( ()=> { 5 $( 'tr' ).each( ( i, ele )=> { 6 let a = []; 7 $( ele ).find( 'td' ).each( ( i, ele )=> { 8 a.push( $( ele ).text() ); 9 } ); 10 show( a[ 0 ], a[ 1 ], a[ 2 ], a[ 3 ], a[ 4 ] ); 11 } ); 12} ); 13```**動くサンプル：**[https://jsfiddle.net/0xfn95L9/](https://jsfiddle.net/0xfn95L9/)
投稿2016/11/09 16:17
総合スコア69400
0
ベストアンサー
htmlの先頭の方で予めデータをつくっておいて処理するか
htmlを読み終わった後にajaxでデータを取りに行き、取得後表示するか
のどちらかではないでしょうか？
投稿2016/11/07 09:18
総合スコア114777
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。