Android 图表

最近在做的一个项目涉及到了图表的展示，经过比较之后发现使用WebView+ichartjs（html5+javascript）可以达到比较理想的效果

先来张效果图：

Android 图表_第1张图片

这里是ichartjs的官方网站：http://www.ichartjs.com/，文档和示例都有

关于android中ichartjs的基本使用方法可参考：http://my.oschina.net/huangyunlin2010/blog/145309

本文主要侧重于三个方面：

1 图表样式的定制

首先来说下图表样式的定制（这里以折线图为例，其它的可参考官方文档，每个示例都有代码），如果大家看过上面的链接就会发现90%的样式都是在html文件中预先定义好的，只有个别样式数据是从Android代码中动态获取的，就我开发的项目而言，只会对图表的标题、背景、网格、两个坐标轴和折线这几个部分做定制，下面将自己项目中的html文件源代码贴出来（相应部分的样式定义都有说明）供大家参考，当然这里不可能面面俱到，具体还是要多参考官方的文档和Demo，多做些试验，相信总会得到自己满意的效果

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no" target-densitydpi="device-dpi"/><title>Document</title><script src="file:///android_asset/ichart.1.2.min.js" type="text/javascript" charset="utf-8" > </script><script type="text/javascript" charset="utf-8" ></script></head><!-- bgcolor 用来设置WebView控件的背景色 , backgroud 用来设置WebView控件的背景图片--><!-- 因为图表不会完全填充WebView控件（可能是控件自身属性问题），四周会有间隙，所有用此属性设置外观协调性--><body bgcolor="#9997e1" onload="javascript:myObject.init()"><div id='canvasDiv'></div></body><script type="text/javascript" charset="utf-8" >var mData; // 数据源var mWidth; // 图表宽，单位dpivar mHeight; // 图表高，单位dpivar mBottomLabels; // 底边刻度,array类型function setContactInfo(data)       { mData= eval(data);  // 通过eval方法处理得到json对象数组  mWidth=window.myObject.getWidth(); // 从代码中获取图表宽度            mHeight=window.myObject.getHeight(); // 从代码中获取图表高度            mBottomLabels=JSON.parse(window.myObject.getBottomLabels()); // 动态获取横轴数据集合            execute();     } function execute() { // 测试数据var data = [  {    name : '血糖值',       value : [1,3,1,6,3,2,7],// 折线点的值   color : '#ffffff', // 折线的颜色    line_width : 3  // 折线的宽度  }];// 图表对象var chart = new iChart.LineBasic2D({render : 'canvasDiv',data : data, // 实际使用中要赋值为mData，这是从Android代码中获取的border : 0, // 图表边框/*  * 图表标题title : {text : mBottomLabels, font : '微软雅黑', fontsize : 20, color : '#ffffff',offsety : 0},*/width : mWidth, // 图表宽度height : mHeight, // 图表高度padding : 30, // 图表到四周距离align : 'center', // 图表的位置background_color : '#9997e1', // 图表背景颜色coordinate :{height:'90%',grid_color : '#ffffff', // 网格颜色axis : { color : '#ffffff',}, // 坐标轴颜色scale: [// 左边竖轴{position : 'left', // 刻度线位置 start_scale : 0, // 刻度线最小值 end_scale : 12, // 刻度线最大值 scale_space : 2, // 刻度线间距 scale_size : 0, // 刻度线高度  // scale_color : '#ffffff' // 刻度线 颜色 label : { color : '#ffffff', fontsize : 15}, },// 底边横轴{ position : 'bottom', // 刻度线位置 scale_size : 0, // 刻度线宽度label : {color : '#ffffff', fontsize : 15}, // labels : ["02-21","02-22","02-23","02-24"] labels : mBottomLabels}]},sub_option :{label : false, // 不显示折线点的值hollow_inside : false,// 屏蔽一个点的亮色在外环的效果point_size : 5 // 折线点大小},});// 利用自定义组件构造左侧和底部说明文本chart.plugin(new iChart.Custom({drawFn:function(){// 计算位置var coo = chart.getCoordinate(),x = coo.get('originx'),y = coo.get('originy'),w = coo.width,h = coo.height;// 在左上侧的位置，渲染一个单位的文字chart.target.textAlign('start').textBaseline('bottom').textFont('600 15px 微软雅黑').fillText('mmol/l',x-30,y-10,false,'#ffffff').textBaseline('top').fillText('d',x+w+25,y+h+8,false,'#ffffff');}}));// 画图表chart.draw(); }</script></html>

2 不同机型下的适配

这里主要涉及到图表的宽度、高度和图表中说明文字的大小

html文件中的数值单位都是px，直接使用固定值的话在不同分辨率的手机上会产生较大的效果差异，所以最好是从android代码中根据density计算好之后动态的传给javascript，这样才能达到比较好的效果，上述代码中图表的宽度和高度就是动态获取的

3 图表数据的更新

未完待续....

更多相关文章

随机推荐