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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

591閲覧

jQuery プラグインを使用してレーダーチャートを描画したい。(エラーになる)

uzr1709

総合スコア34

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/29 02:41

商品の比較に使用するため、同一ページにレーダーチャートを複数設置したいです。
プラグインの使用を希望。

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)

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

読み込むライブラリを間違えていませんか?

HTML

1<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> 2

HTML

1<script src="jquery.canvasChart.js"></script>

レーダーチャートを作りたいのであれば, ここでもちょくちょく質問に上がるChart.js等を使えばよかろうと(筆者は使ったことはありませんが, それなりに使えるのでしょう).
※jQueryプラグインにこだわると選択肢が狭まります

http://www.chartjs.org/

投稿2018/03/29 02:47

編集2018/03/29 03:01
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uzr1709

2018/03/29 02:55

すみません、確かに別のライブラリを読み込んでいました。 色々なプラグインを試しているうちに間違えたようです。 希望していた「Canvas Chart」はDL先のURLが削除されており配布終了されていましたので別のものでチャートを作成したいと思います。
defghi1977

2018/03/29 02:57

ではその旨を質問に追記して下さい.
uzr1709

2018/03/29 03:04

「Chart.js」は着手したのですが、 チャート描画エリアがid指定になっており、グラフが1ページに1つしか設置出来ないのではと思い候補から外しておりました。 現在基本の棒グラフは設置出来ましたが、レーダーチャートへの変更と 複数設置を試してみて疑問点が出たらまた質問させて頂こうと思います。
defghi1977

2018/03/29 03:08

> チャート描画エリアがid指定 サンプルコードを見るに, チャート毎にcanvas要素を渡すように見えるので, 1ページにいくらでもグラフを配置できるように思います.
uzr1709

2018/03/29 03:17

ありがとうございます。 もう少し調整頑張ってみます。
guest

0

「Canvas Chart」が配布終了になっていたため、別の方法に切り替える事に致しました。
根本的なエラー解決ではありませんが、解決にさせて頂きます。

投稿2018/03/29 03:18

uzr1709

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問