MPAndroidChart中k线图自定义x轴标签。
作者:
想要去远方的人 | 来源:发表于
2019-10-24 11:49 被阅读0次
首先上效果图,避免大家走错地方了。
效果图
前言
由于该库获取X轴顶部和底部只能显示相同的数据,不能改变数据和加图标,而需求又需要加其他数据和图标变化显示,X轴上下都需要显示数据和图标。该库没有提供,搜了一些资料都没有,所以就自己动手,记录一下。
1.在XAxisRenderer这个类中找到了renderAxisLabels(Canvas c) 绘制X轴的方法
找到了在哪里绘制的这就好办了,然后顺腾摸瓜找到绘制每一个数据的方法
发现在红圈标注的地方设置了Paint
找到了这些我们就可以动手试着去改了,上代码
自定义了它的XAxisRenderer
,
下面付带完整MyXAxisRenderer的代码
public class MyXAxisRenderer extends XAxisRenderer {
public MyXAxisRenderer(ViewPortHandler viewPortHandler, XAxis xAxis, Transformer trans) {
super(viewPortHandler, xAxis, trans);
}
// renderAxisLabels
@Override
public void renderAxisLabels(Canvas c) {
super.renderAxisLabels(c);
if (isDrawTop) {
float yoffset = mXAxis.getYOffset() + ScreenTool.dip2px(10);
MPPointF pointF = MPPointF.getInstance(0, 0);
drawOtherLabel(c, mViewPortHandler.contentTop() - yoffset, pointF);
}
}
//画其他的x 轴数字
private void drawOtherLabel(Canvas c, float pos, MPPointF anchor) {
final float labelRotationAngleDegrees = mXAxis.getLabelRotationAngle();
boolean centeringEnabled = mXAxis.isCenterAxisLabelsEnabled();
float[] positions = new float[mXAxis.mEntryCount* 2];
for (int i= 0; i< positions.length; i+= 2) {
// only fill x values
if (centeringEnabled) {
positions[i] = mXAxis.mCenteredEntries[i/ 2];
} else {
positions[i] = mXAxis.mEntries[i/ 2];
}
}
mTrans.pointValuesToPixel(positions);
for (int i= 0; i< positions.length; i+= 2) {
float x= positions[i];
if (mViewPortHandler.isInBoundsX(x)) {
String val = mXAxis.getValueFormatter().getFormattedValue(mXAxis.mEntries[i/ 2], mXAxis);
if (mAxis.mEntries[i/ 2] < lineData.size()) {
if ((int) mXAxis.mEntries[i/ 2] != 0) {
String label= lineData.get((int) mXAxis.mEntries[i/ 2]).getWendu();
if (label== null || label.equals("")) {
label= "";
} else {
label+= "°C";
}
if (mXAxis.isAvoidFirstLastClippingEnabled()) {
// avoid clipping of the last
if (i== mXAxis.mEntryCount- 1 && mXAxis.mEntryCount> 1) {
float width = Utils.calcTextWidth(mAxisLabelPaint, label);
if (width > mViewPortHandler.offsetRight() * 2
&& x+ width > mViewPortHandler.getChartWidth())
x-= width / 2;
// avoid clipping of the first
} else if (i== 0) {
float width = Utils.calcTextWidth(mAxisLabelPaint, label);
x+= width / 2;
}
}
mAxisLabelPaint.setColor(mXAxis.getTextColor());
int mBitWidth = ScreenTool.dip2px(20);
int mBitHeight = mBitWidth;
Paint mBitPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBitPaint.setFilterBitmap(true);
mBitPaint.setDither(true);
if (weatherIcons.containsKey(lineData.get((int) mXAxis.mEntries[i/ 2]).getTianqi())) {
int res = weatherIcons.get(lineData.get((int) mXAxis.mEntries[i/ 2]).getTianqi());
Bitmap mBitmap = ((BitmapDrawable) MyApp.getInstance().getResources().getDrawable(res)).getBitmap();
Bitmap bi = Bitmap.createScaledBitmap(mBitmap, mBitWidth, mBitHeight, true);
float bitmapX= x- mBitWidth - ScreenTool.dip2px(3);
if (label.equals("")) {
bitmapX= x;
}
c.drawBitmap(bi, bitmapX, pos -ScreenTool.dip2px(5) , null);
}
String wendu = lineData.get((int) mXAxis.mEntries[i/ 2]).getWendu();
if (wendu != null && !wendu.equals("")) {
int temp = Integer.valueOf(wendu);
if (temp <= 18) {
mAxisLabelPaint.setColor(MyApp.getInstance().getResources().getColor(R.color.light_blue));
} else if (temp > 18 && temp < 22) {
mAxisLabelPaint.setColor(MyApp.getInstance().getResources().getColor(R.color.light_green));
} else if (temp >= 22 && temp < 25) {
mAxisLabelPaint.setColor(MyApp.getInstance().getResources().getColor(R.color.main_orange_color));
} else {
mAxisLabelPaint.setColor(MyApp.getInstance().getResources().getColor(R.color.light_red));
}
}
if (label!= null) {
drawLabel(c, label, x, pos, anchor, labelRotationAngleDegrees);
}
}
}
}
}
}
public void setWeatherTemp(List<HistoryGradeInfo> lineData) {
weatherIcons.put("晴", R.drawable.ic_weather_sunny);
weatherIcons.put("阴", R.drawable.ic_weather_blue_yin_day);
weatherIcons.put("雨", R.drawable.ic_weather_blue_rain_day);
weatherIcons.put("雪", R.drawable.ic_weather_blue_snow_day);
this.lineData= new ArrayList<>();
HistoryGradeInfo hi = new HistoryGradeInfo();
hi.setTianqi("");
hi.setWendu("");
this.lineData.add(hi);
for (HistoryGradeInfo item : lineData) {
this.lineData.add(item);
}
}
public void setDrawTop(boolean isDrawTop) {
this.isDrawTop= isDrawTop;
}
private boolean isDrawTop= false;
private List<HistoryGradeInfo> lineData;
private HashMap<String, Integer> weatherIcons= new HashMap<>();
}
在LineChart中使用MyXAxisRenderer
public class MyLineChart extends LineChart {
public MyLineChart(Context context) {
super(context);
}
public MyLineChart(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyLineChart(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void init() {
super.init();
mXAxisRenderer= new MyXAxisRenderer(mViewPortHandler, mXAxis, mLeftAxisTransformer);
}
public MyXAxisRenderer getMyXAxisRenderer(){
return (MyXAxisRenderer) mXAxisRenderer;
}
}
在项目中引用自己修改过的MyLineChart
获取lineChart对象开启绘制顶部数据和设置顶部的数据 和修改里面的颜色
终于写完了,这是我第一次写文章,有的还不知道怎么使用,可能读起来会很吃力,有什么好的建议希望能提出来,我会尽快去提示自己表述和编辑这方面的能力,最后,希望这篇文章能帮到有需要的小伙伴。
如有什么疑问大家可以加我qq:549813516 或邮箱私信我:im.wyu@qq.com
本文标题:MPAndroidChart中k线图自定义x轴标签。
本文链接:https://www.haomeiwen.com/subject/mutisctx.html
网友评论