将数组从.js文件传递到.html文件

时间:2013-04-24 07:53:50

标签: android charts titanium pie-chart

我正在使用Titanium Studio中的一些额外插件为Android设备创建一个饼图,这是我的app.js

var earn=[' ',' '];
var textfield1 = Ti.UI.createTextField({
    value:earn[0],
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
});
win.add(textfield1);
var textfield2 = Ti.UI.createTextField({
    value:earn[1],
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
});
win.add(textfield2);
var webview = Titanium.UI.createWebView({
 url: 'chart.htm'
});
win.add(webview);

这是我的chart.htm

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>

<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>

<script type="text/javascript">
var p = new pie();
p.add("Jan",100);
p.add("Feb",200);
p.render("pieCanvas", "Pie Graph")

</script>

如果我使用数组“赚[0]”作为我的“Jan”如何从app.js文件中调用数组?当我将值“100”更改为“获得[0]”时,饼图将不会显示。帮助

2 个答案:

答案 0 :(得分:1)

试试这个:

App.js

var earn = [100, 200];

var textfield1 = Ti.UI.createTextField({
    value: earn[0],
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield1);

var textfield2 = Ti.UI.createTextField({
    value: earn[1],
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield2);

var webview = Titanium.UI.createWebView({
    url: 'chart.htm'
});
win.add(webview);

webView.addEventListener('load', function (e) {
    webview.evalJS('createPie(earn);');
});

Chart.htm

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>

<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>

<script type="text/javascript">
function createPie(arr) {
    var p = new pie();
    p.add("Jan", arr[0]);
    p.add("Feb", arr[1]);
    p.render("pieCanvas", "Pie Graph");
}
</script>

查看此链接以获取更多帮助: http://developer.appcelerator.com/question/73121/passing-variable-from-titanium-js-class-to-html-script-

答案 1 :(得分:0)

如果您要更改文本字段,则earn数组将不会动态更新。您必须侦听texfields触发更改事件的时间,捕获该事件并获取新值,现在您可以更新饼图。

要使其更新图表,只要有人更改了texfields中的值,您需要执行此操作:

/* app.js */
var textfield1 = Ti.UI.createTextField({
    value:' ',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
});
/* This is the important part */
textfield1.addEventListener('change', function(e) {
    var earn = [textfield1.value, textfield2.value];
    webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});

var textfield2 = Ti.UI.createTextField({
    value:' ',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
});
/* This is the important part */
textfield2.addEventListener('change', function(e) {
    var earn = [textfield1.value, textfield2.value];
    // DO this
    webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});

var webview = Titanium.UI.createWebView({
 url: 'chart.htm'
});

// Add views
win.add(textfield1);
win.add(textfield2);
win.add(webview);

在你的HTML中(我从Mohit精心设计的HTML中获取):

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>

<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>

<script type="text/javascript">
function createPie(arr) {
    var earn = eval(arr); // convert from JSON string to JS, alternatively use JSON.parse
    var p = new pie();
    p.add("Jan", earn[0]);
    p.add("Feb", earn[1]);
    p.render("pieCanvas", "Pie Graph");
}
</script>

现在你有了骨头,你可能不得不乱用createPie()函数,查看Mohit发送的链接,这里有详细的说明。