Dojo1.6.1 dojo Dojo道場01 dojox.charting.Chart2D

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 13:56 |

「Dojo道場」～実用アプリ構築のためのベストプラクティス
http://codezine.jp/article/corner/397

dojo.dataについて調べていたのですがなんだかよくわかりませんでした。
なんかデータストアの共通インターフェイスっぽいというのはわかったんですが、値を取得とか加工とかしようとするとよくわからなくなってくる。
よくよく考えたてみたらそれ以前にJavaScriptの基礎知識自体あんまり持っていないことが判明したので、とりあえずこちらの記事に従って進めていってみようと思います。
未だにプロトタイプってのがわかんないんだよね。

まず記念すべき第一回は…「グラフを使いこなす（前編）」
http://codezine.jp/article/detail/5547
いきなりそんな高度っぽい内容で大丈夫なのか？

グラフの表示はdojox.chartingで行えるようです。
http://codezine.jp/article/detail/5547?p=2
見てのとおり棒グラフ、円グラフ、折れ線グラフなどの基本は揃っている上散布図やら円柱グラフまでだいたいのものは表現できるようです。
JpGraphなんていらなかったんや！

ありがたいことにサンプルファイルを用意してくれているのでダウンロードしてみました。
http://codezine.jp/article/detail/5547?p=3

まずはdojox.charting.Chart2Dを使用した折れ線グラフを再現してみます。
サンプルファイルchart1-3-1.htmlを表示してみると、Firefox、Chromeでは表示できるのに、IEでは「終了していない文字列型の定数です」とか言われてしまいました。
これはサーバがHTTPヘッダで文字コードを返していないときに発生することがあります。
ということでそこらへんを加味したHTMLがこんな。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
	<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.charting.Chart2D");
		var drawChart = function(){
			//表示値
			var revenues2008 = [13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000];
			var revenues2009 = [27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000];
			//折れ線グラフ
			var myChart = new dojox.charting.Chart2D("myChart");
			myChart.addPlot("default", {type: "Lines"});
			//グラフに値を追加
			myChart.addSeries("2008年度売上高", revenues2008);
			myChart.addSeries("2009年度売上高", revenues2009);
			// グラフを描画
			myChart.render();
		}
		//起動時実行
		dojo.addOnLoad(drawChart);
	</script>
</head>
<body>
	<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>

加味どころかcharset=UTF-8の行を追加した以外は全く同じだった。
たったこれだけでこの↓のようにグラフが表示されます。
右クリックで保存できないことからもわかるように、↓は画像じゃなくてdojox.chartingで生成しています。
いやー最近のJavaScriptはすごいね。

ところでdojox.charting.Chart2Dを使用すると、
DEPRECATED: dojox.charting.Chart2D Use dojo.charting.Chart instead and require all other components explicitly -- will be removed in version: 2.0
とか言われます。
実はDojo1.6のAPIドキュメントからも既に削除されています。
しかし実際dojo.charting.Chartは存在しません。
どういうことなの。

2011/06/03 22:48 | Comments(0) | TrackBack() | JavaScript