御世話になります。
wordpressにjqueryを使った円グラフを表示したいと考えています。
以前こちらのサイトで、google chart の表示の質問をさせて頂きました。
その際、ヒアドキュメントを使うアドバイスを頂き、無事 functions.php⇒ショートコードの流れでグラフを表示できました。
現在、google chart とは異なる、有志で開発された jquery の円グラフを wordpress で表示したいと思います。
wordpressでは、wordpress独自のjqueryがすでに用意されているため、その衝突を回避しなければなりません。
今回、$を使わずjqueryというワードを使うことで、その衝突を回避しようとしましたが、うまくグラフがwordpressに表示されてません。
エラーコードが発生していないため、jqueryが機能していないと考えています。
functions.phpから、jqueryを利用したグラフを表示させるためには、どのようにヒアドキュメントに記載すればよろしいでしょうか?
プログラムは、データベースから通信量の合計値を取得し%に変換し、円グラフで全体の使用率を表示するものになります。
fucntions.phpの記述は以下になります。
php
1function shortcode4Func() { 2 3$dsn = 'mysql:host=ホスト名;dbname=データベース名;charset=utf8'; 4 5$user = データベースのユーザー名; 6$password = データベースのパスワード; 7 8// tryにPDOの処理を記述 9try { 10 // PDOインスタンスを生成 11 $dbh = new PDO($dsn, $user, $password); 12 13// エラー(例外)が発生した時の処理を記述 14} catch (PDOException $e) { 15 // エラーメッセージを表示させる 16 echo 'データベースにアクセスできません!' . $e->getMessage(); 17} 18 19 $sql = "SELECT sum(volume) FROM mtraffics"; //指摘を頂き、「"」を付けて修正しました。 20 $stmt = $dbh->query($sql); 21 foreach ($stmt as $row) { 22 $total = $row["sum(volume)"]; 23 24} 25 26$output = <<< EOF 27<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 28<script src="js/jquery.circliful.js"></script> 29<script> 30 31 jQuery( document ).ready(function() { // 6,32 5,38 2,34 32 jQuery("#test-circle").circliful({ 33 animation: 1, 34 animationStep: 5, 35 foregroundBorderWidth: 15, 36 backgroundBorderWidth: 15, 37 percent: 38EOF; 39 40 $output .= $total/1000000; 41 42$output .= <<< EOF 43 , 44 textSize: 28, 45 textStyle: 'font-size: 12px;', 46 textColor: '#666', 47 multiPercentage: 1, 48 percentages: [10, 20, 30] 49 }); 50 }); 51</script>//訂正して追加 52EOF; 53 54return $output; 55} 56add_shortcode('shortcode4', 'shortcode4Func'); 57
wordpressで呼び出すコードは以下になります。
html
1[shortcode4] 2<div id="test-circle"></div>
jqueryの同時呼び出しが原因と考え、
php
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
を削除して実行しましたが、同じく表示が出ない状況です。
どのようにjqueryを使ったグラフを表示すれば良いでしょうか?
訂正
回答頂きありがとうございます。
指摘して頂いた「"」の欠落ですが、テラテイルに質問を投稿する際に、不要な変数や個人情報を消す時に、間違って消してしまったものになります。
文法的なエラーは一応画面上では表示されていません。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/26 05:59