MPAndroidChart LineChart自定义maker的时候解决marker超出图表看不见

菜鸟进场,方圆十里,寸草不生

这段时间app上需要加一个图表,然后需求是根据设计图画。

就是这样婶儿的

照着网上的教程差不多也是照葫芦画瓢的弄得差不多了,但是发现一个问题。

点击线条弹出来的这个marker啊,在后面几个数据的时候就跑到外面去了。

按道理不应该啊,网上查了查,还要改源码,这么夸张的吗?

不过在网上找到了一个思路,就是判断手指点击位置x坐标来加上marker的长度是否大于图表宽度

那不就简单,写个自定义类,继承markerView这个类,重写画图的方法。简单~

先说说主要逻辑:
些两个相反的布局,一个现实对话框那个尾巴靠左,一个显示靠右(因为还有下面的那个圆圈,所以不能通过换背景达到目的),然后判断是否超出边界,然后显示靠左这个布局隐藏靠右那个布局,或者反之,恩~

public class MyChartMarkerView extends MarkerView {
	//靠左那个布局的文本控件
    private TextView tvMakerValue;
    //靠右那个布局的文本控件
    private TextView tvMakerValue1;
    //靠左那个布局
    private RelativeLayout rlMarker;
    //靠右那个布局
    private RelativeLayout rlMarker1;

        /**
         * Constructor. Sets up the MarkerView with a custom layout resource.
         *  查找控件(网上就是这么教的,没深究)
         * @param context
         * @param layoutResource the layout resource to use for the MarkerView
         */
        public MyChartMarkerView(Context context, int layoutResource) {
            super(context, layoutResource);
            tvMakerValue1 = findViewById(R.id.tv_maker_value_1);
            tvMakerValue = findViewById(R.id.tv_maker_value);
            rlMarker1 = findViewById(R.id.rl_marker_1);
            rlMarker = findViewById(R.id.rl_marker);
        }
        /**
         * 刷新数据,刷新之后重新绘制marker
         */
        public void refreshData(String data) {
        	//两个一起设置,反正有一个又看不见
            tvMakerValue.setText(data);
            tvMakerValue1.setText(data);
            invalidate();
        }
    	/**
     	*  重写绘制方法
     	*/
        @Override
        public void draw(Canvas canvas, float posX, float posY) {
            MPPointF mpPointF = new MPPointF();
            Chart chart = getChartView();
            float width = getWidth();
            float chartWidth = chart.getWidth();
            //右边超出的情况,显示一个,隐藏一个,设置对应的偏移量
            if (chartWidth < posX + width) {
                rlMarker1.setVisibility(GONE);
                rlMarker.setVisibility(VISIBLE);
                mpPointF.x = DensityUtil.dip2px(5f) - getWidth();
                mpPointF.y = -getHeight() + DensityUtil.dip2px(5f);
            } else {//右边没有超出的情况,同上
                rlMarker1.setVisibility(VISIBLE);
                rlMarker.setVisibility(GONE);
                mpPointF.x = -DensityUtil.dip2px(5f);
                mpPointF.y = -getHeight() + DensityUtil.dip2px(5f);
            }
            //绘制方法是直接复制过来的,没动
            int saveId = canvas.save();
            // translate to the correct position and draw
            canvas.translate(posX + mpPointF.x, posY + mpPointF.y);
            draw(canvas);
            canvas.restoreToCount(saveId);
        }
    }

好了,通过以上方法基本上就能完成自动飘左还是飘右了。

不过有一点需要注意,在双布局的xml文件中,两个布局都不能默认隐藏,如果隐藏的话在第一次点击的时候不会显示,原因可能是…我不会

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值