最近在做的一个项目涉及到了图表的展示，经过比较之后发现使用WebView+ichartjs（html5+javascript）可以达到比较理想的效果
先来张效果图：
这里是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" οnlοad="javascript:myObject.init()">
<div id='canvasDiv'></div>
</body>
<script type="text/javascript" charset="utf-8" >
var mData; // 数据源
var mWidth; // 图表宽，单位dpi
var mHeight; // 图表高，单位dpi
var 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 图表数据的更新
未完待续....
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
