質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

Javascriptが動いてくれません、、、

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,541

SugiuraY

score 249

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"]&nbsp;<?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>

-省略-
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/18 18:29

    「うまく動作しません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • SugiuraY

    2016/07/18 18:39

    抽象的となり、申し訳ございません。エディター上はエラーの表示は何も出ておらず、html上でjsで作成されるグラフが何も表示されません。単純に空白だけが表示されます。

    キャンセル

  • kei344

    2016/07/22 02:53

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

    キャンセル

回答 3

+3

原因はただのシンタックスエラーのようです。

とりあえず、ソースコード中のカッコの数でも検索してみましょう。( ) { } を検索してみれば、気付けるのではないでしょうかね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/18 18:47

    ご指摘ありがとうございます、おっしゃる通り、"}"が一つ多かったようです。syntax Errorが私のエディター(Atom)上は出てこなかったので、ちょっとこれ自体も問題ですが。。
    とはいうものの、これを解消してもなお、表示されないようです。
    構文そのものに誤りはございますでしょうか?
    何卒、よろしくお願い申し上げます。

    キャンセル

  • 2016/07/18 18:48 編集

    javascript のデバッグはブラウザで行います。
    デバッグ環境を整えていないのがそもそもナンセンスなので、そこをまずは調べてみてください。

    キャンセル

  • 2016/07/18 18:55

    勉強不足で申し訳ございません。chromeのデバッグ機能を見たらエラーが起きておりました。少しずつ分かってまいりました。前進することができたことを深謝申し上げます。

    キャンセル

  • 2016/07/18 18:58

    誰でも最初はそんなもんでしょう。
    ただ、シンタックスエラーを自力で直せないというのは、プログラマーにとって、「切腹」レベルのチョー恥ずかしいことなので、今後そのつもりて取り組んでください。

    キャンセル

+1

単純ミスですね。
一か所修正すればグラフは表示されます。
ご自分で見つけてください('ω')ノ

追記:投稿しているうちに解決していましたね。失礼しました

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/18 20:25

    NS-DOSさん
    ご確認、ご回答をいただきありがとうございます。
    おかげさまで解決することができました。
    失礼なんてとんでもないです。お力添え頂きありがとうございます。
    よろしくお願い申し上げます。

    キャンセル

checkベストアンサー

0

質問の内容についてはもう解決しているようですね。もし動かないならスクリプトの実行をonloadのタイミングにするなどしてみてください。

動くサンプル:https://jsfiddle.net/gxtzos5f/


下記部分に付いて、いくつか指摘します。

<Font Size="5" style="color:#808080  ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"]&nbsp;<?php echo "(".$AVG."/5.00)";?></br></div>
  1. Font要素 は廃止されました。style属性かCSSで処理しましょう。
  2. </br> は <br /> のことでしょうか。HTML5であれば <br> で良いです。
  3. もし [star rating= が WordPress のショートコードなら、使用方法を間違っています。
    テンプレート上でショートコードを実行する方法もありますが、少なくともこの書きかたではありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる