忍者ブログ
[PR]
×

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



2017/06/27 05:39 |
Dojo1.6.1 dojo Dojo道場05 dojox.charting.Chart2DでデータAPIを利用
前回の続き。

dojoによるグラフはこれまで配列を直接突っ込んでいましたが、dojo.dataオブジェクトを使用することができます。
dojox/data/配下には大量のデータAPIがあり、JSONやXMLやCSVやHTMLテーブルなどからデータを読み取ると全てdojo.dataオブジェクトとなり以後は統一的に扱えますよ、ということになるみたいです。

とりあえずサンプルで動作確認。
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.charting.DataSeries");
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojox.charting.Chart2D");
		
		var drawChart = function(){
			//JSONデータ
			var jsonData = { 
				data:{items:[
					{value:9166.85}, 
					{value:9258.32}, 
					{value:9230.56}, 
					{value:9218.88}, 
					{value:9210.49} 
				]} 
			};
			//データを読み込む
				var store = new dojo.data.ItemFileWriteStore(jsonData);
			
			//折れ線グラフ
				var myChart = new dojox.charting.Chart2D("myChart");
				myChart.addPlot("default", {type: "Lines"});
				//グラフに値追加はdojox.charting.DataSeriesを経由
				myChart.addSeries("stockprice", new dojox.charting.DataSeries(store));
				myChart.render();
			
		}
		//起動時実行
		dojo.addOnLoad(drawChart);
	</script>
</head>
<body class="claro">
	<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
 

前やったやつからの変更点は、データが配列からJSONになったこと、addSeriesでデータを追加する際にdojox.charting.DataSeriesを経由することになったことの2点です。

dojo.data.ItemFileWriteStoreという、あたかもファイルから読み書きできるかのようなクラス名ですが、見てのとおり直接値を突っ込んでいます。

もちろん別のファイルから読み込みこともでき、その場合は
 var store = new dojo.data.ItemFileReadStore({url:"myChart.json"});
と記述します。
ただしこの場合、JSONデータの読み込みが非同期になります。
どういうことかって、dojo.data.ItemFileReadStoreオブジェクトの作成直後に中身を確認してもデータが入っていないのです。
ちゃんとデータが取得できているか確認したい場合は、その前にfetch()する必要があります。

てかこれ、単純に元のデータがほしい場合とかJSONとして出力したい場合とかはItemFileWriteStoreからどうやって取り出せばいいんだ?
PR


2011/06/18 00:30 | Comments(0) | TrackBack(2) | JavaScript

トラックバック

トラックバックURL:
前回dojo.data.ItemFileWriteStoreを使って、JSONからデータを読み込みました。 実際これだけであればデータストアを使う意味はないのですが、ポイントは色々な形式を使えるということです。 ということで色々な形式から読み込んでみようと思います。 とりあえず適当にXMLファイルを作成。 <?xml version="1.0"?> <data> <items> <item> &l...
弱小PHPerの憂鬱 | 2011/06/20 22:45
前回の続き。 今回は一度作成したグラフを更新します。 http://codezine.jp/article/detail/5572?p=2 既にグラフの表示自体はできているのでたいして難しいことはありません。 グラフの画面描画はrender()メソッドですが、実は一旦render()してしまえば後はストアに値を突っ込むだけで勝手に画面が更新されます。 <html> <head> <meta http-equiv="Content-Typ...
弱小PHPerの憂鬱 | 2011/06/27 22:31

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<今週の実績 2011/06/19 | HOME | Dojo1.6.1 dojo Dojo道場04 dojox.charting.Chart2Dにイベント設定>>
忍者ブログ[PR]