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> -省略-
回答3件
あなたの回答
tips
プレビュー