前回の続き。
dojoによるグラフはこれまで配列を直接突っ込んでいましたが、dojo.dataオブジェクトを使用することができます。
dojox/data/配下には大量のデータAPIがあり、JSONやXMLやCSVやHTMLテーブルなどからデータを読み取ると全てdojo.dataオブジェクトとなり以後は統一的に扱えますよ、ということになるみたいです。
とりあえずサンプルで動作確認。
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
トラックバック
トラックバックURL:
