これは私のapp.jsファイルです
var earn=[' ',' ',' ',' ',' '];
var lost=['50','60','100','40','20'];
var Break=['40','30','90','90','40'];
var win = Titanium.UI.createWindow({
backgroundColor: 'white'
});
var lbl1 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
top:0,
left:0,
borderWidth: 2,
borderColor: 'black',
});
var lbl2 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Earn',
height:'5%',
width:'10%',
top:'5%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl2);
var lbl3 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:'Lost',
height:'5%',
width:'10%',
top:'10%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl3);
var lbl4 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Break',
height:'5%',
width:'10%',
top:'15%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl4);
var lbl5 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Jan',
height:'5%',
width:'10%',
top:0,
left:'10%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl5);
var textfield1 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[0],
height:'5%',
width:'10%',
top:'5%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield1);
var lbl7 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[0],
height:'5%',
width:'10%',
top:'10%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl7);
var lbl8 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[0],
height:'5%',
width:'10%',
top:'15%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl8);
var lbl9 = Ti.UI.createLabel({
text:'Feb',
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
left:'20%',
top:'0%',
color:'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl9);
var textfield2 = Ti.UI.createTextField({
backgroundColor: 'white',
value:earn[1],
height:'5%',
width:'10%',
top:'5%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield2);
var lbl11 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:lost[1],
height:'5%',
width:'10%',
top:'10%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl11);
var lbl12 = Ti.UI.createLabel({
backgroundColor: 'white',
text:Break[1],
height:'5%',
width:'10%',
top:'15%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl12);
var lbl13 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'March',
height:'5%',
width:'10%',
top:0,
left:'30%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl13);
var textfield3 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[2],
height:'5%',
width:'10%',
top:'5%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield3);
var lbl15 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[2],
height:'5%',
width:'10%',
top:'10%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl15);
var lbl16 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[2],
height:'5%',
width:'10%',
top:'15%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl16);
var lbl17 = Ti.UI.createLabel({
text:'Apr',
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
left:'40%',
top:'0%',
color:'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl17);
var textfield4 = Ti.UI.createTextField({
backgroundColor: 'white',
value:earn[3],
height:'5%',
width:'10%',
top:'5%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield4);
var lbl19 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:lost[3],
height:'5%',
width:'10%',
top:'10%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl19);
var lbl20 = Ti.UI.createLabel({
backgroundColor: 'white',
text:Break[3],
height:'5%',
width:'10%',
top:'15%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl20);
var lbl21= Ti.UI.createLabel({
backgroundColor: 'white',
text:'May',
height:'5%',
width:'10%',
top:0,
left:'50%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl21);
var textfield5 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[4],
height:'5%',
width:'10%',
top:'5%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield5);
var lbl23 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[4],
height:'5%',
width:'10%',
top:'10%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl23);
var lbl24 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[4],
height:'5%',
width:'10%',
top:'15%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl24);
var btn = Ti.UI.createButton({
title: 'Bar Chart',
bottom: '5%',
left: '2%',
width: '10%'
});
btn.addEventListener('click', function(e)
{
win.remove(layer);
win.add(webview);
});
//win.add(webview);
var btn1 = Ti.UI.createButton({
title: 'Pie Chart',
bottom: '12%',
left: '2%',
width: '10%'
});
btn1.addEventListener('click', function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
alert(earn[0]);
win.add(layer);
win.remove(webview);
});
var webview = Titanium.UI.createWebView({
url:'chart.html',
top: '25%',
left: '12%',
});
webview.addEventListener('beforeload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});
var layer = Ti.UI.createView({
top: '25%',
left: '12%',
bottom: '0%',
});
//win.add(layer);
var wbv1 = Ti.UI.createWebView({
url:'pie1.html',
top: '0%',
left: '0%',
right:'67%',
//bottom: 0,
});
wbv1.addEventListener('afterload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});
layer.add(wbv1);
var wbv2 = Ti.UI.createWebView({
url:'pie2.html',
top: '0%',
left: '33%',
right:'33%',
//bottom: 0,
});
layer.add(wbv2);
var wbv3 = Ti.UI.createWebView({
url:'pie3.html',
top: '0%',
left: '67%',
right:'0%',
//bottom: 0,
});
layer.add(wbv3);
win.add(btn1);
win.add(btn);
win.add(lbl1);
win.open();
これは私の pie1.html です
<html>
<head>
<title> Earn </title>
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="app.js" type="text/javascript"></script>
<meta name="viewport" content="user-scalable=0">
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
document.ontouchmove = function(event){
event.preventDefault();
}
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(5);
dataTable.addColumn('number');
dataTable.setValue(0, 0, +earn[0]);
dataTable.setValue(1, 0, +earn[1]);
dataTable.setValue(2, 0, +earn[2]);
dataTable.setValue(3, 0, +earn[3]);
dataTable.setValue(4, 0, +earn[4]);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart'));
var options = {
chxs: '0,000000,11.5', //size of the pie
chxt: 'x',
chs: '360x265', //size of pie
cht: 'p',
chco: 'FF9900', //color of the pie
chd: 's:9flxY',
chdl: earn[0]+'|'+earn[1]+'|'+earn[2]+'|'+earn[3]+'|'+earn[4],
chl: 'Jan|Feb|March|Apr|May',
chma: '25',
chtt: 'Earn',
chts: '000000,14.5',
bottom: '0', //word size of the pie
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
/* document.body.addEventListener('touchmove', function(e) {
// This prevents native scrolling from happening.
we e.preventDefault();
}, false);*/
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</body>
</html>
テーブルの入力データとして最初のパイを試し、配列をhtmlファイルに渡して、パイが配列を検出してプロット自体をプロットできるようにしますが、入力した正しいデータが表示されないという問題があります。グローバル変数を (' ') 入力の代わりに何もトレースしません。長いコーディングで申し訳ありませんが、私はまだ新しいです。それがテーブルの作成方法を知っている唯一の方法です。