Android自定义心率图表

最近有需求需要展示蓝牙设备的心率数据，每半小时一个心率值，在图表中显示。有很多第三方的开源图表库可以选择，比如MPAndroidChart等优秀的图表库，最后还是决定自定义vie，上上手，以作练习，效果如下图：

心率数据可以动态设置，刻度值目前在view中设置，各种颜色可在xml文件中配置，接下来记录如何实现。 

 

//点的画笔
    private Paint pointPaint;
    //连线的画笔
    private Paint pathPaint;

    //path
    private Path linPath;

    //点的颜色
    private int pointColor;
    //点的半径
    private float circleRadius;
    //线的颜色
    private int linColor;

    //绘制坐标轴的paint
    private Paint xyLinPaint;

    //绘制虚线的画笔
    private Paint benchPaint;

    //绘制y轴刻度的画笔
    private Paint yScalePaint;

    //是否显示x轴
    private boolean isShowX = false;
    //是否显示y轴
    private boolean isShowY = false;

    //宽高
    private float mWidth,mHeight;

    //数据源
    private List dataLists = new ArrayList<>();

主要代码，实现起来比较简单 

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //坐标平移
        canvas.translate(0,mHeight);
        canvas.save();
        if(!dataLists.isEmpty()){
            //间隔的宽度
            float mCurrWidth = mWidth / dataLists.size();

            //绘制坐标轴
            drawXYLin(canvas,mCurrWidth);

            //绘制点
            for(int i = 0;i

//设置数据
    public void setDataList(List dataList) {
        this.dataLists = dataList;
        linPath.reset();
        invalidate();
    }

    //是否显示x轴的刻度
    public void setShowX(boolean showX) {
        isShowX = showX;
    }

    //是否显示y轴的刻度
    public void setShowY(boolean showY) {
        isShowY = showY;
    }

 

 需要注意的地方为，在连线时Paint的Style中有三个枚举，分别为：Style.FILL，Style.STROKE，Style.FILL_AND_STROKE；

Paint.Style.STROKE 只绘制图形轮廓（描边） 
Paint.Style.FILL 只绘制图形内容 
Paint.Style.FILL_AND_STROKE 既绘制轮廓也绘制内容

这里绘制线，只需要设置STROKE只绘制轮廓即可。目前未加入动画效果，后续再研究加入；GitHub链接：

代码下载       CSND下载链接：CSDN下载