MPAndroidChart自定义坐标轴显示位置

MPAndroidChart是一个非常强大的控件库,并且可定制性非常的强。但是在使用时,有一个需求是,
Y坐标轴上的所有数值必须要在图标内部,那么就需要对Y坐标轴的渲染方式进行定制了。

首先创建一个类YAxisRendererFix继承自YAxisRenderer,内部会重写一个方法
drawYLabels,这就是对Y轴文字渲染的关键方法了,你看Canvas都给你了。

介绍一下这四个参数:

  • Canvas c: 画笔,通过canvas来绘制你的文字,在这里就可以定制文字绘制的位置了。
  • float fixedPosition: X轴位置
  • float[] positions: Y轴位置,由于是Y轴的文字,所以所有需要绘制的文字位置作为一个数组。
  • float offset: setYOffset里面的那个偏移值,如果没设置就是0。

那么,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class YAxisRendererFix extends YAxisRenderer {
private Paint mTextPaint;
private Rect mTextRect;
public YAxisRendererFix(ViewPortHandler viewPortHandler, YAxis yAxis, Transformer trans) {
super(viewPortHandler, yAxis, trans);
mTextPaint = new Paint();
mTextRect = new Rect();
mTextPaint.getTextBounds("A", 0, 1, mTextRect);
}

@Override
protected void drawYLabels(Canvas c, float fixedPosition, float[] positions, float offset) {
// draw
for (int i = 0; i < mYAxis.mEntryCount; i++) {

String text = mYAxis.getFormattedLabel(i);

if (!mYAxis.isDrawTopYLabelEntryEnabled() && i >= mYAxis.mEntryCount - 1)
return;

if (i == mYAxis.mEntryCount - 1) {
//为了让最上面的Y轴lable value显示到图表里面
offset = mTextRect.height() + Math.abs(offset) * 3;
}
c.drawText(text, fixedPosition, positions[i * 2 + 1] + offset, mAxisLabelPaint);
}
}
}

如果上面的方式有点突兀。那么还有一种实现方式,让数值均匀的分布在坐标轴的上下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Override
protected void drawYLabels(Canvas c, float fixedPosition, float[] positions, float offset) {
float allOffset = mTextRect.height() + Math.abs(offset) * 5;
// draw
for (int i = 0; i < mYAxis.mEntryCount; i++) {
String text = mYAxis.getFormattedLabel(i);

if (!mYAxis.isDrawTopYLabelEntryEnabled() && i >= mYAxis.mEntryCount - 1)
return;

//图表线条均匀分布
float itemOffset = (allOffset / mYAxis.mEntryCount) * i + offset;
c.drawText(text, fixedPosition, positions[i * 2 + 1] + itemOffset, mAxisLabelPaint);
}
}

使用方法:
barChart下,使用setRendererLeftYAxis进行设置即可。

1
2
3
//显示在坐标轴内部
barChart.setRendererLeftYAxis(new YAxisRendererFix(barChart.getViewPortHandler(),
barChart.getAxisLeft(), barChart.getTransformer(barChart.getAxisLeft().getAxisDependency())));
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×