参转载地址:http://blog.csdn.net/sunquan1127/article/details/7944957
这个图表需要多值数据源,和上一篇文章中的单一数据源的区别是Android中需要打包的数据data不同,而且还需提供一个相应的data_labels数据。
先把做出来的效果图贴出来:
1、android主界面代码:
- <span style="font-size:18px;">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;
- }
- }
- </span>
2、AreaD.html文件源码:
- <span style="font-size:18px;"><!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>
- </span>
3、用于将data打包JSON格式的PackageChartData类:
- <span style="font-size:18px;">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();
- }
- }
- </span>