基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
2012-09-05 09:51
471 查看
这个图表需要多值数据源，和上一篇文章中的单一数据源的区别是android中需要打包的数据data不同，而且还需提供一个相应的data_labels数据。
先把做出来的效果图贴出来：
1、android主界面代码：
2、AreaD.html文件源码：
3、用于将data打包JSON格式的PackageChartData类：
先把做出来的效果图贴出来：
1、android主界面代码：
package com.sq.Htmldemo;
import java.util.Vector;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView web;
private WebSettings webSettings;
private Vector<Item> chart = new Vector<Item>();
private Parameter parameter = new Parameter(950, 450, "通信");
private String data;
private String data_labels;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// this.initContact();
this.initContacts();
web = (WebView)findViewById(R.id.web);
webSettings = web.getSettings();
webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
web.addJavascriptInterface(this, "mainActivity");
// web.loadUrl("file:///android_asset/Column3D.html");
// data = PackageChartData.PackageData(chart);
web.loadUrl("file:///android_asset/Area2D.html");
data = PackageChartData.PackageDoubleData(chart);
data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});
Log.i("test", "data:"+data);
Log.i("test", "data_labels:"+data_labels);
}
/**
* 初始化图标要显示的内容，存放在chart中,单一数据类型的
*/
public void initContact() {
Item item = new Item();
item.setName("移动");
item.setValue(40);
item.setColor("#bc6666");
chart.add(item);
Item item1 = new Item();
item1.setName("联通");
item1.setColor("#6f83a5");
item1.setValue(20);
chart.add(item1);
Item item2 = new Item();
item2.setName("电信");
item2.setColor("#76a871");
item2.setValue(30);
chart.add(item2);
}
/**
* 初始化图标要显示的内容，存放在chart中,多值数据类型的
*/
public void initContacts() {
Item item = new Item();
item.setName("上海");
item.setValues(new double[]{4,16,18,24,32,36,38,38,36,26,20,14});
item.setColor("#dad81f");
chart.add(item);
Item item1 = new Item();
item1.setName("北京");
item1.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});
item1.setColor("#1f7e92");
chart.add(item1);
}
/**
* 该方法将在js脚本中，通过window.mainActivity.getContact()进行调用,得到图表显示所需的JSON格式的data
* @return
*/
public String getContact(){
Log.i("test", "get data:"+data);
return data;
}
/**
* 该方法将在js脚本中，通过window.mainActivity.getContactLabels()进行调用,得到图表显示所需的JSON格式的data_labels
* @return
*/
public String getContactLabels() {
Log.i("test", "get data_labels:"+data_labels);
return data_labels;
}
/**
* 该方法将在js脚本中，通过window.mainActivity.getContacts()进行调用
* 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组
* @return
*/
public JavaArrayJSWrapper getContacts(){
Log.i("test", "getContacts execute!");
Item[] contacts = new Item[this.chart.size()];
contacts = this.chart.toArray(contacts);
return new JavaArrayJSWrapper(contacts);
}
/**
* 该方法将在js脚本中，通过window.mainActivity.getWidth()进行调用
* 得到图表的宽度
* @return int
*/
public int getWidth(){
return parameter.getWidth();
}
/**
* 该方法将在js脚本中，通过window.mainActivity.getHeight()进行调用
* 得到图表的高度
* @return int
*/
public int getHeight(){
return parameter.getHeight();
}
public String getChartTitle(){
return parameter.getTitle();
}
/**
* 用于调试的方法，该方法将在js脚本中，通过window.mainActivity.debugOut(“”)进行调用
* @param out
*/
public void debugOut(String out) {
// TODO Auto-generated method stub
Log.i("test", "debugOut:" + out);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}2、AreaD.html文件源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>多数据源的面积图</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="ichart-1.0.beta.min.js"></script>
<script type="text/javascript" >
$(function(){
var data = new Array();
var data_labels = new Array();
var contact = window.mainActivity.getContact();
var contact_lab = window.mainActivity.getContactLabels();
eval('data='+contact);
window.mainActivity.debugOut("data="+data);
eval('data_labels='+window.mainActivity.getContactLabels());
window.mainActivity.debugOut("data_labels="+data_labels);
new iChart.Area2D({
render : 'canvasDiv',
data: data,
title : 'Average Temperature Of 2012',
width : 800,
height : 400,
legend : {
enable : true
},
tip:{
enable : true
},
listeners:{
parseTipText:function(d,t,i){
return data_labels[i]+"份平均温度:"+t+"℃";
}
},
coordinate:{
scale:[{
position:'left',
start_scale:0,
end_scale:40,
scale_space:5,
listeners:{
parseText:function(t,x,y){
return {text:t+"℃"}
}
}
},{
position:'bottom',
start_scale:1,
end_scale:12,
parseText:function(t,x,y){
return {textY:y+10}
},
labels:data_labels
}]
}
}).draw();
});
</script>
</head>
<body >
<div id='canvasDiv'>
</div>
</body>
</html>3、用于将data打包JSON格式的PackageChartData类：
package com.sq.Htmldemo;
import java.util.Vector;
import org.json.JSONArray;
import org.json.JSONObject;
public class PackageChartData {
/**
* 将单一数据源打包成JSON格式
* @param chartData 存储单一数据源的数组
* @return
*/
public static String PackageData(Vector<Item> chartData){
JSONArray root = new JSONArray();
try {
for(int i = 0; i < chartData.size(); ++i){
JSONObject temp = new JSONObject();
temp.put("name", chartData.get(i).getName());
temp.put("value", chartData.get(i).getValue());
temp.put("color", chartData.get(i).getColor());
root.put(temp);
}
} catch (Exception e) {
e.printStackTrace();
}
return root.toString();
}
/**
* 将多值数据源打包成JSON格式
* @param chartData
* @return
*/
public static String PackageDoubleData(Vector<Item> chartData){
JSONArray root = new JSONArray();
try {
for(int i = 0; i < chartData.size(); ++i){
JSONObject temp = new JSONObject();
temp.put("name", chartData.get(i).getName());
JSONArray values = new JSONArray();
for(int j = 0; j < chartData.get(i).getValues().length; ++j){
values.put(chartData.get(i).getValues()[j]);
}
temp.put("value", values);
temp.put("color", chartData.get(i).getColor());
root.put(temp);
}
} catch (Exception e) {
e.printStackTrace();
}
return root.toString();
}
/**
* 将多值数据源相应的data_labels打包成JSON格式
* @param dataLabels
* @return
*/
public static String PackageDataLabels(String[] dataLabels){
JSONArray root = new JSONArray();
try {
for(int i = 0; i < dataLabels.length; ++i){
root.put(dataLabels[i]);
}
} catch (Exception e) {
e.printStackTrace();
}
return root.toString();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
- 基于ichartjs图形库在android上使用HTML动态实现3D柱形图
- 基于ichartjs图形库在android上使用HTML动态实现3D柱形图
- 基于ichartjs在android上使用HTML5实现各种图表的类库
- 基于ichartjs在android上使用HTML5实现各种图表的类库
- 基于ichartjs在android上使用HTML5实现各种图表的类库
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表（select）
- Android使用自定义View继承SurfaceView实现动态折线图的绘制
- 枚举注册表DSN，实现用ADO动态选择数据源(MFC基于对话框 )
- 使用基于Android网络通信的OkHttp库实现Get和Post方式简单操作服务器JSON格式数据
- Android通过iChartJs实现动态图表、报表的显示Demo
- Android下使用jni实现基于opencv与dlib的68关键点检测
- Android_Loader_使用LoaderManager管理Loader实现异步动态加载数据
- 基于mini2440嵌入式linux上整合一套Domoticz智能家居系统（八）使用domoticz+mosquitto+Android客户端实现控制mini2440上的LED（一）
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表（select）
- android使用html实现部分文字高亮
- 基于mini2440嵌入式linux上整合一套Domoticz智能家居系统（十一）使用domoticz+mosquitto+Android客户端实现控制STM32板上的LED（二）
- Android使用Broadcast实现无序静态与动态广播功能
- 使用函数递归实现基于php和MySQL的动态树型菜单
- android上动态实现ichartjs & highcharts 的绘图 2D 3D 折线图 柱形图 圆形图 等等