Titanium实现相关的报表功能

最新推荐文章于 2024-08-17 09:30:00 发布

longgangbai

最新推荐文章于 2024-08-17 09:30:00 发布

阅读量84

点赞数

文章标签： ui javascript ViewUI

本文链接：https://blog.csdn.net/longgangbai/article/details/84188725

版权

报表采用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>

longgangbai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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');...
复制链接

扫一扫