`
rensanning
  • 浏览: 3545890 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38094
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607083
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682028
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89199
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:401675
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69651
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91646
社区版块
存档分类
最新评论

在Titanium中如何画图表

阅读更多
目前版本的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按钮后,看看效果图:

  • 大小: 28 KB
  • 大小: 26.9 KB
分享到:
评论
2 楼 rensanning 2012-05-17  
小威哥 写道
https://marketplace.appcelerator.com/apps/2530?1334332116
看看上面的网址,应该是你想要的


30美元,太贵了,哈哈!
1 楼 小威哥 2012-05-16  
https://marketplace.appcelerator.com/apps/2530?1334332116
看看上面的网址,应该是你想要的

相关推荐

    Titanium中支持IOS设备的拖拽

    "Titanium中支持iOS设备的拖拽"这一主题聚焦于如何在Titanium框架下实现iOS应用的拖放功能。这种功能在现代移动应用中非常常见,尤其在文件管理、内容编辑以及多任务处理等场景中。 拖放功能在iOS中是通过...

    Google-Cloud-Messaging--Titanium-, 在 Titanium 中,Google云消息传递.zip

    Google-Cloud-Messaging--Titanium-, 在 Titanium 中,Google云消息传递 Google-Cloud-Messaging--Titanium -注册带有GCM和处理发送到设备的通知的Titanium MODULE 。Android平台使用c2dm进行推送,但是因为c2dm停止...

    TitaniumBackup_6.0.5.1

    在安卓设备的管理和维护中,数据备份与恢复是至关重要的环节。TitaniumBackup_6.0.5.1,这款专业版应用,以其强大的功能和高效的操作,为用户提供了可靠的数据管理工具。它的静默恢复特性,更是为用户带来了前所未有...

    Titanium中文版开发手册

    这一章节探讨了在没有控制器的情况下如何直接在XML中编写视图逻辑。 8. **Alloy Data Binding(Alloy数据绑定)** 数据绑定是Alloy的一大亮点,它允许开发者动态地将数据模型与UI元素关联起来。当数据改变时,UI会...

    在Titanium中通过使用BEGIN/COMMIT来加速SQLite插入操作

    本文将深入探讨如何在Titanium中利用BEGIN/COMMIT来加速SQLite的批量插入操作,并提供相关的源码示例。 在SQLite中,BEGIN命令用于开启一个事务,而COMMIT则用于提交事务。当进行大量数据插入时,一次性提交所有...

    titanium 打开本地网络

    在Titanium中,可以使用`Ti.Network`模块来检查设备的网络状态。这个模块提供了多种方法来获取网络连接的信息,例如`Titanium.Network.online`属性,它返回一个布尔值,表示设备当前是否已连接到任何类型的网络(如...

    TitaniumAnimator, Titanium 动画视图的替换.zip

    TitaniumAnimator, Titanium 动画视图的替换 TitaniumAnimatorTitanium的动画替换功能。 模块的目标是尽可能多地模仿 Titanium 动画模块,增加新的计时功能和更好的性能。 现在,可以进行动画处理的唯一属性是: ...

    Titanium plugin开发初探

    完成后,可以打包成 `.tibundle` 或 `.aar` 文件,供其他开发者在他们的 Titanium 项目中使用。 **8. 源码分析** `billdawson-ti_coffee_plugin-7dc9a53` 这个文件名可能指的是一个具体的 Titanium 插件项目,由 ...

    Titanium Mobile API

    在 Titanium Mobile API 中,核心组成部分是 Titanium Module。这些模块包含了大量预定义的对象和方法,旨在简化常见的移动开发任务。例如: - **Ti.UI**:用户界面组件,包括按钮、文本框、列表视图等。 - **Ti....

    Titanium Mobile SDK 3.1.0 Apidoc 离线版

    - **类**:Titanium中的各种类,如UI组件、网络请求类等,它们的构造函数、方法、属性的解释。 - **方法**:每个方法的参数、返回值、使用示例,以及可能抛出的异常。 - **事件**:组件可以触发的事件,以及事件处理...

    Titanium中Httpclient访问REST 服务

    本主题聚焦于在Titanium中如何利用HttpClient访问REST服务,这是一种常见的移动应用与服务器间进行数据交换的方式。REST(Representational State Transfer)是一种网络应用程序的设计风格和开发方式,基于HTTP协议...

    [Titanium] Appcelerator Titanium 移动应用开发教程 (英文版)

    [Packt Publishing] Appcelerator Titanium 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Appcelerator Titanium (E-Book) ☆ 图书概要:☆ Develop fully-featured mobile ...

    使用Titanium来开发“Path”的一些创新UI布局 - 左右菜单

    在 Titanium 中实现这样的功能,开发者可能需要自定义视图和手势检测。具体步骤可能包括: 1. **创建视图(Views)**:为菜单和主要内容创建两个独立的视图,菜单视图通常隐藏,而主要内容视图则占据屏幕的主区域。...

    Titanium中SOAPClient访问SOAP协议的WebService

    本篇文章将深入探讨如何在Titanium中使用SOAPClient来访问SOAP协议的Web服务。 首先,理解SOAP的基本概念至关重要。SOAP是一种轻量级、文本基础的协议,用于在Web上交换结构化的和类型化的信息。它基于HTTP协议,...

    Titanium Backup_3.7.4捐赠完全版

    Titanium Backup_3.7.4捐赠完全版

    前端开源库-node-titanium-sdk

    在实际开发过程中,使用`node-titanium-sdk`时,开发者需要熟悉Titanium的API,理解如何通过JavaScript代码调用这些API来实现原生功能。同时,还需要掌握基本的移动应用设计原则,以确保应用在不同平台上拥有良好的...

    Titanium资料

    UIView 是 iOS 平台上视图的基础类,它在 Titanium 中被用来创建和管理用户界面元素。通过这个文档,你可以了解到如何创建、布局和交互各种 UI 元素,如按钮、文本框、图片视图等,以及如何添加事件监听器来响应用户...

    Titanium_ziliao

    在"Titanium_ziliao"这个项目中,我们主要探讨的是钛合金(Titanium Alloy)的相关知识。钛合金是一种结合了钛元素和其他金属元素的合金材料,它在多个领域,如航空航天、医疗器械、体育用品等,都有广泛的应用。...

Global site tag (gtag.js) - Google Analytics