Android 中使用 ichartjs 完成图表的展示

jopen 11年前

Android 中使用 ichartjs 完成图表的展示

  1. http://www.ichartjs.com/

   ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形.ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案  ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

 2. 下载ichartjs放入android工程中如下图所示位置:<br>
    2.png

  

 3. 新建一个html文件:index.html 

<!doctype html>  <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, user-scalable=no" target-densitydpi="device-dpi"/>   <title>Document</title>   <script src="file:///android_asset/ichart.1.2.min.js" type="text/javascript" charset="utf-8" > </script>   <script type="text/javascript" charset="utf-8" >   </script>  </head>    <body onload="javascript:myObject.init()">   <div id='canvasDiv'></div>  </body>    <script type="text/javascript" charset="utf-8" >      var mdata;   var w;   var h;      function setContactInfo(data)         {                mdata= eval(data);   //通过eval方法处理得到json对象数组                w=window.myObject.getW();              h=window.myObject.getH();              execute();       }      function execute(){     var chart = new iChart.Column2D({     render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID     data: mdata,//绑定数据     width : w,//设置宽度，默认单位为px     height : h-40,//设置高度，默认单位为px     // shadow:true,//激活阴影     // shadow_color:'#c7c7c7',//设置阴影颜色     border:0,     animation_timing_function:'easeIn',     coordinate:{//配置自定义坐标轴      scale:[{//配置自定义值轴        position:'left',//配置左值轴         start_scale:0,//设置开始刻度为0        end_scale:26,//设置结束刻度为26        scale_space:2,//设置刻度间距        listeners:{//配置事件        parseText:function(t,x,y){//设置解析值轴文本         return {text:t+" cm"}        }       }      }]     },     sub_option:{      listeners:{          click:function(r,e,m){        window.myObject.setValue(r.get('name'),r.get('value'));       }      }     }    });    //调用绘图方法开始绘图    chart.draw();   }        </script>  </html>

    4.在activity中对webview做一些简单的设置 

       @Override   protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);      webView = (WebView) findViewById(R.id.webView1);      webView.setHorizontalScrollBarEnabled(true);    webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET);      WebSettings settings = webView.getSettings();      // 设置字符集编码    settings.setDefaultTextEncodingName("UTF-8");    settings.setPluginsEnabled(true);    // 开启JavaScript支持    settings.setJavaScriptEnabled(true);    settings.setSupportZoom(true);    settings.setBuiltInZoomControls(true);    webView.addJavascriptInterface(new JSinterface(this, handler, webView), "myObject");    // 加载assets目录下的文件    String url = "file:///android_asset/index.html";    webView.loadUrl(url);   }

 5.最为关键的,js与java代码之间的交互 

package com.chart.test;    import java.util.Random;    import org.json.JSONArray;  import org.json.JSONException;  import org.json.JSONObject;    import android.content.Context;  import android.os.Handler;  import android.util.Log;  import android.webkit.WebView;  import android.widget.Toast;    class JSinterface {     private Context  mContext = null;   private Handler  mHandler = null;   private WebView  mView;     private JSONArray jsonArray = new JSONArray();   private Random  random  = new Random();     public JSinterface(Context context, Handler handler, WebView webView) {    mContext = context;    mHandler = handler;    mView = webView;   }     public void init() {    // 通过handler来确保init方法的执行在主线程中    mHandler.post(new Runnable() {       public void run() {      // 调用客户端setContactInfo方法      mView.loadUrl("javascript:setContactInfo('" + getJsonStr() + "')");     }    });   }     public int getW() {    return px2dip(mContext.getResources().getDisplayMetrics().widthPixels);   }     public int getH() {    return px2dip(mContext.getResources().getDisplayMetrics().heightPixels);   }     public int px2dip(float pxValue) {    final float scale = mContext.getResources().getDisplayMetrics().density;    return (int) (pxValue / scale + 0.5f);   }     public void setValue(String name, String value) {    Toast.makeText(mContext, name+" "+value+"%", Toast.LENGTH_SHORT).show();   }     public String getRandColorCode() {    String r, g, b;    Random random = new Random();    r = Integer.toHexString(random.nextInt(256)).toUpperCase();    g = Integer.toHexString(random.nextInt(256)).toUpperCase();    b = Integer.toHexString(random.nextInt(256)).toUpperCase();      r = r.length() == 1 ? "0" + r : r;    g = g.length() == 1 ? "0" + g : g;    b = b.length() == 1 ? "0" + b : b;      return "#" + r + g + b;   }     public String getJsonStr() {    try {       for (int i = 0; i < 10; i++) {      JSONObject object1 = new JSONObject();      object1.put("name", "name" + i);      object1.put("value", random.nextInt(30));      object1.put("color", getRandColorCode());      jsonArray.put(object1);     }     Log.i("", jsonArray.toString());     return jsonArray.toString();    } catch (JSONException e) {     e.printStackTrace();    }    return null;   }  }