「HTML5による物理シミュレーション」という書籍を読んでいて
2.5 jpPlotを利用したクラスの実装(プログラムソース2.15 plot2D_r1.js)
というところをやっているのですが
jQueryでクラスの定義を行っても
Uncaught ReferenceError: Plot2D is not defined (anonymous function)
というエラーが出てきてしまいます
jQueryのjsファイルも先に読み込んでいるはずなので原因がわかりません。
どうすればよいかご存知ではないでしょうか?
クラス定義は外部ファイルでおこなっていて plot2D_r1.js というファイルです
書いたコードを下に記載しておきます
ClassTest.htmlファイル
lang
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>クラスplot2Dテスト</title> 7 <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet"> 8 <link href="jquery_jqplot_dist/jquery.jqplot.min.css" rel="stylesheet"> 9 <style>div#canvas-frame{width:500px; height:400px;} /*額縁のサイズ*/ 10 </style> 11 12 <script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script> 13 <script type="text/javascript" src="jquery_jqplot_dist/jquery.jqplot.min.js"></script> 14 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasTextRenderer.min.js"></script> 15 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 16 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 17 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.logAxisRenderer.min.js"></script> 18 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.highlighter.min.js"></script> 19 <script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.cursor.min.js"></script> 20 <script type="text/javascript" src="plot2D_r1.js"></script> 21 22 23 <script> 24 window.addEventListener("load", function(){ 25 plotStart(); //jqplotスタート関数の実行 26 }); 27 28 function plotStart(){ 29 //[Plot2D]クラスインスタンスを生成 30 var plot2D = new Plot2D('canvas-frame'); 31 var series = []; //データ列オプション用配列 32 33 var data=[]; //プロットデータ配列 34 35 var //描画用パラメータの準備 36 N = 20, //座標点の数 37 x_min = 0, //xの最小値 38 x_max = 2; //xの最大値 39 40 //2時関数データの準備 41 for (var a=1; a <= 5; a++) { 42 data = []; //描画点座標データ配列の初期化 43 series.push({label: 'y=pow(' + a + ', x)'}); //凡例の追加 44 45 //描画点の計算 46 for (var i=0; i<= N; i++) { 47 var x = x_min + (x_max - x_min)*i / N; //xの値 48 var y = Math.pow(a, x); //yの値 49 data.push([x, y]); //データの格納 50 } 51 //[pushData]メソッドによるデータの追加 52 plot2D.pushData(data); 53 } 54 //オプションの上書き 55 plot2D.options.series = series; 56 plot2D.options.legend.location = "nw"; 57 58 //メソッドによる描画 59 plot2D.linerPlot(); 60 61 //2次元グラフ描画の実行 62 // $.jqplot("canvas-frame", plotDatas, null); 63 // $.jqplot(targetElemId, plotDatas, options); 64 // targetElemId: canvas要素を配置する領域のid名, string型 65 // plotDatas: プロットデータを多次元配列で受け渡す 66 // options: 描画時のオプションをオブジェクト形式で受け渡す。 67 } 68 </script> 69 </head> 70 <body> 71 <!-- 絶対領域 --> 72 <div id="canvas-frame"></div> 73 </body> 74</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/11/18 08:43
2014/11/18 08:48
2014/11/18 10:23
2014/11/18 10:26
2014/11/18 11:07
2014/11/19 01:46