转载地址:http://blog.csdn.net/sunquan1127/article/details/7940879
ichartjs 是一款基于HTML5的图形库。使用纯JavaScript语言, 利用Html5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合你。 ichartjs目前支持饼图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
一、本文在Android中使用基于HTML5的图形库 ichartjs ,根据android中传过来的数组在JS中动态生成ichartjs中显示图表所需的data格式。
做出的效果:
具体代码如下:
(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>();
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- 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/chart.html");
- }
- /**
- * 初始化图标要显示的内容,存放在chart中
- */
- public void initContacts() {
- Item item = new Item();
- item.setName("移动");
- item.setValue(50);
- 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);
- }
- /**
- * 该方法将在js脚本中,通过window.phonebook.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);
- }
- public void debugOut(String out) {
- Log.i("test", "debugOut:" + out);
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- getMenuInflater().inflate(R.menu.activity_main, menu);
- return true;
- }
- }</span>
(2)自定义类Item代码
- <span style="font-size:18px;">package com.sq.Htmldemo;
- /**
- * 自定义类,用于存储图中每个对象的名称,值和颜色
- * @author SQ
- *
- */
- public class Item {
- private String name;
- private int value;
- private String color;
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public int getValue() {
- return value;
- }
- public void setValue(int value) {
- this.value = value;
- }
- public String getColor() {
- return color;
- }
- public void setColor(String color) {
- this.color = color;
- }
- }</span>
(3)自定义类JavaArrayJSWrapper代码
- <span style="font-size:18px;">package com.sq.Htmldemo;
- public class JavaArrayJSWrapper {
- private Object[] innerArray;
- public JavaArrayJSWrapper(Object[] a){
- this.innerArray = a;
- }
- public int length(){
- return this.innerArray.length;
- }
- public Object get(int index){
- return this.innerArray[index];
- }
- }</span>
(4)HTML中代码:
- <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.mainActivity.getContacts();
- if(contact){
- window.mainActivity.debugOut(contact.length()+"contact get success!");
- var i = 0;
- while(i < contact.length()){
- data[i] = {name : contact.get(i).getName() ,value : contact.get(i).getValue(), color : contact.get(i).getColor()};
- window.mainActivity.debugOut("data["+i+"]"+data[i]);
- i++;
- }
- }else{
- window.mainActivity.debugOut(contact.length() + "contacts get error!");
- }
- new iChart.Column3D({
- render : 'canvasDiv',
- data: data,
- title : 'Status Of Customer Service',
- width : 900,
- height : 400,
- coordinate:{
- scale:[{
- position:'left',
- start_scale:0,
- end_scale:60,
- scale_space:5
- }]
- }
- }).draw();
- });
- </script>
- </head>
- <body >
- <div id='canvasDiv'>
- </div>
- </body>
- </html></span>
二、还可以用一种更简单的方法,就是在Java文件中将ichartjs 所需的data数据打包成JSON格式的字符串传递过去,在html中的JS中使用eval( )进行处理。具体代码如下:
(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 dataLabels;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- 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);
- Log.i("test", "params:"+data);
- }
- /**
- * 初始化图标要显示的内容,存放在chart中
- */
- public void initContacts() {
- 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);
- }
- public String getContact(){
- Log.i("test", "params:"+data);
- return data;
- }
- /**
- * 该方法将在js脚本中,通过window.phonebook.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.phonebook.getWidth()进行调用
- * 得到图表的宽度
- * @return int
- */
- public int getWidth(){
- return parameter.getWidth();
- }
- /**
- * 该方法将在js脚本中,通过window.phonebook.getHeight()进行调用
- * 得到图表的高度
- * @return int
- */
- public int getHeight(){
- return parameter.getHeight();
- }
- private Object getChartTitle(){
- return (Object)parameter.getTitle();
- }
- /**
- * 用于调试的方法,该方法将在js脚本中,通过window.phonebook.debugOut(“”)进行调用
- * @param out
- */
- public void debugOut(String out) {
- Log.i("test", "debugOut:" + out);
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- getMenuInflater().inflate(R.menu.activity_main, menu);
- return true;
- }
- }
- </span>
(2)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 PackageDoublieData(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>
(3)html中代码
- <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.mainActivity.getContact();
- eval('data='+contact);
- window.mainActivity.debugOut(data);
- var width = window.mainActivity.getWidth();
- var height = window.mainActivity.getHeight();
- new iChart.Column3D({
- render : 'canvasDiv',
- data: data,
- title : "通信行业",
- width : width,
- height : height,
- coordinate:{
- scale:[{
- position:'left',
- start_scale:0,
- end_scale:40,
- scale_space:5
- }]
- }
- }).draw();
- });
- </script>
- </head>
- <body >
- <div id='canvasDiv'>
- </div>
- </body>
- </html>
- </span>