基于ichartjs在android上使用HTML5实现各种图表的类库
2017-04-03 14:01
417 查看
转载地址:http://blog.csdn.net/sunquan1127/article/details/7951859
事先声明下,由于时间比较短,类库才刚建起来一个框架,还缺不少的东西,可能还有一些错误,先拿出来亮亮,以后慢慢再添加。
接下来简要说一下类库中的东西,com.sq.iChart.parameter包中的10个类除了Chart是图表的基类外,其他的都是图表的一些基本参数,可以独立使用。com.sq.iChart.chart包内的7个类是常用的七个图表:2D面积图、2D条形图、2D柱形图、3D柱形图、2D折线图、2D饼状图、3D饼状图,都是继承自Chart基类。使用时直接声明一个图表,例如下文中的3D饼状图,然后添加自己想要设定的参数,再使用web.addJavascriptInterface(pie3D,
"pie3D");使的在Pie3D.html中内嵌的JS中,能够通过标签'pie3D'调用Pie3D中的方法,获取3D饼状图所需的数据。parameter包中除Chart以外的九个类也是一样的使用方法。
用起来不知道怎么样,我也是第一次写这种类库,只能想到这种方法实现。感觉看起来比较清晰。如果有什么不恰当的地方或是大家谁有更好的idea,欢迎留言讨论。类库我上传到资源中了,0资源分。
下面贴一个自己写的使用这个类库的例子:
首先是效果图
(1)MainActivity的代码
[java] view
plain copy
<span style="font-size:18px;">package com.sq.Htmldemo;
import java.util.Vector;
import com.sq.iChart.chart.Pie3D;
import com.sq.iChart.parameter.Chart;
import com.sq.iChart.parameter.Footnote;
import com.sq.iChart.parameter.Legend;
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> chartData = new Vector<Item>();
private Chart chart;
private String data;
private String data_labels;
private Pie3D pie3D; //声明自定义库中的3D饼状图的类
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initColumn3DContacts();
// initArea2DContacts();
initPie3DContacts();
web = (WebView)findViewById(R.id.web);
webSettings = web.getSettings();
webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
web.addJavascriptInterface(this, "mainActivity");
// chart = new Chart(800, 400, "通信行业");
// web.addJavascriptInterface(chart, "chart");
// web.loadUrl("file:///android_asset/Column3D.html");
// web.loadUrl("file:///android_asset/Area2D.html");
web.loadUrl("file:///android_asset/Pie3D.html");
data = PackageChartData.PackageData(chartData);
// data = PackageChartData.PackageDoubleData(chartData);
// data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});
pie3D = new Pie3D(800, 400, "2012年7月份中国浏览器市场占有率Top6", data); //实例化一个3D饼状图对象
pie3D.setRadius(750); //设定饼状图的半径
pie3D.setyHeight(40); //设定饼状图中饼的厚度
Footnote footnote = new Footnote("Data from StatCounter", "right"); //实例化图表的脚注
Legend legend = new Legend(true, "center", "bottom"); //实例化图表的图例
legend.setRow(1); //设定图例显示在一行中
web.addJavascriptInterface(pie3D, "pie3D"); //使的在Pie3D.html中内嵌的JS中能够通过标签'pie3D'调用Pie3D中的方法获取3D饼状图所需的数据
web.addJavascriptInterface(footnote, "footnote");
web.addJavascriptInterface(legend, "legend");
Log.i("test", "data:"+data);
// Log.i("test", "data_labels:"+data_labels);
}
/**
* 初始化3D柱形图所需的内容,存放在chartData中,单一数据类型的
*/
public void initColumn3DContacts() {
Item item = new Item();
item.setName("移动");
item.setValue(40);
item.setColor("#bc6666");
chartData.add(item);
item = new Item();
item.setName("联通");
item.setValue(20);
item.setColor("#6f83a5");
chartData.add(item);
item = new Item();
item.setName("电信");
item.setValue(30);
item.setColor("#76a871");
chartData.add(item);
}
/**
* 初始化2D面积图需要的内容,存放在chartData中,多值数据类型的
*/
public void initArea2DContacts() {
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");
chartData.add(item);
item = new Item();
item.setName("北京");
item.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});
item.setColor("#1f7e92");
chartData.add(item);
}
private void initPie3DContacts() {
Item item = new Item();
item.setName("Other");
item.setValue(3.79);
item.setColor("#bd355e");
chartData.add(item);
item = new Item();
item.setName("IE");
item.setValue(50.20);
item.setColor("#a5c2d5");
chartData.add(item);
item = new Item();
item.setName("360 Browser");
item.setValue(26.55);
item.setColor("#cbab4f");
chartData.add(item);
item = new Item();
item.setName("Chrome");
item.setValue(8.26);
item.setColor("#76a871");
chartData.add(item);
item = new Item();
item.setName("Firefox");
item.setValue(4.06);
item.setColor("#9f7961");
chartData.add(item);
item = new Item();
item.setName("Maxthon");
item.setValue(2.78);
item.setColor("#a56f8f");
chartData.add(item);
item = new Item();
item.setName("Safari");
item.setValue(2.35);
item.setColor("#db9034");
chartData.add(item);
}
/**
* 用于调试的方法,该方法将在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;
}
}
</span>
(2)Pie3D.html
[html] view
plain copy
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D饼状图</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 contact = window.pie3D.getData(); //获得数据
eval('data='+contact); //执行数据的赋值
window.mainActivity.debugOut(data);
var title = window.pie3D.getTitle(); //获得标题
var width = window.pie3D.getWidth(); //获得宽度
var height = window.pie3D.getHeight(); //获得高度
var radius = window.pie3D.getRadius(); //获得半径
var yHeight = window.pie3D.getyHeight(); //获得厚度
window.mainActivity.debugOut(title);
var footnote = window.footnote.getFootnote(); //获得脚注
var align = window.legend.getAlign(); //获得图例的水平对齐方式
var valign = window.legend.getValign(); //获得图例的垂直对齐方式
var row = window.legend.getRow(); //获得图例的行数
new iChart.Pie3D({
render : 'canvasDiv',
data: data,
title : title,
width : width,
height : height,
footnote : footnote,
legend : {
enable : true,
align : align,
valign : valign,
row:row,
column:'max'
},
showpercent:true,
decimalsnum:2,
yHeight:yHeight,
radius:radius,
}).draw();
});
</script>
</head>
<body >
<div id='canvasDiv'>
</div>
</body>
</html></span>
注:有的手机可能运行不出来,有可能是往html文件中传String类型的值时会出错,可以这样改,例如Pie3D.html的33行:“title : title,”,其中后一个title为上面var出来的变量,接受的是String类型的值,这样绑定在有的手机上无法实现,可以改为“title : title+'',”
事先声明下,由于时间比较短,类库才刚建起来一个框架,还缺不少的东西,可能还有一些错误,先拿出来亮亮,以后慢慢再添加。
接下来简要说一下类库中的东西,com.sq.iChart.parameter包中的10个类除了Chart是图表的基类外,其他的都是图表的一些基本参数,可以独立使用。com.sq.iChart.chart包内的7个类是常用的七个图表:2D面积图、2D条形图、2D柱形图、3D柱形图、2D折线图、2D饼状图、3D饼状图,都是继承自Chart基类。使用时直接声明一个图表,例如下文中的3D饼状图,然后添加自己想要设定的参数,再使用web.addJavascriptInterface(pie3D,
"pie3D");使的在Pie3D.html中内嵌的JS中,能够通过标签'pie3D'调用Pie3D中的方法,获取3D饼状图所需的数据。parameter包中除Chart以外的九个类也是一样的使用方法。
用起来不知道怎么样,我也是第一次写这种类库,只能想到这种方法实现。感觉看起来比较清晰。如果有什么不恰当的地方或是大家谁有更好的idea,欢迎留言讨论。类库我上传到资源中了,0资源分。
下面贴一个自己写的使用这个类库的例子:
首先是效果图
(1)MainActivity的代码
[java] view
plain copy
<span style="font-size:18px;">package com.sq.Htmldemo;
import java.util.Vector;
import com.sq.iChart.chart.Pie3D;
import com.sq.iChart.parameter.Chart;
import com.sq.iChart.parameter.Footnote;
import com.sq.iChart.parameter.Legend;
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> chartData = new Vector<Item>();
private Chart chart;
private String data;
private String data_labels;
private Pie3D pie3D; //声明自定义库中的3D饼状图的类
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initColumn3DContacts();
// initArea2DContacts();
initPie3DContacts();
web = (WebView)findViewById(R.id.web);
webSettings = web.getSettings();
webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
web.addJavascriptInterface(this, "mainActivity");
// chart = new Chart(800, 400, "通信行业");
// web.addJavascriptInterface(chart, "chart");
// web.loadUrl("file:///android_asset/Column3D.html");
// web.loadUrl("file:///android_asset/Area2D.html");
web.loadUrl("file:///android_asset/Pie3D.html");
data = PackageChartData.PackageData(chartData);
// data = PackageChartData.PackageDoubleData(chartData);
// data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});
pie3D = new Pie3D(800, 400, "2012年7月份中国浏览器市场占有率Top6", data); //实例化一个3D饼状图对象
pie3D.setRadius(750); //设定饼状图的半径
pie3D.setyHeight(40); //设定饼状图中饼的厚度
Footnote footnote = new Footnote("Data from StatCounter", "right"); //实例化图表的脚注
Legend legend = new Legend(true, "center", "bottom"); //实例化图表的图例
legend.setRow(1); //设定图例显示在一行中
web.addJavascriptInterface(pie3D, "pie3D"); //使的在Pie3D.html中内嵌的JS中能够通过标签'pie3D'调用Pie3D中的方法获取3D饼状图所需的数据
web.addJavascriptInterface(footnote, "footnote");
web.addJavascriptInterface(legend, "legend");
Log.i("test", "data:"+data);
// Log.i("test", "data_labels:"+data_labels);
}
/**
* 初始化3D柱形图所需的内容,存放在chartData中,单一数据类型的
*/
public void initColumn3DContacts() {
Item item = new Item();
item.setName("移动");
item.setValue(40);
item.setColor("#bc6666");
chartData.add(item);
item = new Item();
item.setName("联通");
item.setValue(20);
item.setColor("#6f83a5");
chartData.add(item);
item = new Item();
item.setName("电信");
item.setValue(30);
item.setColor("#76a871");
chartData.add(item);
}
/**
* 初始化2D面积图需要的内容,存放在chartData中,多值数据类型的
*/
public void initArea2DContacts() {
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");
chartData.add(item);
item = new Item();
item.setName("北京");
item.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});
item.setColor("#1f7e92");
chartData.add(item);
}
private void initPie3DContacts() {
Item item = new Item();
item.setName("Other");
item.setValue(3.79);
item.setColor("#bd355e");
chartData.add(item);
item = new Item();
item.setName("IE");
item.setValue(50.20);
item.setColor("#a5c2d5");
chartData.add(item);
item = new Item();
item.setName("360 Browser");
item.setValue(26.55);
item.setColor("#cbab4f");
chartData.add(item);
item = new Item();
item.setName("Chrome");
item.setValue(8.26);
item.setColor("#76a871");
chartData.add(item);
item = new Item();
item.setName("Firefox");
item.setValue(4.06);
item.setColor("#9f7961");
chartData.add(item);
item = new Item();
item.setName("Maxthon");
item.setValue(2.78);
item.setColor("#a56f8f");
chartData.add(item);
item = new Item();
item.setName("Safari");
item.setValue(2.35);
item.setColor("#db9034");
chartData.add(item);
}
/**
* 用于调试的方法,该方法将在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;
}
}
</span>
(2)Pie3D.html
[html] view
plain copy
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D饼状图</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 contact = window.pie3D.getData(); //获得数据
eval('data='+contact); //执行数据的赋值
window.mainActivity.debugOut(data);
var title = window.pie3D.getTitle(); //获得标题
var width = window.pie3D.getWidth(); //获得宽度
var height = window.pie3D.getHeight(); //获得高度
var radius = window.pie3D.getRadius(); //获得半径
var yHeight = window.pie3D.getyHeight(); //获得厚度
window.mainActivity.debugOut(title);
var footnote = window.footnote.getFootnote(); //获得脚注
var align = window.legend.getAlign(); //获得图例的水平对齐方式
var valign = window.legend.getValign(); //获得图例的垂直对齐方式
var row = window.legend.getRow(); //获得图例的行数
new iChart.Pie3D({
render : 'canvasDiv',
data: data,
title : title,
width : width,
height : height,
footnote : footnote,
legend : {
enable : true,
align : align,
valign : valign,
row:row,
column:'max'
},
showpercent:true,
decimalsnum:2,
yHeight:yHeight,
radius:radius,
}).draw();
});
</script>
</head>
<body >
<div id='canvasDiv'>
</div>
</body>
</html></span>
注:有的手机可能运行不出来,有可能是往html文件中传String类型的值时会出错,可以这样改,例如Pie3D.html的33行:“title : title,”,其中后一个title为上面var出来的变量,接受的是String类型的值,这样绑定在有的手机上无法实现,可以改为“title : title+'',”
相关文章推荐
- 基于ichartjs在android上使用HTML5实现各种图表的类库
- 基于ichartjs在android上使用HTML5实现各种图表的类库
- 基于HTML5的ichartjs图表组件在Android应用中的使用
- 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
- 基于ichartjs图形库在android上使用HTML动态实现3D柱形图
- 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
- 基于ichartjs图形库在android上使用HTML动态实现3D柱形图
- Android使用ichartjs在HTML5中动态绘制图表
- android在使用apache http类库的时候实现zip传输数据
- 实现基于Android的英文电子词典使用cursorAdapter
- 使用Raphaël类库实现的超酷动画技能图表
- Android 使用HttpClient和第三方MIME文件上传类库,实现文件上传
- ichartjs-基于html5的图表组件
- 在 Android 的 IM 应用中使用 asmack 库实现用户头像的传输(基于VCard协议)
- Android 使用HttpClient和第三方MiME文件上传类库,实现文件上传
- Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问题,以及实现hadoo
- Android基于mAppWidget实现手绘地图(十四)–在一个应用中使用多个地图
- 在 Android 的 IM 应用中使用 asmack 库实现用户头像的传输(基于VCard协议)
- Android中基于HTTP的通信技术(5)Google开源库 使用 Volley 实现 JSON 字符串请求
- GBin1分享使用Raphaël类库实现的超酷动画技能图表