android上動態實現ichartjs的繪圖 2D 3D 折線圖直條圖圓形圖等等

最後更新：2013-12-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

package com.example.html5_chart;public class Contact {private String name;private double value;private String color;public Contact(String name, double value, String color) {super();this.name = name;this.value = value;this.color = color;}public String getName() {return name;}public void setName(String name) {this.name = name;}public double getValue() {return value;}public void setValue(double value) {this.value = value;}public String getColor() {return color;}public void setColor(String color) {this.color = color;}}

package com.example.html5_chart;import java.util.ArrayList;import java.util.List;public class ContactService {public List<Contact> getContacts(){List<Contact> contacts = new ArrayList<Contact>();contacts.add(new Contact("IE", 32.85, "#a5c2d5"));contacts.add(new Contact("Chrome", 45.55, "#cbab4f"));contacts.add(new Contact("FireFox", 40.25, "#76a871"));contacts.add(new Contact("Safari", 6.85, "#a56f8f"));contacts.add(new Contact("Other", 1.23, "#6f83a5"));return contacts;}}

package com.example.html5_chart;import java.util.List;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;import android.os.Bundle;import android.app.Activity;import android.content.Context;import android.util.Log;import android.view.Menu;import android.webkit.WebView;public class MainActivity extends Activity {private static final String TAG = "MainActivity";private ContactService contactService;private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);contactService = new ContactService();webView = (WebView)findViewById(R.id.webView);webView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setBuiltInZoomControls(true);webView.addJavascriptInterface(this, TAG);webView.loadUrl("file:///android_asset/3dchart.html");}public String getContacts(){List<Contact> contacts = contactService.getContacts();String json = null;try {JSONArray array = new JSONArray();for (Contact contact:contacts) {JSONObject object = new JSONObject();object.put("name", contact.getName());object.put("value", contact.getValue());object.put("color", contact.getColor());array.put(object);}json = array.toString();Log.i(TAG, json);System.out.println("json : ------> " + json);//webView.loadUrl("javascript：show("+ json +")");} catch (JSONException e) {e.printStackTrace();}return json;}}

<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <title>Hello World</title>  <meta name="Description" content="" />  <meta name="Keywords" content="" />  <script type="text/javascript" src="ichart.1.2.min.js"></script>  <script type="text/javascript">    var data = new Array;    var contact = window.MainActivity.getContacts();得到MainActivity中轉換出的json字串    eval('data=' + contact);得到json資料    $(function(){      new iChart.Column3D({        render:'canvasDiv',//渲染的Dom目標,canvasDiv為Dom的ID        data:data,//綁定資料        title:'Top 5 Browsers in August 2013',//設定標題        showwpercent:true,//顯示百分比        decimalsnum:2,        width:800,//設定寬度，預設單位為px        height:400,//設定高度，預設單位為px        shadow:true,//啟用陰影        shadow_color:'#c7c7c7',//設定陰影顏色        align:'left',        offsetx:50,        legend:{          enable:true        },        coordinate:{          scale:[{            width:600,            position:'left',//配置左值軸            start_scale:0,//設定開始刻度為0            end_scale:40,//設定結束刻度為40            scale_space:8,//設定刻度間距            listeners:{              parseText:function(t,x,y){//設定解析值軸文本                return{text:t+"%"}              }            }          }]        }      }).draw(); //調用繪製方法開始繪圖    });  </script></head><body>  <!-- This file lives in public/422.html -->  <div id='canvasDiv'>12222</div>  <div id='canvasDiv'></div></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More