在項目中經常會有一些圖形報表的功能，對於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中，
-
<!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代碼
-
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報表框架，在這里拋磚引玉希望有更多高手指出其中的不足之處，能夠一起討論學習，共同進步。