Titanium实现相关的报表功能

longgangbai

浏览: 7343418 次
性别:
来自: 上海

最近访客更多访客>>

liuqibo861129

sdcharles

paladin1988

ljq867

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Titanium学习总结

报表采用WebView调用本地hmtl实现相关的报表功能

Titanium源代码：

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');


var win = Titanium.UI.createWindow({  
    title:'人员信息展示',
    backgroundColor:'#fff'
});

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

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);');	
});
win.open();

html中报表采用jquery中flot插件实现代码如下：

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Pie Examples</title>
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../js/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="../js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../js/jquery.flot.pie.js"></script>
	
<script type="text/javascript">
$(function () {
	// data
	var data = [
		{ label: "Series1",  data: 10},
		{ label: "Series2",  data: 30},
		{ label: "Series3",  data: 90},
		{ label: "Series4",  data: 70},
		{ label: "Series5",  data: 80},
		{ label: "Series6",  data: 110}
	];


	
	// GRAPH 2
$.plot($("#graph2"), data, 
{
        series: {
            pie: { 
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2/3,
                    formatter: function(label, series){
                        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                    },
                    threshold: 0.1
                }
            }
        },
        legend: {
            show: false
        }
});
	

	$("#interactive").bind("plothover", pieHover);
	$("#interactive").bind("plotclick", pieClick);

});

function pieHover(event, pos, obj) 
{
	if (!obj)
                return;
	percent = parseFloat(obj.series.percent).toFixed(2);
	$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
}

function pieClick(event, pos, obj) 
{
	if (!obj)
                return;
	percent = parseFloat(obj.series.percent).toFixed(2);
	alert(''+obj.series.label+': '+percent+'%');
}
</script>
	<style type="text/css">
		* {
		  font-family: sans-serif;
		}
		
		body
		{
			padding: 0 1em 1em 1em;
		}
		
		div.graph
		{
			width: 400px;
			height: 300px;
			float: left;
			border: "1px dashed gainsboro";
		}
		
		label
		{
			display: block;
			margin-left: 400px;
			padding-left: 1em;
		}
		
		h2
		{
			padding-top: 1em;
			margin-bottom: 0;
			clear: both;
			color: #ccc;
		}
		
		code
		{
			display: block;
			background-color: #eee;
			border: 1px dashed #999;
			padding: 0.5em;
			margin: 0.5em;
			color: #666;
			font-size: 10pt;
		}
		
		code b
		{
			color: black;
		}
		
		ul
		{
			font-size: 10pt;
		}
		
		ul li
		{
			margin-bottom: 0.5em;
		}
		
		ul.options li
		{
			list-style: none;
			margin-bottom: 1em;
		}
		
		ul li i
		{
			color: #999;
		}
	</style>
 </head>
    <body>

	<h2>Graph2</h2>
    <div id="graph2" class="graph"></div>
 </body>
</html>

分享到：

Titanium实现Menu键相关菜单实现 | Titanium对话框各种形式

2012-04-18 13:18
浏览 1997
评论(2)
分类:移动开发
查看更多

2 楼 longgangbai 2012-05-19

小威哥写道

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

貌似要收费的吧

1 楼小威哥 2012-05-16

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Titanium实现相关的报表功能

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Titanium实现相关的报表功能

评论

发表评论

相关推荐

【转】生活中的交互之小户型设计

【转】网易博客Android客户端 — native+html5移动应用混合开发实践

Phonegap开发Android版本的二维码扫码

Titanium 的Module的开发

Titanium调用小技巧

Titanium调用Google服务

Titanium实现国际化

Titanium+JQuery整合

Titanium实现Menu键相关菜单实现

Titanium对话框各种形式

Titanium数据库SQLite的使用

Titanium带Footer和Header的页面的开发

Titanium开发问题汇总

跨平台的移动开发框架介绍

【转】在Titanium开发Android应用时实现底部tabbar

Mobile UI Design Patterns: 10+ Sites for Inspiration

Titanium中SOAPClient访问SOAP协议的WebService

Titanium中Httpclient访问REST 服务

Titanium中布局类Titanium.UI.Window.layout

最近访客更多访客>>