webview加载js图形报表

在项目中经常会有一些图形报表的功能,对于android的图形报表的实现,可以利用一些开源的android图形报表框架如:achartengine,hellocharts, MPAndroidChar等,这些框架虽然实现的很好,但在实际项目我们需要的图形报表是有设计师设计的,可能我们需要效果这些框架没有提供,或是提供的样式不符合我们的需求,这时候需要我们去修改这些框架,更改它的样式,这就要求我们需要熟悉这些框架的源码,能够举一反三的去修改它,然而说起来简单, 真正改起来并不容易,当然我们也可以自定义view通过绘图来实现,这种方式是最灵活的,但同样自己会绘制一个图形控件也不是能够简单的能够搞定,那么我们改如何能够快速的实现项目中的这些图形报表呢,其实,在web网站的开发中也会经常有各种图形报表的功能,针对这些已经有很多简单易用,功能丰富多样的图形报表框架,那么我们为何不通过webview来调用这些js图形报表框架呢,

下面介绍下如何通过webview来加载一个个人认为比较好些的图形报表框架highcharts(不熟悉的人百度搜索highcharts):

首先介绍下我要实现的效果:如下图,要实现一个区域统计图效果的报表。

首先登陆highcharts (http://www.hcharts.cn/demo/)在线演示平台,通过这平台可以看到highcharts提供了很多效果的图形报表,找到我们需要效果:曲线区域图

如上图 提供的效果与我们需要的效果已经很类似,但还是有些差别,别急, 现在去修改它,修改的同时学会它的使用。如图,点击编辑代码。

如图,左侧是控制报表效果的js代码,我们主要是修改这些代码,这些js代码的方法属性我们也许不熟悉,但没关系,我们可以便尝试修改预览可以明白这些属性是干什么用的。对于类似的图形报表我们经常关注的有 x轴,y轴坐标标注,数据集等实现,阅读左侧的js代码我们发现,只有series节点是设置数值数值,我们不妨猜测我们可以通过修改series节点里,data的值达到修改区域图的y轴对应的值,如图我注释调一个数据对象,点击“运行” 发现 果然只有一条曲线区域图了,修改同时也发现通过修改data对应的值确实是修改区域图的关键点的值了,其它的属性也可以通过尝试学会使用,当然这中方法使用不了解highcharts的人员简单来学习集成highcharts图形报表,如果真正学会highcharts还是需要去通过官方API文件去了解每个属性的用法。

好了,我们已经大概了解highcharts的样子,在实际的项目中,data部分数据肯定是动态,横坐标的星期也有可能是动态的,那么我们改如何来着做呢

html代码:将左侧的data的数据等于成变量,这些变量通过webview接口从android代码传递到js中,

  1. <!doctype html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
      <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
    <script type="text/javascript">
    var result = window.Android.getResult();//调用android中的方法,取得从android传递过来的数据
    //alert("result="+result);
    var jsonData = eval("(" + result + ")"); //将json字符串数据转换为jsonObject对象
    //alert("jsonData="+jsonData);
    var xText = jsonData.xtext;//解析xtext节点数据
    //alert("xText="+xText);
    var data = jsonData.data;
    //alert("data="+data);
    var xdata = jsonData.xdata;
    //alert("xdata="+xdata);
    $(function () {
        $(‘#container‘).highcharts({
            chart: {
                type: ‘areaspline‘
            },
            title: {
                text: ‘收费统计‘
            },
            legend: {
                layout: ‘vertical‘,
                align: ‘left‘,
                verticalAlign: ‘top‘,
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ‘#FFFFFF‘
            },
            xAxis: {
             title: {
                    text: xText
                },
                categories:xdata,
                plotBands: [{ // visualize the weekend
                    from: 4.5,
                    to: 6.5,
                    //color: ‘rgba(68, 170, 213, .2)‘
                    color: ‘rgba(68, 255, 0, 0)‘
                }]
            },
            yAxis: {
                title: {
                    text: ‘收费‘
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ‘ units‘
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                areaspline: {
                    fillOpacity: 0.5
                }
            },
            series: [{
                name: ‘收费‘,
                data: data
            }]
        });
    });
      </script>
      <style>
        body{margin:0;padding:0;}
      </style>
    </head>
    <body>
      <div id="container" style="width:100%;height:400px"></div>
    </body>
    </html>  

将上面的代码保存到一个html文件中,拷贝放到工程assets目录下:

下面代码介绍如何通过 webview将参数传递给js

java代码

  1. private void initWebView() {
            activity = this;
            webview.setVisibility(View.VISIBLE);
            WebSettings webSettings = webview.getSettings();
            url = "file:/android_asset/index3.html";
            // 支持JS
            webSettings.setJavaScriptEnabled(true);
            webSettings.setDisplayZoomControls(false); // 隐藏webview缩放按钮
            webview.addJavascriptInterface(new JsInteration(),
                    "Android");
            webview.setWebChromeClient(new WebChromeClient() {
            });
            // 设置进度条
            webview.setWebChromeClient(new WebChromeClient() {
                public void onProgressChanged(WebView view, int progress) {
                    activity.setTitle("小弟正在努力加载中...");
                    activity.setProgress(progress * 100);
                    if (progress == 100)
                        activity.setTitle(R.string.app_name);
                }
            });
            webview.setWebViewClient(new WebViewClient() {
                public void onReceivedError(WebView view, int errorCode,
                        String description, String failingUrl) { // Handle the error
                }
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url2) {
                    if (Uri.parse(url2).getHost().equals(url)) {
                        // Load the site into the default browser
                        Intent intent = new Intent(Intent.ACTION_VIEW, Uri
                                .parse(url));
                        startActivity(intent);
                        return true;
                    }
                    // 1:返回false: Load url into the webview
                    // 2:返回true:已浏览器方式
                    return false;
                }
            });
            webview.loadUrl(url);
        }
        private String showtype;
        public class JsInteration {
            @JavascriptInterface
            public String getResult() {
                JSONObject jsonObject = new JSONObject();
                try {
                    JSONArray jsonArray1 = new JSONArray();
                    JSONArray jsonArray2 = new JSONArray();
                    for (int j = 0; j < list2.size(); j++) { //这里的list2是通过接口从服务器取得的数据集合
                        StatisticsChartInfo statisticsChartInfo = list2.get(j);
                        jsonArray1.put(statisticsChartInfo.getCurrtime());
                        jsonArray2.put(Double.valueOf(statisticsChartInfo
                                .getRevenue()));
                    }
                    jsonObject.put("xtext", xtext);
                    jsonObject.put("xdata", jsonArray1);
                    jsonObject.put("data", jsonArray2);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                LogUtil.d("传递的数据=" + jsonObject.toString());
                return jsonObject.toString();
            }
        }
        @Override
        protected void onDestroy() {
            // TODO Auto-generated method stub
            super.onDestroy();
            if (webview!= null) {
                webview.destroy();
            }
        }  

好了,到此为止,我们了解如何通过webview简单的加载js报表框架,在这里抛砖引玉希望有更多高手指出其中的不足之处,能够一起讨论学习,共同进步。

时间: 2024-10-08 19:02:49

webview加载js图形报表的相关文章

[iOS开发]WKWebView加载JS

最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo. 先看我写的代码,然后再来看WKWebView跟UIWebView的区别: 首先,遵循这两个协议WKNavigationDelegate,WKScriptMessageHandler. 接着,获取JS文本. JS交互 - (void)getJS { NSString * js = @"window.webkit.messageHandlers.obser

WebView 加载网页和java 与js交互

[mw_shl_code=java,true]WebView是一个可以显示网页的控件.需求:通过WebView加载assets下的html文件.实现页面的缩放.向menu键添加:前进.后退和刷新,实现对网页的操作点击网页中的链接,仍然使用本WebView浏览器,而非调用系统的浏览器网页中有button,点击button,调用android的Toast点击WebView隐藏地址栏和button,点击menu键显示地址栏和button.WebView加载网页的方式WebView webview =

Android WebView加载本地html并实现Java与JS交互

最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析

Android Webview 加载外部html时选择加载本地的js,css等资源文件

在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来加载本地资源.在API 21又将这个方法弃用了,是重载一个新的shouldInterceptRequest,

转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来

android中webView加载H5,JS不能调用问题的解决

使用了html5 页面,使用webView加载后发现 超链接的锚点不可以用 为webView设置下面两句就好了: mWebView.getSettings().setDomStorageEnabled(true);mWebView.getSettings().setDatabaseEnabled(true); 原文地址:https://www.cnblogs.com/netcorner/p/8207212.html

WebView加载HTML图片大小自适应与文章自动换行

http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题.所以后台很多时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为

ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度

1 .ios navigationcontroller 滑动返回 滑动返回是navigationcontroller默认返回按钮自带的功能,如果返回按钮自定义该功能失效, 解决的办法有两个: ① self.navigationItem.backBarButtonItem =   [[UIBarButtonItem alloc]initWithCustomView:button];//这个方法用不了 只能用 self.navigationItem.backBarButtonItem = [ [UI

webview加载网页与全屏播放视频?

上篇我们大致了解了webview的一些属性,以及重要的方法.这篇我们就要一些案列来说明,一般webview最广泛的作用就是,加载一个html的网页(实现与js交互),,webview加载网页网页当中含有视频,webview文件下载等等. 首先我们来了解下webview是如何加载网页的?首先我们看下网页在家的效果? 代码也是比较简单 1 package cn.xiao.webviewplayvideo; 2 import android.app.Activity; 3 import android