Fatal编程技术网
  • charts/
  • Charts Html文件未从javascript文件中读取数组作为输入

Charts Html文件未从javascript文件中读取数组作为输入

charts titanium

Charts Html文件未从javascript文件中读取数组作为输入,charts,titanium,Charts,Titanium,这是我的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: '#CED

这是我的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>


赚
document.ontouchmove=函数（事件）{
event.preventDefault（）；
}
var queryString=''；
var dataUrl=''；
函数onLoadCallback（）{
如果（dataUrl.length>0）{
var query=newgoogle.visualization.query（dataUrl）；
query.setQuery（queryString）；
发送（handleQueryResponse）；
}否则{
var dataTable=new google.visualization.dataTable（）；
dataTable.addRows（5）；
dataTable.addColumn（'number'）；
设置值（0,0，+earn[0]）；
设置值（1,0，+earn[1]）；
设置值（2,0，+earn[2]）；
dataTable.setValue（3,0，+earn[3]）；
dataTable.setValue（4,0，+earn[4]）；
绘制（数据表）；
}
}
函数绘图（数据表）{
var vis=new google.visualization.ImageChart（document.getElementById（'chart'）；
变量选项={
chxs:'0000000,11.5'，//饼图的大小
chxt:'x'，
chs:'360x265'，//饼的大小
红隧:"p",，
chco:'FF9900'，//馅饼的颜色
chd:'s:9flxY'，
chdl:earn[0]+'.''.'+earn[1]+'.''.'+earn[2]+'.''.'+earn[3]+'.''.'+earn[4]，
chl:“一月|二月|三月|四月|五月”，
chma:'25'，
chtt:“赚”，
chts:'000000，14.5'，
底部：“0”，//饼图的字数
};
vis.draw（数据表、选项）；
}
函数handleQueryResponse（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
绘制（response.getDataTable（））；
}
/*document.body.addEventListener（'touchmove'，函数（e）{
//这可以防止发生本机滚动。
我们e.预防违约（）；
}，假）*/
load（“可视化”、“1”，{packages:[“imagechart”]}）；
setOnLoadCallback（onLoadCallback）；
我正在尝试将我的第一个饼图作为表上的输入数据，并将数组传递到html文件，以便饼图可以检测数组并自行绘制，但现在的问题是，它没有显示我输入的正确数据。它只会将全局变量作为（“”）nothing而不是我输入的变量进行跟踪。抱歉，代码太长了，我还是新的，这是我知道如何创建表的唯一方法。

我没有通读您的所有代码（代码太多），但我注意到您这样做了：

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
事件触发后才能在webview上调用evalJS，evalJS仅在具有DOM的页面首先加载时才起作用，因此这不会起任何作用。你只需要在加载事件时调用evalJS。

这是太多的代码，请压缩它，然后我可以尝试帮助你。你是否尝试过使用我会尝试一下，很抱歉发布了这么长的帖子。。因为我担心如果我缩短它，我可能会错过一些试图传递给每个人的东西。这意味着我将事件从“beforeload”更改为“load”？是的，否则这些evalJS命令都不会有任何效果