私は Titanium Studio でアプリを作成しており、webView と Google Charts を使用してデータを視覚化しようとしました。データは次のように 2 次元配列になっています。
[["Tendency","Number of Answers"],["Item one", 2],["Item two", 5]]
これは、データを渡すために使用するコードです。
function Graph(data){
var chart = Ti.UI.createWebView({
url: "/results.html",
width: Ti.UI.SIZE,
height: "auto",
top: 110
});
for (var i=0, l=data.length; i<l; i++){
if (data[i] instanceof Array) data[i] = data[i].join(";");
}
var syndata = data.join("@");
chart.addEventListener('beforeload',function(e){
chart.evalJS("var syndata ='"+syndata+"';");
});
this.chart = chart;
return;
};
module.exports = Graph;
いろいろなデータを渡してみたところ、文字列しか動かないことがわかったので、配列を「Tendecy;回答数@項目1;2@....」の文字列に変換しました。それを再び配列に追加し、チャートに読み込みます。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var dt = syndata.split("@");
for(var i = 0, l = dt.length; i<l; i++) dt[i] = dt[i].split(";");
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(d) {
var data = google.visualization.arrayToDataTable(d);
var options = {
title: 'Overview',
chartArea:{left:5,top:5,width:"100%",height:"100%"}
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.setOnLoadCallback(function(){ drawChart(dt) });
</script>
ただし、「その他」という項目が 1 つある灰色のグラフしか表示されません。配列をファイルに直接貼り付けてそこから参照するとうまくいきます... 間違いがないかresults.htmlから直接Ti.API.infoで配列を出力してみましたが、すべて問題ないようです。何か案は？