Android中MPAndroidChart自定义绘制最高点标识的方法

时间:2021-05-20

前言

MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活。MPAndroidChart显得更为轻巧和简单,拥有常用的图表类型:线型图、饼图、柱状图和散点图。

MPAndroidChart自定义绘制最高点标识

距离上次发布关于 MPAndroidChart 的文章已经过去一个多月了,项目中新增了一个需求,看起来很简单。就是在最高点绘制矩形框,标识最高点的数值,同时最高点处绘制一个小圈圈,以及绘制平均数值线,如下图所示:


看起来很简单,在 MPAndroidChart 的 demo 中也有 LineChart 具有小圆圈的和显示数值的,不过只在最高点绘制似乎是没有,并且也无法控制小空心圈圈的大小,所以只能自定义绘制了。

在 LineChart 中自定义渲染绘制需要自定义一个 Render,继承于 LineChartRenderer,然后重写 drawValues 方法。

接下来说说一个 LineChart 的基本构成,每一个点都是一个 Entry,其两个参数分别是 X 轴和 Y 轴的值,X 轴的必须为整型,Y 轴的是浮点型。LineDataSet 是由很多个点构成,所以其参数是 ArrayList<Entry> ,LineDataSet 能控制线的颜色和背景颜色,是否显示小圈圈,是否显示每个点的数值标签,遗憾的是不能精确到每个点,也就有了本文,再之上就是 LineData 了,其参数是 LineDataSet ,在此我默认每个 LineChart 只有一组曲线图,所以在 drawValues 中可以获取 LineDataSet 以及 ArrayList<Entry> :

LineDataSet dataSet = (LineDataSet) mChart.getLineData().getDataSetByIndex(0);List<Entry> entries = dataSet.getValues();

然后对 ArrayList<Entry> 遍历,找到最大值,然后获取其 (X,Y) 轴的值,通过 MPAndroidChart 的内置方法找到点在 Canvas 中的 (X,Y) 点的值。

Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());MPPointD pointD = trans.getPixelForValues(max_x, max_y);

接下来就可以在这个位置上绘制小圈圈,涉及到一点 Android Canvas 姿势,这类的文章网上很多,我以前做过 C# WinForm GDI+ 相关的一些项目,对画图这块略知一二理解起来尚不费力:

Paint paintDrawPointFill = new Paint(Paint.ANTI_ALIAS_FLAG);paintDrawPointFill.setStyle(Paint.Style.FILL);paintDrawPointFill.setColor(Color.WHITE);c.drawCircle((float) pointD.x, (float) pointD.y, ScreenUnit.dp2px(context, 6),paintDrawPointFill);

接下来绘制最大值文字和实心圆角矩形,我的思路是先绘制文字,测量出文字的高度和宽度,再在宽度分别左右加上边距然后绘制实心圆角矩形。

String textTag="文字内容";Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setTextSize(ScreenUnit.dp2px(context, 12));paint.setColor(igsLineConfig.getMainColor());Rect rectTextBounds = new Rect();paint.getTextBounds(textTag, 0, textTag.length(), rectTextBounds);

获取文字的宽和高:

int textWidth = (rectTextBounds.right - rectTextBounds.left); int textHeight = (rectTextBounds.bottom - rectTextBounds.top);

然后为了适配能让文字和矩形上下左右均保持一定距离,就类似于 Padding,增加两个参数 OffsetX 和 OffsetY 两个参数,然后重新实例化一个矩形需要的坐标系统:

RectF rectF = new RectF((int) offset_x - textOffset, (int) offset_y - textHeight - textOffset, (int) offset_x + textWidth + textOffset, (int) offset_y + textOffset);

绘制圆角矩形:

c.drawRoundRect(rectF, igsLineConfig.getCorner(), igsLineConfig.getCorner(), paint);

还需要重新实现一个 LineChart,指定它的渲染为我们刚才实现对 LineChartRenderer 的实现,继承 LineChart ,重写 init 方法:

@Override protected void init() { super.init(); WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE); DisplayMetrics metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); MyChartDataRender dataRender = new MyChartDataRender(this, mAnimator, mViewPortHandler, metrics.widthPixels, tag); dataRender.context = getContext(); dataRender.igsLineConfig = IgsChartConfigSingleton.instance.getIgsAltitudeLineConfig(); mRenderer = dataRender; }

如果需要对 Canvas 绘制时做一些控制,或者传递一些参数,都可以在这个实现中去定义,比如我需要手动指定最大值的标签显示等:

private double maxValue;public double getMaxValue() { return maxValue;}public void setMaxValue(double maxValue) { this.maxValue = maxValue;}

如果在 Render 的实现类中需要用到,可以获取图表对象,然后强转为我们写的实现类:

public void drawValues(Canvas c) { super.drawValues(c); MyLineChart chartInstance = (MyLineChart) mChart;}

至此就完成了最高点的标识绘制了,还可以不用计算最高点值。改进这个 LineChart 的实现,自定义背景和前景都可以,然后共用一个 Render,话不多说,上个图。


画平均线很简单,已经内置了实现,你要做的就是计算出所有的 Y 轴的值的平均值,或者数值如果来源于接口中,直接设置就可以。

LimitLine avgLine = new LimitLine((float) navg); avgLine.enableDashedLine(5.0f, 3.0f, 3.0f); avgLine.setLineColor(Color.parseColor("#33CC33")); lineChart1.getAxisLeft().addLimitLine(avgLine);

OK,对 MPAndroidChart 的了解又更深一步了!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章