MPAndroidChart 饼状图 文字重叠问题
前方高能!!!全是干货!!!话不多说先上图~
因为要保密的原因,lable名字用*号代替了,不用在意这个
前提
引入 MPAndroidChart 依赖
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
解决思路
1.文字显示重叠有一部分原因是因为数据过多,所以我把值为0的数据过滤掉不显示了,当然,这个需要 在产品允许的情况下才可以。
2.如图,将lable显示在饼图外部
3.PieChartRenderer 这个类是绘制线条的,我们要做的就是重写这个类,然后重写PieChart类引用我们重写后的PieChartRenderer
4.PieChartRenderer 重写思路:记录已经绘制过的Y坐标,然后判断剩下的位置能否显示的下一条lable,显示不下的话要就需要挪位置
5.网上找了很多解决方式,都存在瑕疵,所以决定自己动手撸
具体实现
1.将lable显示在饼图外部
代码如下:
PieDataSet dataSet = new PieDataSet(entries, "");
dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);//value外部展示
2.重写PieChartRenderer
代码如下:
public class PieChartCustomRendederer extends PieChartRenderer {
private Paint mEntryLabelsPaint=new Paint();
public PieChartCustomRendederer(PieChart chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
super(chart, animator, viewPortHandler);
}
private float[] minData(float leftRecordY[][], float pt1y) {
//计算出离的最近的
List<Float> bigD = new ArrayList<>();
//变换前的数据
List<Float> nearestlist = new ArrayList<>();
//变换后的数据
List<Float> nearestlistCopy = new ArrayList<>();
for (int k = 0; k < leftRecordY[0].length; k++) {
if (leftRecordY[0][k] != 0) {
bigD.add(Math.abs(leftRecordY[0][k] - pt1y));
nearestlist.add(leftRecordY[0][k]);
nearestlistCopy.add(leftRecordY[1][k]);
}
}
// 距离最近的点,数值
float[] rF = new float[2];
if (bigD.size() == 0) {
return rF;
}
float minD = bigD.get(0);
rF[0]= nearestlist.get(0);
rF[1]= nearestlistCopy.get(0);
for (int g = 0; g < bigD.size(); g++) {
if (bigD.get(g) < minD) {
minD = bigD.get(g);
rF[0]= nearestlist.get(g);
rF[1]= nearestlistCopy.get(g);
}
}
return rF;
}
private String text = "2.0%";
@Override
public void drawValues(Canvas c) {
MPPointF center = mChart.getCenterCircleBox();
// get whole the radius
float radius = mChart.getRadius();
float rotationAngle = mChart.getRotationAngle();
float[] drawAngles = mChart.getDrawAngles();
float[] absoluteAngles = mChart.getAbsoluteAngles();
float phaseX = mAnimator.getPhaseX();
float phaseY = mAnimator.getPhaseY();
final float roundedRadius = (radius - (radius * mChart.getHoleRadius() / 100f)) / 2f;
final float holeRadiusPercent = mChart.getHoleRadius() / 100.f;
float labelRadiusOffset = radius / 10f * 3.6f;
if (mChart.isDrawHoleEnabled()) {
labelRadiusOffset = (radius - (radius * holeRadiusPercent)) / 2f;
if (!mChart.isDrawSlicesUnderHoleEnabled() && mChart.isDrawRoundedSlicesEnabled()) {
// Add curved circle slice and spacing to rotation angle, so that it sits nicely inside
rotationAngle += roundedRadius * 360 / (Math.PI * 2 * radius);
}
}
final float labelRadius = radius - labelRadiusOffset;
PieData data = mChart.getData();
List<IPieDataSet> dataSets = data.getDataSets();
float yValueSum = data.getYValueSum();
boolean drawEntryLabels = mChart.isDrawEntryLabelsEnabled();
float angle;
int xIndex = 0;
c.save();
float offset = com.github.mikephil.charting.utils.Utils.convertDpToPixel(5.f);
for (int i = 0; i < dataSets.size(); i++) {
IPieDataSet dataSet = dataSets.get(i);
final boolean drawValues = dataSet.isDrawValuesEnabled();
if (!drawValues && !drawEntryLabels)
continue;
final PieDataSet.ValuePosition xValuePosition = dataSet.getXValuePosition();
final PieDataSet.ValuePosition yValuePosition = dataSet.getYValuePosition();
// apply the text-styling defined by the DataSet
applyValueTextStyle(dataSet);
Rect rect = new Rect();
mValuePaint.getTextBounds(text, 0, text.length(), rect);
mValuePaint.setColor(dataSet.getColor(i));
int textHeight = (int) (rect.height() * 1.4f);//文本的高度
float lineHeight = Utils.calcTextHeight(mValuePaint, "Q") + Utils.convertDpToPixel(4f);
ValueFormatter formatter = dataSet.getValueFormatter();
int entryCount = dataSet.getEntryCount();
mValueLinePaint.setColor(dataSet.getValueLineColor());
mValueLinePaint.setStrokeWidth(com.github.mikephil.charting.utils.Utils.convertDpToPixel(dataSet.getValueLineWidth()));
final float sliceSpace = getSliceSpace(dataSet);
MPPointF iconsOffset = MPPointF.getInstance(dataSet.getIconsOffset());
iconsOffset.x = com.github.mikephil.charting.utils.Utils.convertDpToPixel(iconsOffset.x);
iconsOffset.y = com.github.mikephil.charting.utils.Utils.convertDpToPixel(iconsOffset.y);
//第一个存以前的,第二个存变换位置后的
float leftRecordY[][] = new float[2][entryCount];
float rightRecordY[][] = new float[2][entryCount];
for (int j = 0; j < entryCount; j++) {
PieEntry entry = dataSet.getEntryForIndex(j);
if (xIndex == 0)
angle = 0.f;
else
angle = absoluteAngles[xIndex - 1] * phaseX;
final float sliceAngle = drawAngles[xIndex];
final float sliceSpaceMiddleAngle = sliceSpace / (com.github.mikephil.charting.utils.Utils.FDEG2RAD * labelRadius);
// offset needed to center the drawn text in the slice
final float angleOffset = (sliceAngle - sliceSpaceMiddleAngle / 2.f) / 2.f;
angle = angle + angleOffset;
final float transformedAngle = rotationAngle + angle * phaseY;
float value = mChart.isUsePercentValuesEnabled() ? entry.getY()
/ yValueSum * 100f : entry.getY();
String formattedValue = formatter.getPieLabel(value, entry);
String entryLabel = entry.getLabel();
final float sliceXBase = (float) Math.cos(transformedAngle * com.github.mikephil.charting.utils.Utils.FDEG2RAD);
final float sliceYBase = (float) Math.sin(transformedAngle * com.github.mikephil.charting.utils.Utils.FDEG2RAD);
final boolean drawXOutside = drawEntryLabels &&
xValuePosition == PieDataSet.ValuePosition.OUTSIDE_SLICE;
final boolean drawYOutside = drawValues &&
yValuePosition == PieDataSet.ValuePosition.OUTSIDE_SLICE;
final boolean drawXInside = drawEntryLabels &&
xValuePosition == PieDataSet.ValuePosition.INSIDE_SLICE;
final boolean drawYInside = drawValues &&
yValuePosition == PieDataSet.ValuePosition.INSIDE_SLICE;
if (drawXOutside || drawYOutside) {
final float valueLineLength1 = dataSet.getValueLinePart1Length();
final float valueLineLength2 = dataSet.getValueLinePart2Length();
final float valueLinePart1OffsetPercentage = dataSet.getValueLinePart1OffsetPercentage() / 100.f;
float pt2x, pt2y;
float labelPtx, labelPty;
float line1Radius;
if (mChart.isDrawHoleEnabled())
line1Radius = (radius - (radius * holeRadiusPercent))
* valueLinePart1OffsetPercentage
+ (radius * holeRadiusPercent);
else
line1Radius = radius * valueLinePart1OffsetPercentage;
final float polyline2Width = dataSet.isValueLineVariableLength()
? labelRadius * valueLineLength2 * (float) Math.abs(Math.sin(
transformedAngle * Utils.FDEG2RAD))
: labelRadius * valueLineLength2;
float pt0x = line1Radius * sliceXBase + center.x;
float pt0y = line1Radius * sliceYBase + center.y;
float pt1x = labelRadius * (1 + valueLineLength1) * sliceXBase + center.x;
float pt1y = labelRadius * (1 + valueLineLength1) * sliceYBase + center.y;
if (transformedAngle % 360.0 >= 90.0 && transformedAngle % 360.0 <= 270.0) {
float nearestPoint[] = minData(leftRecordY, pt1y);
leftRecordY[0][j] = pt1y;
//判断是否需要挪位置
if (nearestPoint[0] != 0 && Math.abs(nearestPoint[0] - pt1y) < (textHeight+lineHeight)) {
pt1y = nearestPoint[1] - textHeight;
}
pt2x = pt1x - polyline2Width;
pt2y = pt1y;
mValuePaint.setTextAlign(Paint.Align.RIGHT);
if(drawXOutside)
mEntryLabelsPaint.setTextAlign(Paint.Align.RIGHT);
labelPtx = pt2x - offset;
labelPty = pt2y;
leftRecordY[1][j] = pt1y;
} else {
float[] nearestPoint = minData(rightRecordY, pt1y);
rightRecordY[0][j] = pt1y;
//判断是否需要挪位置
if (nearestPoint[0] != 0 && Math.abs(nearestPoint[0] - pt1y) < (textHeight+lineHeight)) {
pt1y = nearestPoint[1] + textHeight;
}
pt2x = pt1x + polyline2Width;
pt2y = pt1y;
mValuePaint.setTextAlign(Paint.Align.LEFT);
if(drawXOutside)
mEntryLabelsPaint.setTextAlign(Paint.Align.LEFT);
labelPtx = pt2x + offset;
labelPty = pt2y;
rightRecordY[1][j] = labelPty;
}
if (dataSet.getValueLineColor() != ColorTemplate.COLOR_NONE) {
if (dataSet.isUsingSliceColorAsValueLineColor()) {
mValueLinePaint.setColor(dataSet.getColor(j));
}
c.drawLine(pt0x, pt0y, pt1x, pt1y, mValueLinePaint);
c.drawLine(pt1x, pt1y, pt2x, pt2y, mValueLinePaint);
}
// draw everything, depending on settings
if (drawXOutside && drawYOutside) {
drawValue(c, formattedValue, labelPtx, labelPty, dataSet.getValueTextColor(j));
if (j < data.getEntryCount() && entryLabel != null) {
drawEntryLabel(c, entryLabel, labelPtx, labelPty + lineHeight);
}
} else if (drawXOutside) {
if (j < data.getEntryCount() && entryLabel != null) {
drawEntryLabel(c, entryLabel, labelPtx, labelPty + lineHeight / 2.f);
}
} else if (drawYOutside) {
drawValue(c, formattedValue, labelPtx, labelPty + lineHeight / 2.f, dataSet.getValueTextColor(j));
}
}
if (drawXInside || drawYInside) {
// calculate the text position
float x = labelRadius * sliceXBase + center.x;
float y = labelRadius * sliceYBase + center.y;
mValuePaint.setTextAlign(Paint.Align.CENTER);
// draw everything, depending on settings
if (drawXInside && drawYInside) {
drawValue(c, formattedValue, x, y, dataSet.getValueTextColor(j));
if (j < data.getEntryCount() && entryLabel != null) {
drawEntryLabel(c, entryLabel, x, y + lineHeight);
}
} else if (drawXInside) {
if (j < data.getEntryCount() && entryLabel != null) {
drawEntryLabel(c, entryLabel, x, y + lineHeight / 2f);
}
} else if (drawYInside) {
drawValue(c, formattedValue, x, y + lineHeight / 2f, dataSet.getValueTextColor(j));
}
}
if (entry.getIcon() != null && dataSet.isDrawIconsEnabled()) {
Drawable icon = entry.getIcon();
float x = (labelRadius + iconsOffset.y) * sliceXBase + center.x;
float y = (labelRadius + iconsOffset.y) * sliceYBase + center.y;
y += iconsOffset.x;
Utils.drawImage(
c,
icon,
(int)x,
(int)y,
icon.getIntrinsicWidth(),
icon.getIntrinsicHeight());
}
xIndex++;
}
MPPointF.recycleInstance(iconsOffset);
}
MPPointF.recycleInstance(center);
c.restore();
}
}
3.重写PieChart类引用重写后的PieChartRenderer
public class MyPieChart extends PieChart {
public MyPieChart(Context context) {
super(context);
}
public MyPieChart(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyPieChart(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void init() {
super.init();
//此处把mRenderer替换成我们自己的PieChartRenderer
mRenderer = new PieChartCustomRendederer(this, mAnimator, mViewPortHandler);
}
}
4.布局文件直接使用MyPieChart 即可
各种属性设置自行百度,网上有很多
5.关于lable与value在一行显示的实现,我是重写了ValueFormatter
public class MyPercentFormatter extends ValueFormatter {
public DecimalFormat mFormat;
private PieChart pieChart;
public MyPercentFormatter() {
mFormat = new DecimalFormat("###,###,##0.0");
}
// Can be used to remove percent signs if the chart isn't in percent mode
public MyPercentFormatter(PieChart pieChart) {
this();
this.pieChart = pieChart;
}
@Override
public String getFormattedValue(float value) {
return mFormat.format(value) + "%";
}
@Override
public String getPieLabel(float value, PieEntry pieEntry) {
if (pieChart != null && pieChart.isUsePercentValuesEnabled()) {
// Converted to percent
return pieEntry.getLabel()+" "+getFormattedValue(value);
} else {
// raw value, skip percent sign
return mFormat.format(value);
}
}
}
然后设置ValueFormatter
@BindView(R.id.pc_hours)
MyPieChart pc_hours;
PieData data = new PieData(dataSet);
data.setValueFormatter(new MyPercentFormatter(pc_hours));
总结
到此,文字重叠的问题已经彻底解决了,你学废了吗
代码可以直接复制过去用,注意依赖引入的版本,版本不一致,代码可能有报错
有问题的同学欢迎留言
关于样式不知道怎么实现的同学也可以留言哦
如果帮到你了,不妨点个赞
参考文献: https://blog.csdn.net/aichu6610/article/details/108278760
实现思路是参考这位老哥的,不过他的代码还是存在个别数据文字重叠的问题