Android图表控件MPAndroidChart——LineChart实现 XY轴、原点线的直尺刻度样式

xhu_ww

已于 2024-05-06 20:40:52 修改

阅读量2.5w

点赞数 13

分类专栏： Android 文章标签： MPAndroidChart 源码解析 X Y轴刻度线原点线 LineChart

于 2018-06-04 00:22:57 首次发布

本文链接：https://blog.csdn.net/ww897532167/article/details/78520548

版权

接上文：

Android图表控件MPAndroidChart——曲线图LineChart的使用（多条曲线）

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

Android图表控件MPAndroidChart——柱状图BarChart的使用（多条柱状图）

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

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

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

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

一. 目标效果

对比两张图

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

总结需要实现的功能

X Y轴展示刻度
X轴位置从原点（0，0）开始

二. 实现效果

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

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

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

2.1 绘制刻度线

2.1.1 绘制方式

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

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

2.1.2 画线

手机坐标轴：

画刻度线：

新建MyScaleView 重写 onDraw()方法

public class MyScaleView extends View {
    private Paint scalePaint;
    public MyScaleView(Context context) {
        this(context, null);
    }
    public MyScaleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public MyScaleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    private void initPaint() {
        scalePaint = new Paint();
        scalePaint.setAntiAlias(true);
        scalePaint.setColor(Color.RED);
        scalePaint.setStrokeWidth(2);
        scalePaint.setStyle(Paint.Style.FILL);
        scalePaint.setDither(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawScale(canvas);
    }
    private void drawScale(Canvas canvas) {
        int scaleGroup = 5;     // 默认1个长刻度间隔4个短刻度，加起来一组5
        int mScaleCount = 101;  //刻度的总个数
        canvas.save();
        int startX = 30;
        int startY = 500;   //即在坐标轴（30,500）处开始画刻度线
        for (int i = 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();
    }
}