MPANDROIDCHAT 折线图 markview自定义

最新推荐文章于 2024-04-03 19:55:57 发布
最新推荐文章于 2024-04-03 19:55:57 发布
阅读量473 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40334300/article/details/108800396
版权

在这里插入图片描述
在这里插入图片描述


/**
 * 2020年9月25日 17:01:30
 * Email:androidls@163.com
 *
 * @author Bill
 */
public class CustomChartMarkView extends MarkerView {
	private final int DEFAULT_INDICATOR_COLOR = UI.getColor(R.color.main_color);//指示器默认的颜色
	private final int ARROW_HEIGHT = dp2px(3); // 箭头的高度
	private final int ARROW_WIDTH = dp2px(5); // 箭头的宽度
	private final float ARROW_OFFSET = dp2px(1);//箭头偏移量
	private final float BG_CORNER = dp2px(2);//背景圆角
	private Bitmap bitmapForDot;//选中点图片
	private int bitmapWidth;//点宽
	private int bitmapHeight;//点高
	private TextView tvValue0;
	DecimalFormat df = new DecimalFormat("0.00");

	public CustomChartMarkView(Context context, ValueFormatter valueFormatter) {
		super(context, R.layout.layout_hotmarkview);
		//tvDate = findViewById(R.id.tv_date);
		tvValue0 = findViewById(R.id.tv_value0);
		//tvValue1 = findViewById(R.id.tv_value1);
		//图片自行替换
		bitmapForDot = getBitmap(context, R.mipmap.icon_oval);
		bitmapWidth = bitmapForDot.getWidth();
		bitmapHeight = bitmapForDot.getHeight();
	}


