android开发原点表框架,Android图表控件MPAndroidChart——LineChart实现 XY轴、原点线的直尺刻度样式…

  • Post author:
  • Post category:其他


接上文:

Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)

其他相关文章:

Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3.0)

Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)

Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据

Android图表控件MPAndroidChart——柱状图BarChart的使用(多条柱状图)

Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用

Android图表控件MPAndroidChart——源码修改实现曲线图X轴直尺刻度样式

MPAndroidChart在github上的地址:https://github.com/PhilJay/MPAndroidChart

没想到现在更新文章,日期也更新为当前时间了。

一. 目标效果

对比两张图

df4231fc8a4778ad14c6c038fb481cb9.png
d607055d3fa426814514a9056109e957.png

左图为需要实现的效果,右图为当前的效果,对比X Y轴,当前的图表未展示刻度,而且X轴在0的下方。

总结需要实现的功能

X Y轴展示刻度

X轴位置从原点(0,0)开始

二. 实现效果

因未找到相关方法设置显示类似直尺样式的刻度(若有相关方法可实现,请告诉我一下),所以只有修改下源码

修改源码之前首先自己在View中画出刻度,然后找到MPAndroidChart库X轴的绘制代码,将自己写的方法添加进去。

注:本文会将长短刻度线都绘制出来,不想要短刻度线,去掉绘制方法即可。绘制效果如下:

432bba4ef8b6af53a2de4a5d45a17397.png

2.1 绘制刻度线

2.1.1 绘制方式

绘制刻度线有很多方式,在此简单说一下本文中使用的方式。

先画一条长竖线(长刻度线),然后平移画布一段距离(即刻度线间的间距),在画短刻度线(坐标轴未变,只是画布位置变了,至使表面上看起来线位置变了)

2.1.2 画线

手机坐标轴:

27680d5829a93de4d070854fe0369633.png

画刻度线:

新建MyScaleView 重写 onDraw()方法

public classMyScaleView extendsView {

privatePaint scalePaint;publicMyScaleView(Context context) {

this(context, null);}

publicMyScaleView(Context context,@NullableAttributeSet attrs) {

this(context,attrs,0);}

publicMyScaleView(Context context,@NullableAttributeSet attrs, intdefStyleAttr) {

super(context,attrs,defStyleAttr);initPaint();}

private voidinitPaint() {

scalePaint= newPaint();scalePaint.setAntiAlias(true);scalePaint.setColor(Color.RED);scalePaint.setStrokeWidth(2);scalePaint.setStyle(Paint.Style.FILL);scalePaint.setDither(true);}

@Overrideprotected voidonDraw(Canvas canvas) {

super.onDraw(canvas);drawScale(canvas);}

private voiddrawScale(Canvas canvas) {

intscaleGroup = 5;//默认1个长刻度间隔4个短刻度,加起来一组5intmScaleCount = 101;//刻度的总个数canvas.save();intstartX = 30;intstartY = 500;//即在坐标轴(30,500)处开始画刻度线for(inti = 0;i < mScaleCount;i++) {

canvas.save();//记录画布状态canvas.translate(10* i,0);//画布平移,即刻度线的间距if(i == 0|| i % scaleGroup == 0) {

canvas.drawLine(startX,startY,startX,startY – 20,scalePaint);//画长刻度线} else{

canvas.drawLine(startX,startY,startX,startY – 10,scalePaint);//画短刻度线}

canvas.restore();//取出保存的状态}

canvas.restore();}

}

最后应用MyScaleView 效果如