android之基于Echart的图表

APK：http://fir.im/128j

开发环境：android studio

就是在手机上显示图表，这里使用开源的项目：ECharts ：http://echarts.baidu.com/

这个，怎么说呢，刚下载时我也是下了一跳，根本不是android项目嘛，官网下了一堆js,无语了，难道要用webview 加载？一百度，果不其然，有这位前辈：http://blog.csdn.net/huozhonbin/article/details/44781867，好像也只有这一位了

使用webview 加载 js

哎，先说一个自己犯的错误，一直在读取 android studio 下assets下的文件路径，哎呀，各种失败，后来没办法了，开始怀疑人生了，上一个项目明明使用WebView打开网页，怎么现在读取本地文件有问题，就把网址换成了百度，还是打不开，无奈了，怎么可能！都要跳起来了，猛然间发现手机没有联网，哎，这么一个低级的错误，看来以后有需要联网的，手机上还是需要判断，没有联网要么提示要么后台开启

//获取Assets目录下的文件        chartshow_wb.loadUrl("file:///android_asset/echart/echarts.html");

看一下目录：

官方的代码的 js 文件我没有导入，直接使用的远程网络资源

继续说问题，按照上一位的代码做了一个测试，发现可以访问文件，但是JS效果出不来，比如alert()方法，找了好久，忘了在哪儿找到的了，加上就好了

//js加上这个就好啦！        chartshow_wb.setWebChromeClient(new WebChromeClient() {            @Override            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {                return super.onJsAlert(view, url, message, result);            }        });

奉劝一句，写js，先在电脑端调试好了，要不问题太多，官方给的源码有问题，貌似是百度出的，我真不是黑百度

color: (function (){    var zrColor = require('zrender/tool/color');    return zrColor.getLinearGradient(        0, 0, 1000, 0,        [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]    )})(),

就是上面的代码有错误，提供的资源里没有'zrender/tool/color' 直接删掉就好了

官方提供了12种图，但是只有11种是可以用的

webview 默认是使用手机第三方或手机默认浏览器打开的，所以重写方法就可以了，

还修改了是webview可以缩放

看个效果

public class MainActivity extends Activity implements View.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.content_main);        initView();    }    /**     * 初始化页面元素     */    private void initView(){        findViewById(R.id.linechart_bt).setOnClickListener(this);        findViewById(R.id.barchart_bt).setOnClickListener(this);        findViewById(R.id.scatterchart_bt).setOnClickListener(this);        findViewById(R.id.kchart_bt).setOnClickListener(this);        findViewById(R.id.piechart_bt).setOnClickListener(this);        findViewById(R.id.radarchart_bt).setOnClickListener(this);        findViewById(R.id.chordchart_bt).setOnClickListener(this);        findViewById(R.id.forcechart_bt).setOnClickListener(this);        findViewById(R.id.mapchart_bt).setOnClickListener(this);        findViewById(R.id.gaugechart_bt).setOnClickListener(this);        findViewById(R.id.funnelchart_bt).setOnClickListener(this);        chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);        //进行webwiev的一堆设置        //开启本地文件读取（默认为true，不设置也可以）        chartshow_wb.getSettings().setAllowFileAccess(true);        //设置编码        chartshow_wb.getSettings().setDefaultTextEncodingName("utf-8");        // 设置可以支持缩放        chartshow_wb.getSettings().setSupportZoom(true);        // 设置出现缩放工具        chartshow_wb.getSettings().setBuiltInZoomControls(true);        // 清除浏览器缓存        chartshow_wb.clearCache(true);        //开启脚本支持        chartshow_wb.getSettings().setJavaScriptEnabled(true);        //  放在 assets目录        //获取Assets目录下的文件        chartshow_wb.loadUrl("file:///android_asset/echart/echarts.html");//        chartshow_wb.loadUrl("file:///android_asset/test/echarts.html");//        chartshow_wb.loadUrl("file:///android_asset/test/index.html");//        chartshow_wb.loadUrl("http://www.baidu.com");        //在当前页面打开链接了        chartshow_wb.setWebViewClient(new WebViewClient() {            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        });        //js加上这个就好啦！        chartshow_wb.setWebChromeClient(new WebChromeClient() {            @Override            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {                return super.onJsAlert(view, url, message, result);            }        });    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.linechart_bt:                chartshow_wb.loadUrl("javascript:createChart('line',[]);");//                chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);");//                chartshow_wb.loadUrl("javascript:wave();");                break;            case R.id.barchart_bt:                chartshow_wb.loadUrl("javascript:createChart('bar',[]);");//                chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);");                break;            case R.id.scatterchart_bt:                chartshow_wb.loadUrl("javascript:createChart('scatter',[]);");                break;            case R.id.kchart_bt:                chartshow_wb.loadUrl("javascript:createChart('k',[]);");                break;            case R.id.piechart_bt:                chartshow_wb.loadUrl("javascript:createChart('pie',[]);");                break;            case R.id.radarchart_bt:                chartshow_wb.loadUrl("javascript:createChart('radar',[]);");                break;            case R.id.chordchart_bt:                chartshow_wb.loadUrl("javascript:createChart('chord',[]);");                break;            case R.id.forcechart_bt:                chartshow_wb.loadUrl("javascript:createChart('force',[]);");                break;            case R.id.mapchart_bt:                chartshow_wb.loadUrl("javascript:createChart('map',[]);");                break;            case R.id.gaugechart_bt:                chartshow_wb.loadUrl("javascript:createChart('gauge',[]);");                break;            case R.id.funnelchart_bt:                chartshow_wb.loadUrl("javascript:createChart('funnel',[]);");                break;            default:                break;        }    }    @Override//设置回退 在页面内回退//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法    public boolean onKeyDown(int keyCode, KeyEvent event) {        if ((keyCode == KeyEvent.KEYCODE_BACK) && chartshow_wb.canGoBack()) {            chartshow_wb.goBack(); //goBack()表示返回WebView的上一页面            return true;        }//        finish();//结束退出程序//        return false;        return super.onKeyDown(keyCode,event);    }}

这个代码实在是太长啦 html 文件贴上没意思，给一个我测试用的index.html

module源码：http://download.csdn.net/detail/i_do_can/9395027

更多相关文章

随机推荐