最近不忙，写了一个自定义图表的view，使用超级简单，只需要实现适配器就好。
下面讲解DiagramView的使用
先上图：
diagramview-1.png
diagramview-2.png
diagramview-3.png
diagramview-4.png
diagramview-5.png
diagramview-6.png
通过上面的图片可以看到效果很多，
- 设置背景色，
- 设置上下左右间距
app:paddingLeft="@dimen/dp_10" app:paddingRight="@dimen/dp_10" app:paddingTop="@dimen/dp_10" app:paddingBottom="@dimen/dp_10" - 设置各轴的颜色，每个轴都可单独设置
app:xAxisColor="@color/lust" app:yAxisColor="@color/lust" app:rightYAxisColor="@color/lust" - 设置每一个轴旁边的文字，及其颜色和大小，都可单独设置
app:rightYAxisTextColor="@color/romance" app:rightYAxisTextSize="20" app:yAxisTextSize="20" app:xAxisTextSize="20" app:xAxisTextColor="@color/romance" app:yAxisTextColor="@color/romance" - 设置各轴是否带箭头
app:hasArrows="false" - 设置是否在轴上留余
app:xAxisSurplus="@dimen/dp_10" app:yAxisSurplus="@dimen/dp_10" - 设置横轴上的基准线是实线还是虚线
app:yAxisCellLine="fullLine" - 设置是否显示左右两侧竖轴
app:yAxisVisible="invisible" - 可以画柱状图和线形图，以及其颜色
- 可以同时画多个柱状图和线形图
使用说明
- 先在项目最外层的build.gradle中的allprojects加入代码
maven { url 'https://jitpack.io' }，如下
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
- 然后在app下的build.gralde下的dependencies中加入以来
implementation 'com.github.tangqipeng:diagramview:1.0.1'
至此配置已经完成 - 在xml布局的父布局中加上
xmlns:app="http://schemas.android.com/apk/res-auto"
大体如下，还要加什么按照上面的来：
- 接下来就是初始化了：
DiagramView diagramView = findViewById(R.id.diagramView); - 然后就是使用适配器，只需要继承DiagramView.Adapter就可以了。
private static class LineOtherAdapter extends DiagramView.Adapter{
/**
* XcellBean只是一个对象，这是可变的，你用你自己的，传入的参数可以是List也行，
* 只是下面的配置由你自己设置好就行。
* 我这里是List>，是因为我这里是多组对比
*/
private final List> mBeanList;
private final static int china_type = 0;
private final static int usa_type = 1;
public LineOtherAdapter(List> beanList) {
this.mBeanList = beanList;
}
/**
* 对比的组数，
* 如果你们只需要显示一组，你传入的参数是List的话，你这里返回就写1，
* 当然你也可以List>，那下面就不用变了
* @return
*/
@Override
public int getTypeCount() {
return mBeanList.size();
}
/**
* 每组数组的个数，这里实际上是x轴的单元数
* @return
*/
@Override
public int getItemCount() {
return mBeanList.get(0).size();
}
/**
* y轴上标有数值的基准长度，上图中左侧的y轴每隔几小格就标记了一个文字，
* 这里是返回有几个这样的标有文字的单元，那些没标数值的不要算，例如图1就是5格
* @return
*/
@Override
public int getYAxleBaseCellNum() {
return 10;
}
/**
* 每一标有数值的单元格所代表的数值
* @return
*/
@Override
public int getYAxleBaseCell() {
return 10;
}
/**
* 每一标有数值的单元格的数字所对应的文字
* @param position
* @return
*/
@Override
public String getYAxleBaseCellText(int position) {
return getYAxleBaseCell() * (position + 1) + "";
}
/**
* 每一个基准单元格又分为几格，如果不再分割则返回1
* @return
*/
@Override
public int getYAxleBaseCellSegmentationNum() {
return 5;
}
/**
* 你区分的type，实际上就是对比的每组数组的标识，
* 这里目前我好像漏掉了没啥用，但不影响显示，以后会完善
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
return position;
}
/**
* 按type区分，每一组的竖状图的颜色
* @param type
* @return
*/
@Override
public int getItemColor(int type) {
if (type == china_type) {
return R.color.havelock_blue;
}else{
return R.color.colorAccent;
}
}
/**
* x轴所标记的文字
* @param position
* @return
*/
@Override
public String getXAxisText(int position) {
return mBeanList.get(0).get(position).getNian();
}
/**
* x轴，每一组的竖状图的宽度，可以通过type来设置，如果都是一样宽，那就不需要区分
* @param type
* @return
*/
@Override
public float getItemWidth(int type) {
return 50f;
}
/**
* 按type区分，每一组的每一个x单元的竖状图的峰值，是有多高
* @param type
* @param position
* @return
*/
@Override
public float getItemHigh(int type, int position) {
return mBeanList.get(type).get(position).getRenkou();
}
/**
* 这里是是否显示右侧的y轴，适用于画点连线的图，默认是false，
* 这个方法不一定需要实现，如果启动右侧轴的话就实现，并返回true
* @return
*/
@Override
public boolean openRightYAxle() {
return true;
}
/**
* 右侧轴的标有数值的基本单元分为几格
* @return
*/
@Override
public int getRightYAxleBaseCellNum() {
return 6;
}
/**
* 右侧轴的标有数值的每一个基本单元所代表的数值
* @return
*/
@Override
public int getRightYAxleBaseCell() {
return 10;
}
/**
* 右侧轴的标有数值的每一个基本单元对应的文字
* @return
*/
@Override
public String getRightYAxleBaseCellText(int position) {
return getRightYAxleBaseCell() * (position + 1) +"%";
}
/**
* 右侧轴的标有数值的每一个基本单元是否再分，不分则返回1
* @return
*/
@Override
public int getRightYAxleBaseCellSegmentationNum() {
return 5;
}
/**
* 右侧轴标有数值的基本单元所对应的文字
* @param type
* @param position
* @return
*/
@Override
public float getRightCellValue(int type, int position) {
return mBeanList.get(type).get(position).getRate();
}
/**
* 线形图根据type来区分颜色，如果只有一组那就没必要区分了
* @param type
* @return
*/
@Override
public int getRightItemColor(int type) {
if (type == china_type) {
return R.color.lust;
}else{
return R.color.sunglow;
}
}
}
上面的方法中有些方法可以不需要实现，根据你个人的需要来写吧，使用起来很简单。
List> cellBeanList = new ArrayList<>();
cellBeanList.add(getList1());
cellBeanList.add(getList2());
LineOtherAdapter adapter = new LineOtherAdapter(cellBeanList);
diagramView11.setAdapter(adapter);
这样便可现实了，当然我这里有数据，数据由你自己设置，XcellBean可以任由你定义。
如果哪位朋友觉得这里面有需求做不到你的要求，可以给我留言，我可以更新。
下面就是源码了，说到这里我本来想上传到外部仓库，供大家使用，但还需要学习一下，暂时先贴源码地址吧：
https://github.com/tangqipeng/diagramview
欢迎留言，有什么特殊的要求的，有没有现成的view的也可以告诉我，我实现了上传