在Titanium中如何画图表

rensanning

浏览: 3538436 次
性别:
来自: 大连

最近访客更多访客>>

SYSGIS

blogtester

lliiqiang

film

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 使用Titanium Mo...
浏览量：37958

: Cordova 3.x入门...
浏览量：606451

: 常用Java开源Libra...
浏览量：681075

: 搭建 CentOS 6 服...
浏览量：88691

: Spring Boot 入...
浏览量：401224

: 基于Spring Secu...
浏览量：69548

: MQTT入门
浏览量：91410

文章分类

社区版块

存档分类

博客分类：

Titanium

appcelerator titanium mobile graph

目前版本的Titanium的一个弱点就是不能画图！这回我们说说通过flot在Titanium中画图表。

flot的下载
flot的主页：http://code.google.com/p/flot/
下载flot-0.7.zip后，把以下文件拷贝到自己的工程中：

jquery.flot.js
jquery.js

flot的测试
作成以下flot测试用的plot_window.js：

var win = Ti.UI.currentWindow;

var webView = Ti.UI.createWebView({
	url: 'plot.html'
});
win.add(webView);

其中WebView中表示的plot.html文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 </head>
    <body>
    <h1>Data Graph</h1>

    <div id="graph" style="width:310px;height:240px;"></div>

	<script type="text/javascript">
	var weights = [[1301270400000,0],[1301875200000,8.25],[1302480000000,22],[1303084800000,29],[1303689600000,36.5]];
	var ticks = [1301270400000,1301875200000,1302480000000,1303084800000,1303689600000];
	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>

运行之后看看效果图：

在TableView中表示图表

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() +","+records[i].weight+"],";
			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

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, color: 2}], setting);');	
});

运行之后，按下TableView左上角的Graph按钮后，看看效果图：

查看图片附件

分享到：

通过Titanium将Metro UI移植到iOS/Android ... | 在Titanium中函数定义的性能

2012-02-01 10:28
浏览 1765
评论(2)
分类:移动开发
查看更多

2 楼 rensanning 2012-05-17

小威哥写道

https://marketplace.appcelerator.com/apps/2530?1334332116
看看上面的网址，应该是你想要的

30美元，太贵了，哈哈！

1 楼小威哥 2012-05-16