当前位置:编程学习 > JS >>

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

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;
	@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.addJavascriptInte易做图ce(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>

 

补充:移动开发 , Android ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,