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

最後更新：2018-12-05 來源：互聯網

上載者：User

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

項目目錄：

Contact.java

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;}}

ContactService.java

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;}}

MainActivity.java

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;}}

3dchart.html

<!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>

圖形：如這樣的由於不可以在模擬器上運行我就在官網找了一個圖片代替了

ichartjs官網：http://www.ichartjs.com/

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

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

另外一個庫比這個更加的強悍，功能更加全，效果更加漂亮：http://www.highcharts.com/

本文章原先以中文撰寫並發佈於 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