android 自定义横向堆积柱形图,MPAndroidChart项目实战（八）——自定义分段堆积柱状图...

一丶效果图

image.png

二丶需求分析及技术点

1.如效果图显示，当一样产品评论越多柱子越高可以展现热度，同一柱子不同颜色不同长度展示评论好坏对比，

自定义MarkView则显示详细数据，这就是分段堆积柱状图的优势所在。

2.MPAndroidChart实现存在的问题：1品类下面的总数不能随柱状图滑动而滑动；2.间距无法调整

3.技术点分析

组合自定义View的实现参考上文：

MarkView的实现

PopupWindow的灵活使用

4.图解

image.png

三丶核心代码

1.造数据

public List parseData() {

list = new ArrayList<>();

Random r = new Random();

for (int i= 0;i<=6;i++){

Source source = new Source();

source.setBadCount(r.nextInt(100));

source.setGoodCount(r.nextInt(100));

source.setOtherCount(r.nextInt(100));

source.setScale(r.nextInt(100));

source.setSource("品类" + i);

source.setAllCount(source.getBadCount() + source.getGoodCount() + source.getOtherCount());

list.add(source);

}

return list;

}

2.分段堆积柱状图实体类相关属性(get，set方法略)

public class BarEntity {

public String title = "";

private float positivePer;

public String negativeColor = "#FEB356";

private float neutralPer ;

public String neutralColor = "#51D6C5";

private float negativePer;

public String positiveColor = "#3FA0FF";

private float Allcount;

private float scale;

/*填充区域比例*/

private float fillScale;

3.分段堆积柱状图View(绘制分段柱状图)

public class BarView extends View {

private BarEntity data;

private Paint paint;

private float animTimeCell = 0;

public BarView(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public BarView(Context context) {

super(context);

init();

}

public BarView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

private void init() {

paint = new Paint();

paint.setStyle(Paint.Style.FILL);

paint.setColor(Color.WHITE);

paint.setAntiAlias(true);

}

public void setData(BarEntity data) {

this.data = data;

invalidate();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (data != null) {

//高度填充

fillHeight = data.getFillScale() * getHeight();

if (fillHeight != 0) {

paint.setColor(Color.TRANSPARENT);

canvas.drawRect(0f, 0f, getWidth(), fillHeight, paint);

canvas.translate(0f, fillHeight);

}

//负面

paint.setColor(Color.parseColor(data.negativeColor));

canvas.drawRect(0f, 0f, getWidth(), data.getNegativePer() * getHeight(), paint);

canvas.translate(0f, data.getNegativePer() * getHeight());

//中性

paint.setColor(Color.parseColor(data.neutralColor));

canvas.drawRect(0f, 0f, getWidth(), data.getNeutralPer() * getHeight(), paint);

canvas.translate(0f, data.getNeutralPer() * getHeight());

//正面

paint.setColor(Color.parseColor(data.positiveColor));

canvas.drawRect(0f, 0f, getWidth(), data.getPositivePer() * getHeight(), paint);

canvas.translate(0f, data.getPositivePer() * getHeight());

}

}

private float fillHeight;

public float getFillHeight() {

return fillHeight;

}

public void startAnim(int animTime) {

final ObjectAnimator anim = ObjectAnimator.ofFloa