	private static Bitmap getBitmap(Context context, int vectorDrawableId) {
		Bitmap bitmap = null;
		if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
			Drawable vectorDrawable = context.getDrawable(vectorDrawableId);
			bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
					vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
			Canvas canvas = new Canvas(bitmap);
			vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
			vectorDrawable.draw(canvas);
		} else {
			bitmap = BitmapFactory.decodeResource(context.getResources(), vectorDrawableId);
		}
		return bitmap;
	}

	@SuppressLint("SetTextI18n")
	@Override
	public void refreshContent(Entry e, Highlight highlight) {
		Chart chart = getChartView();
		if (chart instanceof LineChart) {
			LineData lineData = ((LineChart) chart).getLineData();
			//获取到图表中的所有曲线
			List<ILineDataSet> dataSetList = lineData.getDataSets();
			for (int i = 0; i < dataSetList.size(); i++) {
				LineDataSet dataSet = (LineDataSet) dataSetList.get(i);
				//获取到曲线的所有在Y轴的数据集合，根据当前X轴的位置 来获取对应的Y轴值
				float y = dataSet.getValues().get((int) e.getX()).getY();
//					if (i == 0) {
				tvValue0.setText(df.format(y));
//					}
//					if (i == 1) {
//						tvValue1.setText(dataSet.getLabel() + "：" + df.format(y * 100) + "%");
//					}
			}
			//tvDate.setText(valueFormatter.getFormattedValue(e.getX()));
		}
		super.refreshContent(e, highlight);
	}

	@Override
	public MPPointF getOffset() {
		return new MPPointF(-(getWidth() / 2), -getHeight());
	}


	@Override
	public void draw(Canvas canvas, float posX, float posY) {
		Chart chart = getChartView();
		if (chart == null) {
			super.draw(canvas, posX, posY);
			return;
		}

		//指示器背景画笔
		Paint bgPaint = new Paint();
		bgPaint.setStyle(Paint.Style.FILL);
		bgPaint.setAntiAlias(true);
		bgPaint.setColor(DEFAULT_INDICATOR_COLOR);
		//剪头画笔
		Paint arrowPaint = new Paint();
		arrowPaint.setStyle(Paint.Style.FILL);
		arrowPaint.setAntiAlias(true);
		arrowPaint.setColor(DEFAULT_INDICATOR_COLOR);

		float width = getWidth();
		float height = getHeight();

		int saveId = canvas.save();
		//移动画布到点并绘制点
		canvas.translate(posX, posY);
		canvas.drawBitmap(bitmapForDot, -bitmapWidth / 2f, -bitmapHeight / 2f, null);

		//画指示器
		Path path = new Path();
		RectF bRectF;
		if (posY < height + ARROW_HEIGHT + bitmapHeight / 2f) {//处理超过上边界
			//移动画布并绘制三角形和背景
			canvas.translate(0, height + ARROW_HEIGHT + bitmapHeight / 2f);
			if (posX > chart.getWidth() - (width / 2f)) {//超过右边界
				canvas.translate(-(width / 2 - (chart.getWidth() - posX)), 0);
				/*************绘制三角形  超过上边界 / 超过右边界**/
				path.moveTo(width / 2 - (chart.getWidth() - posX) - ARROW_OFFSET, -(height + ARROW_HEIGHT + ARROW_OFFSET));
				path.lineTo(ARROW_WIDTH / 2f, -(height - BG_CORNER));
				path.lineTo(-ARROW_WIDTH / 2f, -(height - BG_CORNER));
				path.moveTo(width / 2 - (chart.getWidth() - posX) - ARROW_OFFSET, -(height + ARROW_HEIGHT + ARROW_OFFSET));

			} else {
				if (posX > width / 2f) {//在图表中间
					path.moveTo(0, -(height + ARROW_HEIGHT));
					path.lineTo(ARROW_WIDTH / 2f, -(height - BG_CORNER));
					path.lineTo(-ARROW_WIDTH / 2f, -(height - BG_CORNER));
					path.lineTo(0, -(height + ARROW_HEIGHT));
				} else {//超过左边界
					canvas.translate(width / 2f - posX, 0);
					/*************绘制三角形 超过上边界 /  超过左边界**/
					path.moveTo(-(width / 2f - posX) - ARROW_OFFSET, -(height + ARROW_HEIGHT + ARROW_OFFSET));
					path.lineTo(ARROW_WIDTH / 2f, -(height - BG_CORNER));
					path.lineTo(-ARROW_WIDTH / 2f, -(height - BG_CORNER));
					path.moveTo(-(width / 2f - posX) - ARROW_OFFSET, -(height + ARROW_HEIGHT + ARROW_OFFSET));

				}
			}

			bRectF = new RectF(-width / 2, -height, width / 2, 0);
			canvas.drawPath(path, arrowPaint);
			canvas.drawRoundRect(bRectF, BG_CORNER, BG_CORNER, bgPaint);
			canvas.translate(-width / 2f, -height);
		} else {//没有超过上边界
			//移动画布并绘制三角形和背景
			canvas.translate(0, -height - ARROW_HEIGHT - bitmapHeight / 2f);
			if (posX < width / 2f) {//超过左边界  平移view
				canvas.translate(width / 2f - posX, 0);

				/*************绘制三角形 超过下边界 /  超过左边界**/
				path.moveTo(-(width / 2f - posX) + ARROW_OFFSET, height + ARROW_HEIGHT + ARROW_OFFSET);
				path.lineTo(ARROW_WIDTH / 2f, height - BG_CORNER);
				path.lineTo(-ARROW_WIDTH / 2f, height - BG_CORNER);
				path.moveTo(-(width / 2f - posX) + ARROW_OFFSET, height + ARROW_HEIGHT + ARROW_OFFSET);
			} else {
				if (posX > chart.getWidth() - (width / 2f)) {//超过右边界  绘制三角
					/*************绘制三角形 超过下边界 /  超过右边界**/
					canvas.translate(-(width / 2 - (chart.getWidth() - posX)), 0);
					path.moveTo(width / 2 - (chart.getWidth() - posX) + ARROW_OFFSET, height + ARROW_HEIGHT + ARROW_OFFSET);
					path.lineTo(ARROW_WIDTH / 2f, height - BG_CORNER);
					path.lineTo(-ARROW_WIDTH / 2f, height - BG_CORNER);
					path.moveTo(width / 2 - (chart.getWidth() - posX) + ARROW_OFFSET, height + ARROW_HEIGHT + ARROW_OFFSET);

				} else {
					path.moveTo(0, height + ARROW_HEIGHT);
					path.lineTo(ARROW_WIDTH / 2f, height - BG_CORNER);
					path.lineTo(-ARROW_WIDTH / 2f, height - BG_CORNER);
					path.moveTo(0, height + ARROW_HEIGHT);
				}

			}

			bRectF = new RectF(-width / 2, 0, width / 2, height);

			canvas.drawPath(path, arrowPaint);
			canvas.drawRoundRect(bRectF, BG_CORNER, BG_CORNER, bgPaint);
			canvas.translate(-width / 2f, 0);
		}
		draw(canvas);
		canvas.restoreToCount(saveId);
	}

	private int dp2px(int dpValues) {
		return (int) TypedValue.applyDimension(
				TypedValue.COMPLEX_UNIT_DIP, dpValues,
				getResources().getDisplayMetrics());
	}
}



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="@dimen/dp_3"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_value0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/sp_12"
        android:textColor="@color/white" />
    
