titanium/グラフを表示する
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** Titanium mobileの弱点 [#hdb75254]
今回は、ものまねではなく、オリジナルの記事です。
Titanium mobileの弱点に
- お絵かきができない
があります。
そこで、
[[jQueryでグラフを書く>http://rd.uniba.jp/blog/2011/05/06...
[[flot>http://code.google.com/p/flot/]]
を使って体重をグラフに表示してみます。
*** flotのダウンロード [#z5d3e492]
[[flotのホームページ>http://code.google.com/p/flot/]]
から
[[flot-0.7.zip>http://code.google.com/p/flot/downloads/de...
をダウンロードします。
- jquery.flot.js
- jquery.js
をプロジェクトにコピーします。
** flotのテスト [#n383cfac]
flotのテスト用にplot_window.jsを以下のように作成します。
plot_window.js
#pre{{
var win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'plot.html'
});
win.add(webView);
}}
また、WebViewから表示するplot.htmlを以下のように作成しま...
plot.html
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; c...
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/c...
<!--[if lte IE 8]><script language="javascript" type=...
<script language="javascript" type="text/javascript" ...
<script language="javascript" type="text/javascript" ...
</head>
<body>
<h1>Data Graph</h1>
<div id="graph" style="width:310px;height:240px;"></d...
<script type="text/javascript">
var weights = [[1301270400000,0],[1301875200000,8.25],[1...
var ticks = [1301270400000,1301875200000,1302480000000,1...
var setting = {
series: {
lines: { show:true},
points: { show:true}
},
xaxis: {
mode:"time",
timeformat:"%m/%d",
tickSize: [7,"day"],
ticks: ticks
},
yaxis: {
ticks: 10,
min: 0,
},
grid: {
backgroundColor: { colors: ["#fff","#eee"] },
}
};
$.plot($("#graph"),[{data: weights, color: 2}], setting);
</script>
</body>
</html>
}}
win2のurlをplot_window.jsに変えて、動かしてみます。上手く...
&ref(flot_test.png);
** テーブルビューのデータをグラフに表示する [#pfc3b107]
今度は、テーブルビューのデータをグラフにプロットします。
plot_windowを生成するときに、weightsとticksを引数と渡しま...
また、ナビゲーションバーの左側にGraphボタンを追加します。
table_view.jsに追加
#pre{{
var graphButton = Ti.UI.createButton({title: 'Graph'});
graphButton.addEventListener(
'click', function () {
if (records.length > 0) {
var weights = "[";
var ticks = "[";
for (i = records.length-1; i >= 0; i--) {
weights = weights + "[" + records[i].at.getTime() +","...
ticks = ticks + records[i].at.getTime() + ",";
}
weights = weights + "]"; ticks = ticks + "]";
var graphWindow = Ti.UI.createWindow({
url: 'plot_window.js',
weights: weights,
ticks: ticks
}
);
Ti.UI.currentTab.open(graphWindow);
}
}
);
win.leftNavButton = graphButton;
}}
*** plot_window.jsの変更 [#f239a767]
次にplot_window.jsで渡された値をグラフにプロットします。
これには、WebView.evalJS関数を使います。
plot_window.jsに以下を追加します。
#pre{{
webView.addEventListener('load', function(){
webView.evalJS('weights =' + win.weights + ';');
webView.evalJS('ticks =' + win.ticks + ';');
webView.evalJS('setting.xaxis.ticks = ticks;');
webView.evalJS('$.plot($("#graph"),[{data: weights, colo...
});
}}
*** 動作確認 [#ga372e3a]
では、テーブルビューの左上に表示されたGraphボタンを押して...
以下のようなグラフが表示されたら完成です！
&ref(graph.png);
*** プログラムソース [#u1b70512]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#bd394c0d]
#vote(おもしろかった[22],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- weights, ticksの設定にミスあり、webView.evalJS('weights...
#comment_kcaptcha
終了行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** Titanium mobileの弱点 [#hdb75254]
今回は、ものまねではなく、オリジナルの記事です。
Titanium mobileの弱点に
- お絵かきができない
があります。
そこで、
[[jQueryでグラフを書く>http://rd.uniba.jp/blog/2011/05/06...
[[flot>http://code.google.com/p/flot/]]
を使って体重をグラフに表示してみます。
*** flotのダウンロード [#z5d3e492]
[[flotのホームページ>http://code.google.com/p/flot/]]
から
[[flot-0.7.zip>http://code.google.com/p/flot/downloads/de...
をダウンロードします。
- jquery.flot.js
- jquery.js
をプロジェクトにコピーします。
** flotのテスト [#n383cfac]
flotのテスト用にplot_window.jsを以下のように作成します。
plot_window.js
#pre{{
var win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'plot.html'
});
win.add(webView);
}}
また、WebViewから表示するplot.htmlを以下のように作成しま...
plot.html
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; c...
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/c...
<!--[if lte IE 8]><script language="javascript" type=...
<script language="javascript" type="text/javascript" ...
<script language="javascript" type="text/javascript" ...
</head>
<body>
<h1>Data Graph</h1>
<div id="graph" style="width:310px;height:240px;"></d...
<script type="text/javascript">
var weights = [[1301270400000,0],[1301875200000,8.25],[1...
var ticks = [1301270400000,1301875200000,1302480000000,1...
var setting = {
series: {
lines: { show:true},
points: { show:true}
},
xaxis: {
mode:"time",
timeformat:"%m/%d",
tickSize: [7,"day"],
ticks: ticks
},
yaxis: {
ticks: 10,
min: 0,
},
grid: {
backgroundColor: { colors: ["#fff","#eee"] },
}
};
$.plot($("#graph"),[{data: weights, color: 2}], setting);
</script>
</body>
</html>
}}
win2のurlをplot_window.jsに変えて、動かしてみます。上手く...
&ref(flot_test.png);
** テーブルビューのデータをグラフに表示する [#pfc3b107]
今度は、テーブルビューのデータをグラフにプロットします。
plot_windowを生成するときに、weightsとticksを引数と渡しま...
また、ナビゲーションバーの左側にGraphボタンを追加します。
table_view.jsに追加
#pre{{
var graphButton = Ti.UI.createButton({title: 'Graph'});
graphButton.addEventListener(
'click', function () {
if (records.length > 0) {
var weights = "[";
var ticks = "[";
for (i = records.length-1; i >= 0; i--) {
weights = weights + "[" + records[i].at.getTime() +","...
ticks = ticks + records[i].at.getTime() + ",";
}
weights = weights + "]"; ticks = ticks + "]";
var graphWindow = Ti.UI.createWindow({
url: 'plot_window.js',
weights: weights,
ticks: ticks
}
);
Ti.UI.currentTab.open(graphWindow);
}
}
);
win.leftNavButton = graphButton;
}}
*** plot_window.jsの変更 [#f239a767]
次にplot_window.jsで渡された値をグラフにプロットします。
これには、WebView.evalJS関数を使います。
plot_window.jsに以下を追加します。
#pre{{
webView.addEventListener('load', function(){
webView.evalJS('weights =' + win.weights + ';');
webView.evalJS('ticks =' + win.ticks + ';');
webView.evalJS('setting.xaxis.ticks = ticks;');
webView.evalJS('$.plot($("#graph"),[{data: weights, colo...
});
}}
*** 動作確認 [#ga372e3a]
では、テーブルビューの左上に表示されたGraphボタンを押して...
以下のようなグラフが表示されたら完成です！
&ref(graph.png);
*** プログラムソース [#u1b70512]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#bd394c0d]
#vote(おもしろかった[22],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- weights, ticksの設定にミスあり、webView.evalJS('weights...
#comment_kcaptcha
ページ名:
SmartDoc
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
