android上动态实现ichartjs的绘图 2D 3D 折线图 柱形图 圆形图 等等

项目目录:

 

 

Contact.java

 

[java][/java] view plaincopy

  1. package com.example.html5_chart;
  2. public class Contact {
  3.     private String name;
  4.     private double value;
  5.     private String color;
  6.     public Contact(String name, double value, String color) {
  7.         super();
  8.         this.name = name;
  9.         this.value = value;
  10.         this.color = color;
  11.     }
  12.     public String getName() {
  13.         return name;
  14.     }
  15.     public void setName(String name) {
  16.         this.name = name;
  17.     }
  18.     public double getValue() {
  19.         return value;
  20.     }
  21.     public void setValue(double value) {
  22.         this.value = value;
  23.     }
  24.     public String getColor() {
  25.         return color;
  26.     }
  27.     public void setColor(String color) {
  28.         this.color = color;
  29.     }
  30. }

 

 

ContactService.java

[java][/java] view plaincopy

  1. package com.example.html5_chart;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. public class ContactService {
  5.     public List<Contact> getContacts(){
  6.         List<Contact> contacts = new ArrayList<Contact>();
  7.         contacts.add(new Contact(“IE”, 32.85, “#a5c2d5”));
  8.         contacts.add(new Contact(“Chrome”, 45.55, “#cbab4f”));
  9.         contacts.add(new Contact(“FireFox”, 40.25, “#76a871”));
  10.         contacts.add(new Contact(“Safari”, 6.85, “#a56f8f”));
  11.         contacts.add(new Contact(“Other”, 1.23, “#6f83a5”));
  12.         return contacts;
  13.     }
  14. }

 

 

MainActivity.java

[java][/java] view plaincopy

  1. package com.example.html5_chart;
  2. import java.util.List;
  3. import org.json.JSONArray;
  4. import org.json.JSONException;
  5. import org.json.JSONObject;
  6. import android.os.Bundle;
  7. import android.app.Activity;
  8. import android.content.Context;
  9. import android.util.Log;
  10. import android.view.Menu;
  11. import android.webkit.WebView;
  12. public class MainActivity extends Activity {
  13.     private static final String TAG = “MainActivity”;
  14.     private ContactService contactService;
  15.     private WebView webView;
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState) {
  18.         super.onCreate(savedInstanceState);
  19.         setContentView(R.layout.activity_main);
  20.         contactService = new ContactService();
  21.         webView = (WebView)findViewById(R.id.webView);
  22.         webView.getSettings().setJavaScriptEnabled(true);
  23.         webView.getSettings().setBuiltInZoomControls(true);
  24.         webView.addJavascriptInterface(this, TAG);
  25.         webView.loadUrl(“file:///android_asset/3dchart.html”);
  26.     }
  27.     public String getContacts(){
  28.         List<Contact> contacts = contactService.getContacts();
  29.         String json = null;
  30.         try {
  31.             JSONArray array = new JSONArray();
  32.             for (Contact contact:contacts) {
  33.                 JSONObject object = new JSONObject();
  34.                 object.put(“name”, contact.getName());
  35.                 object.put(“value”, contact.getValue());
  36.                 object.put(“color”, contact.getColor());
  37.                 array.put(object);
  38.             }
  39.             json = array.toString();
  40.             Log.i(TAG, json);
  41.             System.out.println(“json : ——> ” + json);
  42. //          webView.loadUrl(“javascript:show(“+ json +”)”);
  43.         } catch (JSONException e) {
  44.             e.printStackTrace();
  45.         }
  46.         return json;
  47.     }
  48. }

3dchart.html

[html][/html] view plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset=”UTF-8″ />
  5.   <title>Hello World</title>
  6.   <meta name=”Description” content=”” />
  7.   <meta name=”Keywords” content=”” />
  8.   <script type=”text/javascript” src=”ichart.1.2.min.js”></script>
  9.   <script type=”text/javascript”>
  10.     var data = new Array;
  11.     var contact = window.MainActivity.getContacts();
  12.     eval(‘data=’ + contact);
  13.     $(function(){
  14.       new iChart.Column3D({
  15.         render:’canvasDiv’,//渲染的Dom目标,canvasDiv为Dom的ID
  16.         data:data,//绑定数据
  17.         title:’Top 5 Browsers in August 2013′,//设置标题
  18.         showwpercent:true,
  19.         decimalsnum:2,
  20.         width:800,//设置宽度,默认单位为px
  21.         height:400,//设置高度,默认单位为px
  22.         shadow:true,//激活阴影
  23.         shadow_color:’#c7c7c7′,//设置阴影颜色
  24.         align:’left’,
  25.         offsetx:50,
  26.         legend:{
  27.           enable:true
  28.         },
  29.         coordinate:{
  30.           scale:[{
  31.             width:600,
  32.             position:’left’,
  33.             start_scale:0,
  34.             end_scale:40,
  35.             scale_space:8,
  36.             listeners:{
  37.               parseText:function(t,x,y){
  38.                 return{text:t+”%”}
  39.               }
  40.             }
  41.           }]
  42.         }
  43.       }).draw();
  44.     });
  45.   </script>
  46. </head>
  47. <body>
  48.   <!– This file lives in public/422.html –>
  49.   <div id=’canvasDiv’>12222</div>
  50.   <div id=’canvasDiv’></div>
  51. </body>
  52. </html>
图形:如这样的  由于不可以在模拟器上运行 我就在官网找了一个图片代替了

 

ichartjs官网:http://www.ichartjs.com/

ichartjs API:   http://www.ichartjs.com/docs/zh/

ichartjs例子:http://www.ichartjs.com/gettingstarted/

标签