MPAndroidChart 高亮线全屏改为只到交点【解决方案】

问题

设计图给的高亮线是一个底部到交点的虚线(如下图),MPAndroid 库本身支持定制虚线、颜色和宽度,但是高度无法定制只绘制到交点,因此我们需要修改库来实现这种效果。

image.png

修改前实现的高亮线是到顶的:

image.png

解决思路

首先需要找到绘制高亮线的真正方法,可以看到LineScatterCandleRadarRenderer这个类的如下代码负责绘制高亮线。

// draw vertical highlight lines
if (set.isVerticalHighlightIndicatorEnabled()) {
    // create vertical path
    mHighlightLinePath.reset();
    mHighlightLinePath.moveTo(x, mViewPortHandler.contentTop());
    mHighlightLinePath.lineTo(x, mViewPortHandler.contentBottom());

    c.drawPath(mHighlightLinePath, mHighlightPaint);
}
复制代码

可以看到绘制的线Y坐标是从图表的顶部到底部,那么我们把mViewPortHandler.contentTop()换成传递进来的y就可以实现我们想要的效果了,但是这样太不优雅了,如果设计小姐姐在别的页面又做成全屏高度的高亮线怎么办?所以我决定优雅的增加一个配置方法,这样就能够进可攻退可守。

最终解决方案

1、修改 ILineScatterCandleRadarDataSet 接口类,增加一个判断方法,代码:

/**
 * Returns true if draw highlight to max
 * @return
 */
boolean isDrawHighlightToMaxEnabled();
复制代码

2、修改 LineScatterCandleRadarDataSet数据集方法,重写面我们增加的方法,并增加一个参数和 Set 方法,代码:

/** default draw highlight line to max/top/right */
protected boolean mDrawHighlightToMax = true;

/**
 * Enables / disables draw highlight line to top/right,or just to select point
 * @param enabled
 */
public void setDrawHighlightToMax(boolean enabled) {
    this.mDrawHighlightToMax = enabled;
}

@Override
public boolean isDrawHighlightToMaxEnabled() {
    return mDrawHighlightToMax;
}
复制代码

3、修改 LineScatterCandleRadarRenderer 方法,判断我们设置的条件决定绘制方案。代码:

// draw vertical highlight lines
if (set.isVerticalHighlightIndicatorEnabled()) {

    // create vertical path
    mHighlightLinePath.reset();

    if (set.isDrawHighlightToMaxEnabled()) {
        mHighlightLinePath.moveTo(x, mViewPortHandler.contentTop());
    } else {
        mHighlightLinePath.moveTo(x, y);
    }
    mHighlightLinePath.lineTo(x, mViewPortHandler.contentBottom());

    c.drawPath(mHighlightLinePath, mHighlightPaint);
}

//如果有必要的话横向高亮线也可以相应的修改,我的项目中没有使用横向高亮线,因此暂时不做处理
复制代码

至此,修改完毕,我们只需要对使用到的 dataset 设置相应的属性为 false,即可实现高亮线只绘制到交点。代码:

//高亮线只绘制到交点
set1.setDrawHighlightToMax(false);
复制代码

最终实现的效果如图:

image.png

猜你喜欢

转载自juejin.im/post/7107494535332102157