android ichart ColumnStacked2D圖表無法顯示解決方案
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
</style>
<script type="text/javascript" src="ichart.latest.min.js"></script>
<script type="text/javascript">
var width = window.chart.getWidth();
var height = window.chart.getHeight();
var data = new Array();
var contact = window.mainActivity.getContact();
eval('data='+contact);
var days=new Array();
var day=window.mainActivity.getTimes();
eval('days='+day);
$(function(){
var chart = new iChart.ColumnStacked2D({
render : 'canvasDiv',
data: data,
align:'center',
labels:days,
padding:'30 0 20 10',
width : width,
height : height,
background_color : '#ffffff',
sub_option:{
label:{color:'#eeeeee',fontsize:28,fontweight:600},
border : false
},
animation_duration:250,
label:{color:'#000000',fontsize:30,fontweight:600},
legend:{
align:'center',
valign:'top',
sign_size:20,
row:1,
column:2,
legend_space:20,
enable:true,
background_color : null,
line_height:40,
color:'#000000',
fontsize:30,
fontweight:600,
border : {
enable : false
}
},
coordinate:{
background_color : 0,
grid_color:'#888888',
axis : {
width : [0, 0, 3, 3]
},
scale:[{
position:'left',
scale_enable : false,
label:{color:'#000000',fontsize:30,fontweight:600}
}],
width:'80%',
height:'76%'
}
});
//利用自定義元件構造左上側單位
chart.plugin(new iChart.Custom({
drawFn:function(){
//計算位置
var coo = chart.getCoordinate(),
x = coo.get('originx'),
y = coo.get('originy');
//在左上側的位置，渲染一個單位的文字
chart.target.textAlign('start')
.textBaseline('bottom')
.textFont('600 30px Verdana')
.fillText('用電 / 度',x-70,y-30,false,'#000000')
}
}));
chart.draw();
});
</script>
</head>
<body>
<div id='canvasDiv'></div>
</body>
</html>
xml
<WebView
android:id="@+id/velec_cashback_web"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:scrollbarSize="0dip" >
</WebView>
程式碼
WebSettings webSettings = webView.getSettings();
// 設定該WebView可以縮放
webSettings.setBuiltInZoomControls(false);
// 設定該WebView可以執行JavaScript程式
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setSupportZoom(false);
webSettings.setLightTouchEnabled(true);
// 水平顯示
webView.setHorizontalScrollBarEnabled(true);
// 垂直顯示
webView.setVerticalScrollBarEnabled(true);
webView.addJavascriptInterface(this, "mainActivity");
webView.addJavascriptInterface(getChartAdapt(), "chart");
try {
JSONArray array = new JSONArray(data);
if (array.length() >= 1) {
webView.loadUrl("file:///android_asset/listVelecCashBack.html");
} else {
webView.loadUrl("file:///android_asset/error.html");
}
} catch (JSONException e) {
Log.e(LOGTAG, e.getMessage());
}
首次載入圖表基本無法顯示，一片空白，偶爾能載入成功。
但在onResume時webView.reload()就能顯示出圖表，不知道什麼原因，
因此用timer做了延時載入的操作
webView.removeAllViews();
timer = new Timer();
task = new TimerTask() {
@Override
public void run() {
webView.reload();
}
};
timer.schedule(task, 500);
問題暫時得到解決，有沒有大神知道原因，煩請“吱”一聲