Q&A
「うまく動作しません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
Chart.jsというライブラリを使用しており、下記のJavascriptをHTMLの中に埋め込んでいるのですが、動いてくれません。
もし、Javascriptの書き方に欠陥等があればどなたかご教示願います。
まだまだ、不慣れで申し訳ございませんが、よろしくお願い申し上げます。
Chart.js >>http://www.chartjs.org/
-省略- <body> <div class="subtitle" style="margin-bottom:20px; float: left; width:380px; align:left";><Font Size="5" style="color:#808080 ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"] <?php echo "(".$AVG."/5.00)";?></br></div> <div style="width:600px; height;200px"><canvas id="mybar" width="600px" height="200px"></canvas></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script> <script> function floatFormat( number, n ) { var _pow = Math.pow( 10 , n ) ; return Math.round( number * _pow ) / _pow ; } var PO_1=100; var PO_2=200; var PO_3=300; var PO_4=400; var PO_5= floatFormat(( PO_1+ PO_2+ PO_3+ PO_4)/4,1); var VP_1=10; var VP_2=20; var VP_3=30; var VP_4=40; var VP_5= floatFormat(( VP_1+ VP_2+ VP_3+ VP_4)/4,1); var data = { labels: ["A", "B", "C", "D", "平均",], datasets: [ {label: "総合評価", type:"bar", yAxisID: 'y-axis-1', backgroundColor: "rgba(0, 0, 255,0.3)", borderColor: "rgba(0, 0, 255,0.3)", borderWidth: 1, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [PO_1,PO_2, PO_3, PO_4, PO_5],}, { label: "口コミ数", type:"line", tension:0, yAxisID: 'y-axis-2', backgroundColor: "rgb(5, 34, 120)", fill:false, borderColor: "rgb(5, 34, 120)", borderWidth: 1, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [VP_1, VP_2, VP_3, VP_4, VP_5],} ]}; var options={ scales: { yAxes: [{ position: "left", id: "y-axis-1", ticks: { fontColor:"#000000", stepSize: 1, beginAtZero:true, callback: function(value) { return "⭐️ "+value;} }, gridLines:{display:true, color:"rgba(0, 0, 255, 0.3)", },}, { position: "right", id: "y-axis-2", ticks: { fontColor:"#000000", stepSize: 200, beginAtZero:true, }, gridLines:{display:true, color:"rgba(0, 0, 255, 0.3)", },} ], xAxes: [{ tick:{ fontColor:"#808080 ", fontSize:12, }, gridLines:{display:true,color:"rgba(255, 255, 255, 0)"}, }] } }; var ctx = document.getElementById("mybar"); var myBarChart = new Chart(ctx, { type: 'bar', data: data, options:options, }); } </script> </body> -省略-
抽象的となり、申し訳ございません。エディター上はエラーの表示は何も出ておらず、html上でjsで作成されるグラフが何も表示されません。単純に空白だけが表示されます。
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
回答3件
0
原因はただのシンタックスエラーのようです。
とりあえず、ソースコード中のカッコの数でも検索してみましょう。( ) { } を検索してみれば、気付けるのではないでしょうかね。
投稿2016/07/18 09:25
退会済みユーザー
総合スコア0
ご指摘ありがとうございます、おっしゃる通り、"}"が一つ多かったようです。syntax Errorが私のエディター(Atom)上は出てこなかったので、ちょっとこれ自体も問題ですが。。
とはいうものの、これを解消してもなお、表示されないようです。
構文そのものに誤りはございますでしょうか？
何卒、よろしくお願い申し上げます。
javascript のデバッグはブラウザで行います。
デバッグ環境を整えていないのがそもそもナンセンスなので、そこをまずは調べてみてください。
勉強不足で申し訳ございません。chromeのデバッグ機能を見たらエラーが起きておりました。少しずつ分かってまいりました。前進することができたことを深謝申し上げます。
誰でも最初はそんなもんでしょう。
ただ、シンタックスエラーを自力で直せないというのは、プログラマーにとって、「切腹」レベルのチョー恥ずかしいことなので、今後そのつもりて取り組んでください。
0
単純ミスですね。
一か所修正すればグラフは表示されます。
ご自分で見つけてください('ω')ノ
追記：投稿しているうちに解決していましたね。失礼しました
投稿2016/07/18 09:58
編集2016/07/18 10:00
総合スコア110
NS-DOSさん
ご確認、ご回答をいただきありがとうございます。
おかげさまで解決することができました。
失礼なんてとんでもないです。お力添え頂きありがとうございます。
よろしくお願い申し上げます。
0
ベストアンサー
質問の内容についてはもう解決しているようですね。もし動かないならスクリプトの実行をonloadのタイミングにするなどしてみてください。
動くサンプル：https://jsfiddle.net/gxtzos5f/
下記部分に付いて、いくつか指摘します。
HTML
1<Font Size="5" style="color:#808080 ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"] <?php echo "(".$AVG."/5.00)";?></br></div>
- Font要素 は廃止されました。style属性かCSSで処理しましょう。
</br>は<br />のことでしょうか。HTML5であれば<br>で良いです。- もし
[star rating=が WordPress のショートコードなら、使用方法を間違っています。
テンプレート上でショートコードを実行する方法もありますが、少なくともこの書きかたではありません。
投稿2016/07/18 10:10
総合スコア69400
あなたの回答
tips
プレビュー
