android 中图表展示的实现——echarts方式实现

android 中想要实现图表的展示,非常麻烦。网上查了一下实现方案,无非三种:

1.自己写画布,慢慢实现,要求太高,很难搞定。

2.用AchartEngine实现,丑陋,而且扩展性很小。

3.采用webview加载js的方式,虽然理论上会比较耗费资源,但是效果不错,而且难度小很多。

下面以一个例子具体介绍依稀这种方式:

首先布局文件:


	
		


三个按钮,一个webview,很简单的布局。
对应的Activity如下:
package com.hzbst.echartst;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{
	private Button linechart_bt;
	private Button barchart_bt;
	private Button piechart_bt;
	private WebView chartshow_wb;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
	}
	/**
	 * 初始化页面元素
	 */
	private void initView(){
		linechart_bt=(Button)findViewById(R.id.linechart_bt);
		barchart_bt=(Button)findViewById(R.id.barchart_bt);
		piechart_bt=(Button)findViewById(R.id.piechart_bt);
		linechart_bt.setOnClickListener(this);
		barchart_bt.setOnClickListener(this);
		piechart_bt.setOnClickListener(this);
		chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);
		//进行webwiev的一堆设置
		//开启本地文件读取(默认为true,不设置也可以)
		chartshow_wb.getSettings().setAllowFileAccess(true);
		//开启脚本支持
		chartshow_wb.getSettings().setJavaScriptEnabled(true);
		chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html");
	}
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.linechart_bt:
			chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);"); 
			break;
		case R.id.barchart_bt:
			chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);"); 
			break;
		case R.id.piechart_bt:
			chartshow_wb.loadUrl("javascript:createChart('pie',[89,78,77]);"); 
			break;
			default:
			break;
		}
	}
		
}

android 的代码到此就算完事了,非常简单。核心代码就是调用asset中的js文件。然后再调用的javascript函数。
采用这种方式,其实是将主要的开发量放到了javascript中了,因此需要对javascript语言有一些了解。
对应的html页面代码如下:
 
个人比较喜欢这种图表实现方式,一个非常好的地方就是测试方便。之前用AchartEngine做过一个项目,一次次的重启android,太悲剧了。


最后实现效果如下图:

android 中图表展示的实现——echarts方式实现_第1张图片

android 中图表展示的实现——echarts方式实现_第2张图片

android 中图表展示的实现——echarts方式实现_第3张图片

最后附上源码:

http://download.csdn.net/detail/huozhonbin/8551227

oschina地址:

http://git.oschina.net/wangjian/EchartAndroid






你可能感兴趣的:(移动开发)