«

android ichart ColumnStacked2D图表无法显示解决方案

时间:2024-3-2 19:31     作者:韩俊     分类: Android


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);

问题暂时得到解决,有没有大神知道原因,烦请“吱”一声


        <p>版权声明:本文为博主原创文章,未经博主允许不得转载。</p>

标签: android

热门推荐