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>