目前版本的Titanium的一个弱点就是不能画图！这回我们说说通过
flot在Titanium中画图表。
flot的下载
flot的主页：
http://code.google.com/p/flot/
下载flot-0.7.zip后，把以下文件拷贝到自己的工程中：
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
分享到：
相关推荐
目前市场业务中在产品以及其他项目的认证和检测方面存在诸多不便，用户需要实地考察并频繁与检测单位沟通，填写繁琐的纸质检测报告、当面送递样品，对于检测环节中存在的问题难以及时交互并处理。市场上相应的检测...
在本文中，我们将深入探讨React技术栈以及如何利用它来构建这样的图表。 React是一个由Facebook维护的开源JavaScript库，用于构建用户界面，尤其是单页应用程序（SPA）。它的核心理念是使用组件化的方式来构建复杂...
在DRTM-WebGUI中，JavaScript可能用于创建图表、动画效果、事件监听等功能，以提供丰富的用户体验。 5. **开发状态**：由于代码尚未完成，我们可以推测该项目仍在早期开发阶段。这可能意味着开发者正在构建基础架构...
这个工具可能是为了帮助用户理解复杂的数据关系，或者是网络交互过程中的连接动态，比如在图形化网络拓扑、社交网络分析或数据可视化等领域。 在JavaScript编程语言中，实现这样的功能可能涉及到以下几个关键知识点...
宝马F87 M2 注：此回购包括原有的信息...宝马M2汽车零件，零件编号和图表 AUDM（澳大利亚国内市场） M2汽车零件 杂项 M2“ M设计图标”宣传材料2015 M2生产统计 M2和N55B30T0在澳大利亚交付（AUDM） 按模型细分（总
3. **Canvas绘图**：元素提供了JavaScript画布功能，允许动态生成图形，广泛应用于图表、游戏、动画等场景。 4. **SVG矢量图**：HTML5支持Scalable Vector Graphics，用于创建可缩放的矢量图像，可以无限放大而不...
3. **images** 文件夹：可能包含网页中使用的图像资源，如个人照片、图表或装饰性图片。 4. **js** 文件夹：JavaScript文件用于添加交互性和动态功能，如响应式设计、动画效果或表单验证。 5. **fonts** 文件夹：...