`
longgangbai
  • 浏览: 7272815 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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对话框各种形式
评论
2 楼 longgangbai 2012-05-19  
小威哥 写道
https://marketplace.appcelerator.com/apps/2530?1334332116
上面应该是你想要的

貌似要收费的吧
1 楼 小威哥 2012-05-16  
https://marketplace.appcelerator.com/apps/2530?1334332116
上面应该是你想要的
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics