jqueryのプラグインjqplotを利用したクラスの実装でundefinedが出てしまいます

「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件

ベストアンサー

JavaScriptの読み込みをjQueryとjqPlotとplot2D_r1.jsのみにし、
Plot2D.optionsにlegend: {},を追記したら動きましたが…
どれが動かない原因なのかはよくわかりませんね…

HTML上のplot2D.options.legendの行でエラーになったので、plot2D_r1.jsのthis.optionsにlegend: {},を追記してみました。

投稿2014/11/18 08:30

TaMaMhyu

総合スコア1356

YoheiKoga

2014/11/18 08:43

おお！確かに動きました! コンソールから確認したところ、まだ plotDatas is not defined とは出てくるのですが一応グラフは描けました！ jqplotのバージョン? リビジョン? によってエラーが起こってるのですかね・・・ linerとlogの関数を書いてるんですけどtype errorが出てまたハマってしまいました(^_^;) もうちょっと頑張ってみようとおもいますありがとうございます！

TaMaMhyu

2014/11/18 08:48

バージョンを書いてなかったですね。 <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script> jQueryとjqPlotはこのように記述しました。

YoheiKoga

2014/11/18 10:23

追記なんですが、/* 軸オプション */ axis : { xaxis : { label : 'x', min : null, max : null, tickInterval : null, labelOptions : { angle: 0}, }, のところ、axis ではなくて axesでした

YoheiKoga

2014/11/18 10:26

jqueryとjqplotはネット上のソースを使ってらっしゃるんですね、ひとまずあーだこーだしてたら気付いたら無事全部エラーが消えました、、、、なんだったんだろうコードを一応下に貼り付けておきます

TaMaMhyu

2014/11/18 11:07

試すのにダウンロードするのは面倒だったので、ホスティングされているのを使いました。

YoheiKoga

2014/11/19 01:46

なるほど、自分の細かい記述ミスもあるかもしれないので助かりました!

行動規範の内容に同意します

最終的なClassTest.htmlファイル

lang
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<title>クラスplot2Dテスト</title>
6		<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
7		<link href="jquery_jqplot_dist/jquery.jqplot.min.css" rel="stylesheet">
8		<style>div#canvas-frame{width:500px; height:400px;} /*額縁のサイズ*/
9		</style>
10
11		<script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script>
12		<script type="text/javascript" src="jquery_jqplot_dist/jquery.jqplot.min.js"></script>
13		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
14		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
15		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
16		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.logAxisRenderer.min.js"></script>
17		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.highlighter.min.js"></script>
18		<script type="text/javascript" src="jquery_jqplot_dist/plugins/jqplot.cursor.min.js"></script>
19		<script type="text/javascript" src="plot2D_r1.js"></script>
20
21<!--
22		<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
23		<script type="text/javascript" src="three.min.js"></script>
24		<script type="text/javascript" src="js/renderers/Projector.js"></script>
25		<script type="text/javascript" src="js/renderers/CanvasRenderer.js"></script>
26		<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
27-->		
28
29		<script>
30		window.addEventListener("load", function(){
31			plotStart(); //jqplotスタート関数の実行
32		});
33
34		function plotStart(){
35			//[Plot2D]クラスインスタンスを生成
36			var plot2D = new Plot2D('canvas-frame');
37			var series = []; //データ列オプション用配列
38
39			var data=[]; //プロットデータ配列
40
41			var //描画用パラメータの準備
42			N = 20, //座標点の数
43			x_min = 0, //xの最小値
44			x_max = 2; //xの最大値
45
46			//2時関数データの準備
47			for (var a=1; a <= 5; a++) {
48				data = []; //描画点座標データ配列の初期化
49				series.push({label: 'y=pow(' + a + ', x)'}); //凡例の追加
50
51				//描画点の計算
52				for (var i=0; i<= N; i++) {
53					var x = x_min + (x_max - x_min)*i / N; //xの値
54					var y = Math.pow(a, x); //yの値
55					data.push([x, y]); //データの格納
56				}
57				//[pushData]メソッドによるデータの追加
58				plot2D.pushData(data);
59			}
60			//オプションの上書き
61			plot2D.options.series = series;
62			plot2D.options.legend.location = "nw";
63
64			//メソッドによる描画
65			plot2D.linerPlot();
66
67			//2次元グラフ描画の実行
68			//$.jqplot("canvas-frame", plotDatas, null);
69			// $.jqplot(targetElemId, plotDatas, options);
70			// targetElemId: canvas要素を配置する領域のid名, string型
71			// plotDatas: プロットデータを多次元配列で受け渡す
72			// options: 描画時のオプションをオブジェクト形式で受け渡す。 
73		}
74		</script>
75	</head>
76	<body>
77		<!-- 絶対領域 -->
78		<div id="canvas-frame"></div>
79	</body>
80</html>