商品の比較に使用するため、同一ページにレーダーチャートを複数設置したいです。
プラグインの使用を希望。
inputで各要素の値を設定出来る事が魅力で「Canvas Chart」を使用したいと思っています。
参考サイト:https://webkaru.net/jquery-plugin/canvas-chart/
ソースコードは以下になります。
html
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <link rel="stylesheet" href="style.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> 10 <script> 11 $(function(){ 12 $('.canvasChart').canvasChart({ 13 polygon : 5, 14 chartPointType : ['arc'], 15 chartPointSize : [2], 16 valuationName : ['優しさ','顔','年収','性格','ファッション'], 17 printZero : false, 18 scale : false, 19 bgFill : false 20 }); 21 }); 22 </script> 23</head> 24 25<body> 26 27 <section class="clearfix"> 28 <h1>商品1</h1> 29 <article class="artImg"><img src="sample.jpg" alt="商品画像"></article> 30 <article class="artTxt">商品説明</article> 31 <article class="artGrp"> 32 <div class="canvasChart"> 33 <canvas width="100%" height="100%"></canvas> 34 <div class="chartInput"> 35 <input type="hidden" value="2" name="優しさ" /> 36 <input type="hidden" value="1" name="顔" /> 37 <input type="hidden" value="1" name="年収" /> 38 <input type="hidden" value="5" name="性格" /> 39 <input type="hidden" value="3" name="ファッション" /> 40 </div> 41 </div> 42 </article> 43 </section> 44</body> 45 46</html>
動作確認のため、チャート作成の部分は参考サイトのものを使用させて頂いています。
これからカスタマイズしていく予定です。
ここまで書いたところで以下のようなエラーが出てしまいレーダーチャートが描画されません。
プラグインのためどのように修正したら良いか分からず困っております。
Uncaught TypeError: $(...).canvasChart is not a function
at HTMLDocument.<anonymous> (test.html:12)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/29 02:55
2018/03/29 02:57
2018/03/29 03:04
2018/03/29 03:08
2018/03/29 03:17