</LinearLayout>
会发呆的小木鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MPAndroidChart的详细使用——MarkerView
Android_小黑
03-11 2975
iMarker接口可以实现自定义高亮显示标记的视图 上一篇：MPAndroidChart的详细使用——动画 下一篇：MPAndroidChart的详细使用——ChartData类以及ChartData子类 创建一个类去实现IMarker接口 public class YourMarkerView extends MarkerView { private TextView tvConten...
MPAndroidChart折线图Demo
12-14
Demo对应的博客地址：http://blog.csdn.net/kong_gu_you_lan/article/details/53634368
最牛逼android上的图表库MpChart（二） 折线图
热门推荐
欢迎关注公众号：【码农突围】，公号后台回复9999，可以获取一份500页的LeetCode刷题笔记。
06-28 2万+
最牛逼android上的图表库MpChart二 折线图
Android MPAndroidChart 自适应Markerview
fly7632785的专栏
04-09 3386
前言 Android里面只要用过图表的应该都知道MPAndroidChart这个库。这个库在iOS里面也有对应Charts，所以一般移动端做图表，Android和iOS两端都要实现同样的效果，他们是不错的一个选择。 但是，对于图表这种包含的情况非常复杂的东西，很难满足大家各种各样的需求，所以很多都需要自定义。下面就是给大家分享一下自己写的自适应MarkerView。 先上图 ...
安卓图形之MPAndroidChart3.0详解一——折线图
qq_43332570的博客
11-25 5957
1 前言 此篇文章主要讲解MPAndroidChart中 折线图 的基本使用，和一些常用方法的总结。以下均为个人总结。如有错误或者不妥之处，望在评论区留言。 1.1 基本使用 MPAndroidChart中的折线图主要由四部分组成 标题(Description) 图例(Legend) X轴(XAxis) Y轴(YAxis) 数据源(LineData) 后续操作基本都是对这四部分进行处理 1.1...
android自定义折线图曲线图
10-15
在Android开发中，自定义视图是实现特定图形或交互效果的重要手段，而自定义折线图和曲线图则是数据可视化中的常见需求。本篇将深入探讨如何在Android环境中实现这两种图表。 首先，我们需要理解折线图和曲线图的...
jfree生成百分比折线图，自定义纵坐标
12-02
jfree生成百分比折线图，自定义纵坐标，只需要把main方法下的存放地址修改到自己的地址就OK了，，
自定义折线图
07-24
本案例中的“自定义折线图”就是一个很好的实例，它能够提供美观的界面，展示数据变化趋势，适用于各种数据分析和展示的场景。 自定义折线图通常涉及到以下几个关键知识点： 1. **自定义View类**： - 创建一个...
折线图 自定义折线
01-09
原文地址：http://blog.csdn.net/u012840567/article/details/54289430
WPF自定义动态折线图
12-09
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现自定义动态折线图。WPF是微软提供的一种用于构建桌面应用程序的框架，它提供了丰富的UI设计能力和强大的图形处理能力。折线图是一种...
详解Android图表 MPAndroidChart折线图
08-31
本篇文章主要介绍了Android图表 MPAndroidChart折线图，MPAndroidChart的功能很强大，非常具有实用价值，需要的朋友可以参考下。
Android自定义折线图，可设置基准线，不同点颜色
08-16
Android自定义折线图，可设置基准线，不同点颜色，文章地址：http://blog.csdn.net/u013700040/article/details/77233590，如果有问题欢迎私信我
Android使用MPAndroidChart画折线图
春暖花自开
09-17 2581
MPAndroidChart GitHub地址https://github.com/PhilJay/MPAndroidChart 一个强大的Android图表视图/图形视图库，支持直线-条形-饼-雷达-气泡-烛台图以及缩放、平移和动画。 今天使用这个库生成一个折线图,先看效果图 先来初始化表格属性, private void initLineChart(){ //设置线状图不显示描述 heartRateLineChart.setDescription(null);
MPAndroidChart中出现的MarkerView偏移问题
chuyouyinghe的专栏
11-17 357
所以呢，在看了一篇文章：https://blog.csdn.net/fly7632785/article/details/79863086之后，仿照这位大牛的写法，将我自定义的MarkerView进行了重新修改。传了两个参数，一个是Entry，一个是Highlight，可以知道，这个与Highlight有密切的关系。首先，是要说 getOffset（）这个方法，在起初的设置中我是重写的它，然而发生了位置偏移。draw（），就是去画你自定义的MarkerView的内容，posX，posY，就是画在指定的点。
MPAndroidChart 教程：MarkerView（十一，宅家36天咸鱼翻身入职腾讯
最新发布
2401_83977825的博客
04-03 780
: 每次 重绘此方法都会被调用，并为您提供更新它显示的内容的机会（例如，为一个 设置文本 ，…）。 它提供了当前突出显示的 和相应的Highlight对象以获得更多信息。 : 在这里，应返回要绘制的 在x轴的偏移位置。 默认情况下， 的左上边缘处将绘制在 的位置。 在 参数表示绘制 的默认位置。 : 在这里，应返回要绘制的 在y轴的偏移位置。 默认情况下， 的左上边缘处将绘制在 的位置。 在 参数表示绘制 的默认位置。实现自定义 类的例子：public class CustomMark
android中marker动画,Android MPAndroidChart 自适应Markerview
weixin_29924309的博客
05-25 341
前言Android里面只要用过图表的应该都知道MPAndroidChart这个库。这个库在iOS里面也有对应Charts，所以一般移动端做图表，Android和iOS两端都要实现同样的效果，他们是不错的一个选择。但是，对于图表这种包含的情况非常复杂的东西，很难满足大家各种各样的需求，所以很多都需要自定义。下面就是给大家分享一下自己写的自适应MarkerView。先上图正常居中显示超过左边界超过上边...
MarkerView
Demi的博客
05-08 2507
前言： 过了一个愉快的五一后，我们又开始上班了，完成了本分的工作，抽点时间来和说说MarkerView咯。给我的印象，MarkerView的扩展性很强。它可以自定义自己想要的U样式. MarkerView源码 /** * View that can be displayed when selecting values in the chart. Extend this class ...
android marker 控件,MPAndroidChart标记控件MarkerView的使用方法
weixin_39595008的博客
05-30 1181
本站已经有几篇关于该曲线的使用文章，在此继续介绍下此共享库。MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图和雷达图。github地址：https://github.com/...
Android中mpchartlib折线图的详细属性以及实现（双曲线）
王小二的博客
07-20 2257
冒充前言的前言 个人觉得，这个第三方功能还是十分强大的，至少我的这几个项目所需的功能都可以满足。嗯，还是说说这个东西怎么用吧，以及各个属性的意思吧。step1：下载mpchartlib.jar，放进项目，add as library即可。jar包下载地址： http://download.csdn.net/download/qq_34947883/9937839 step2:放入布局文件中,如
echarts折线图拐点自定义图片
08-09
2. 在 ECharts 的 `series` 配置项中，找到对应的折线图系列，设置 `symbol` 属性为您自定义图片的路径，可以使用相对路径或者绝对路径。 ```javascript option = { // ... series: [ { type: 'line', data:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值