一. 设计
- 上次写的七日化利率表设计很粗糙,也没有体现面向对象的思想。数据处理都在控件中,而且表格列数比较固定,对于数据和列数不匹配的情况,只能从左向右依次显示数据。另外扩展性很差。
- 根据图表的属性,分别抽象出坐标轴、坐标刻度、点、线等类。所以在使用的时候初始化这些数据就可以控制图表的展示。
- 抽象出折线统计图和条形统计图公共部分AbsLeafChart,这个类主要处理了控件的有关尺寸、初始化坐标轴和坐标轴刻度、计算每个点在控件的坐标。
- 折线统计图LeafLineChart继承AbsLeafChart,只负责画折线图。
二.类介绍
AxisValue 坐标轴刻度
类型 | 属性 | 介绍 |
---|---|---|
String | label | 刻度值 |
float | pointX | x 坐标 |
float | pointY | y 坐标 |
Axis 坐标轴
类型 | 属性 | 介绍 |
---|---|---|
List | values | 刻度集合 |
boolean | hasLines | 是否连线 |
boolean | isShowText | 是否显示坐标轴刻度值 |
Typeface | typeface | 刻度字体 |
int | textSize | 刻度字体大小 |
int | textColor | 刻度字体颜色 |
int | axisColor | x/y轴颜色 |
float | axisWidth | x/y轴宽度 |
int | axisLineColor | 平行于x/y轴的坐标轴颜色 |
float | axisLineWidth | 平行于x/y轴的坐标轴宽度 |
float | startX | 坐标轴起点x坐标 |
float | startY | 坐标轴起点y坐标 |
float | stopX | 坐标轴终点x坐标 |
float | stopY | 坐标轴终点y坐标 |
PointValue 点
类型 | 属性 | 介绍 |
---|---|---|
float | x | 占x轴总长度权重 |
float | y | 占x轴总长度权重 |
float | diffX | 距离原点长度 |
float | diffY | 距离原点长度 |
float | originX | x坐标 |
float | originY | y坐标 |
String | label | 标签 |
ChartData 图表数据
类型 | 属性 | 介绍 |
---|---|---|
List | values | 点集合 |
boolean | hasLabels | 是否显示标签 |
int | labelColor | 标签背景色 |
float | labelRadius | 标签背景弧度 |
Line extends ChartData 折线
类型 | 属性 | 介绍 |
---|---|---|
int | lineColor | 折线颜色 |
float | lineWidth | 折线的宽度 |
boolean | hasPoints | 是否画圆点 |
boolean | hasLines | 是否画线条 |
int | pointColor | 圆点颜色 |
float | pointRadius | 圆点半径 |
boolean | isCubic | 是否是曲线 |
boolean | isFill | 是否填充 |
int | fillColr | 填充色 |
三、实现
暂时只实现了折线图,这里只介绍折线图实现
AbsLeafChart中的相关方法:
尺寸控制
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
initViewSize();
resetAsixSize();
resetLineSize();
}
控件宽高和控件内间距初始化
protected void initViewSize() {
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
leftPadding = LeafUtil.dp2px(mContext, 20);
rightPadding = LeafUtil.dp2px(mContext, 10);
topPadding = LeafUtil.dp2px(mContext, 15);
bottomPadding = LeafUtil.dp2px(mContext, 20);
}
设置坐标轴位置
protected void resetAsixSize() {
if(axisX != null){
List<AxisValue> values = axisX.getValues();
int sizeX = values.size(); //几条y轴
float xStep = (mWidth - leftPadding) / sizeX;
axisX.setStepSize(xStep);
for (int i = 0; i < sizeX; i++) {
AxisValue axisValue = values.get(i);