HTML文件不讀書的JavaScript文件數組作爲輸入

這是我的app.js文件HTML文件不讀書的JavaScript文件數組作爲輸入

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文件，以便餅圖可以檢測數組並自行繪製，但現在問題在於它沒有顯示我輸入的正確數據。它只會跟蹤全局變量（''）而不是我輸入的那個。對不起，長時間的編碼，即時通訊仍然是新的，這是我知道如何創建一個表的唯一方法。

來源

2013-04-16 Emmanuel

這是太多代碼通過，濃縮它，然後我可以嘗試和幫助。 –

您是否嘗試過使用[原生圖表模塊？]（https://github.com/appcelerator/titanium_modules/tree/master/charts） –

我會試一試，對不起長時間的帖子..原因即時我擔心，如果我縮短它，我可能錯過了一些嘗試提供給每個人的東西.. – Emmanuel

我沒有通過所有的代碼去（有太多），但我這樣做，你這樣做的通知：

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]+"';"); 
});

的load事件後，您不能調用網頁視圖，直到evalJS已經被解僱了，evalJS只有在頁面上有一個已經被加載的DOM的頁面時才能正常工作，所以這不會做任何事情。您只需在load事件中調用evalJS。

來源

2013-04-17 02:41:40

所以我的意思是從'beforeload'改變爲'load'？ – Emmanuel

是的，否則這些evalJS命令都不會有任何效果 –

HTML文件不讀書的JavaScript文件數組作爲輸入

回答

相關問題