android上动态实现ichartjs & highcharts 的绘图 2D 3D 折线图 柱形图 圆形图 等等
项目目录：
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;
@Override
protected 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/