android 自定义 折线图

最新推荐文章于 2024-04-03 09:37:28 发布
最新推荐文章于 2024-04-03 09:37:28 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： android GUI 文章标签： android 自定义折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongbaidepao/article/details/12980357
版权

前面说了 饼图，现在再来个折线图。

很多功能 都可以在基础上添加，



接下来代码，这个只是 原始的基础功能代码。

package com.lvxin.chartview.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RadialGradient;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;


public class ChartView extends View {

	private int lineColor = Color.BLACK;           // 轴线颜色
	private float lineWith  = 1.0f;            // 轴线的粗细
	private int textColor;           // 设置文本的颜色
	private int textSize = 11;       // 设置文本字体的大小
	private int paintDataType;       // 设置点的类型
	private int leftMargins = 50;    // 左边距
	private int rightMargins =  20;  // 右边距
	private int buttomMargins = 10;   // 下边距
	private int topMargins = 10;      // 上边距
	private float XScale;             // X的刻度长度
	private int XLength;              // X轴的长度
	private int YScale;               // Y的刻度长度
	private int YLength;              // Y轴的长度
	private boolean hasYLine = true;  // 是否显示Y轴轴线
	private boolean hasXLine = true;  // 是否吸纳是X轴轴线
	private boolean hasYdata = true;  // 是否显示Y轴数据
	private boolean hasXScale= true;  // 是否显示X轴的刻度
	
	
	private int[] data;              // 数据
	private String Title;             // 显示的标题
	
	private Paint paintLine, paintText, paintShenHe, paintZi, paintHong,
			paintJu, paintHuang, paintLu, dottedLine, dataPaint;
	
	private int dataPaintColor = Color.RED;
	private int datapaintWidth = 3;

	
	public ChartView(Context context) {
		super(context);

	}

	public ChartView(Context contex, AttributeSet attributeSet) {
		super(contex, attributeSet);
	}

	
	public ChartView(Context context, int[] data) {
		super(context);
		setData(data);
	}

	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);// 重写onDraw方法
		if (null!= data) {
			initPaint();
			
			this.YLength = getHeight() - buttomMargins - topMargins;
			this.XLength = getWidth() - leftMargins - rightMargins;
			
			//根据X的数据得出 X刻度
			XScale = XLength / data.length;           
			
			if (this.getRight() < XScale){
				rightMargins = (int) (XScale + 10);	
			}	
			lineDraw(canvas);
		}
	}

	
	private void lineDraw(Canvas canvas) {		
		   //     X  Y 轴       
			if (isHasYLine()) {
				canvas.drawLine(leftMargins, topMargins + YLength, leftMargins,
						topMargins, paintLine);

			}
			if (isHasXLine()) {
				canvas.drawLine(leftMargins, topMargins + YLength, XLength
						+ leftMargins, topMargins + YLength, paintLine);
			}

			
		Paint[] paintList = { paintShenHe, paintZi, paintHong, paintJu,
				paintHuang, paintLu };
		String[] str = { "严重", "重度", "中度", "轻度", "良", "优" };
		
		
	    /*************************************************************************
		 *************************** 设置Y轴 **************************************
		 *************************************************************************
		 */
		for (int i = 0; i < 6; i++) {
			// 绘制颜色矩形             坐标点
			canvas.drawRect(
				   new RectF(leftMargins - 20,                      //左X
						     i * (YLength / 6f) + topMargins,       //上Y
						     leftMargins,                           //右X
						     (i + 1) * (YLength / 6f)+ topMargins), //下Y
					
				    paintList[i]);        
			
			
			// 绘制表格线
			canvas.drawLine(leftMargins, i * (YLength / 6f) + topMargins,
					XLength + leftMargins, i * (YLength / 6f) + topMargins,
					dottedLine);                  

			// 绘制程度文字
			//paintText.setStrokeWidth(1f);  //设置线的宽度
			paintText.setTextSize(16); //设置画出来的字体的大小	
			//paintText.setColor(color);
			//paintText.setTextAlign(align)
		   	 canvas.drawText(str[i], leftMargins - 50,                     //X
		   			                 (i + 1) * (YLength / 6f)- (YLength / 12f) + topMargins,//Y
		   			                 paintText); 
		}

		
		
		Path path1=new Path();
		dataPaint.setStrokeWidth(1);
		RectF oval2;

	       /*************************************************************************
		 *************************** 设置X轴 **************************************
		 *************************************************************************
		 */
		for (int i = 0; i * XScale <= XLength && i < data.length; i++) {
			
			// 绘制刻度
			try {
				if (isHasXScale()){
					    canvas.drawText(String.valueOf(i), leftMargins + (i + 1)
							* XScale - 2, YLength + topMargins + 10, paintText); 
				}
			// 画折线		
				if (i > 0){
					canvas.drawLine(leftMargins + (i) * XScale, YCoord(getData()[i - 1]), 
					        leftMargins + (i + 1) * XScale, YCoord(getData()[i]), 
					        dataPaint);
			    }
				
			} catch (Exception e) {
			}
		}
		
		
	    /*************************************************************************
	     *************************** 设置 点的样式  ********************************
             *************************************************************************
	     */
		
		for (int i = 0; i * XScale <= XLength && i < data.length; i++) {
			
			try {	
				if (i > 0){
				  //绘制数值点
				   drawPaintType(canvas, 
				    		         leftMargins + (i + 1) * XScale,        //X    
						             YCoord(getData()[i]), 2, dataPaint);   //Y
				
				    //绘制数值
				   if (isHasYdata()){
					  // paintLine.setTextSize();
					canvas.drawText(String.valueOf(getData()[i]), leftMargins
							+ (i + 1) * XScale - (XScale / 2),
							getData()[i] > 280 ? YCoord(getData()[i]) + YLength
									/ 300f * 20 : YCoord(getData()[i])
									- YLength / 300f * 10, paintText);
				    }	
				}
				 
			} catch (Exception e) {
			}
		}
	}
	

	protected void drawPaintType(Canvas canvas, float cx, float cy,
			float radius, Paint paint) {
		Paint paintTmp;
		switch (getPaintDataType()) {
		case 0:
			break;
		case 1: // 绘制空心圆
			paintTmp = paint;
			paintTmp.setStyle(Paint.Style.STROKE);
			canvas.drawCircle(cx, cy, radius, paintTmp);
			break;
		case 2: // 绘制实心圆
			paintTmp = paint;
			paintTmp.setStyle(Paint.Style.FILL);
			canvas.drawCircle(cx, cy, radius, paintTmp);
			break;
		case 3: // 绘制空心方块
			paintTmp = paint;
			paintTmp.setStyle(Paint.Style.STROKE);
			canvas.drawRect(new Rect((int) cx - 2, (int) cy + 2, (int) cx + 2,
					(int) cy - 2), paintTmp);
			break;
		case 4:// 绘制实心方块
			paintTmp = paint;
			paintTmp.setStyle(Paint.Style.FILL);
			canvas.drawRect(new Rect((int) cx - 2, (int) cy + 2, (int) cx + 2,
					(int) cy - 2), paintTmp);
			break;
			
		case 5: // 绘制实心圆
			paintTmp = paint;
			paintTmp.setStyle(Paint.Style.FILL);
			paint.setStyle(Paint.Style.FILL_AND_STROKE);
		    RadialGradient  mRadialGradient = new RadialGradient(cx,cy, 6,
		    		new int[]{Color.WHITE,Color.WHITE,Color.WHITE,Color.WHITE,Color.WHITE, 
		    		Color.WHITE,Color.WHITE,Color.WHITE,Color.WHITE,Color.WHITE, 
		    		Color.RED, Color.RED ,Color.RED},  
		     null,RadialGradient.TileMode.REPEAT); 
		    paint.setShader(mRadialGradient);
			canvas.drawCircle(cx, cy, 6, paintTmp);
			paint.setShader(null);
			break;
		
		}
	}
	
	
	//处理 显示数据的====================== 这个其实可以判断的-自己设置这里知道300
	private int YCoord(int y0){
		if (y0 > 300){		
			return YLength + topMargins - YLength;
		}else{
			return (int) (YLength + topMargins - y0 * (YLength / 300f));
		}
	}


	private void initPaint() { // 生成Paint
		paintLine = new Paint();
		paintLine.setStyle(Paint.Style.STROKE);
		paintLine.setAntiAlias(true);// 去锯齿

		if (getLineColor() != 0){
			paintLine.setColor(getLineColor());
		}else{
			paintLine.setColor(Color.BLACK);
		}
			
		if (getLineWith() != 0)
			paintLine.setStrokeWidth(getLineWith());

		paintText = new Paint();
		paintText.setStyle(Paint.Style.STROKE);
		paintText.setAntiAlias(true);// 去锯齿
		paintText.setColor(getTextColor());
		paintText.setTextSize(getTextSize()); // 设置轴文字大小

		// Paint 褐红色
		paintShenHe = new Paint();
		paintShenHe.setColor(Color.rgb(132, 8, 57));
		paintShenHe.setAntiAlias(true);

		// Paint 紫色
		paintZi = new Paint();
		paintZi.setColor(Color.rgb(173, 0, 107));
		paintZi.setAntiAlias(true);

		// Paint 红色
		paintHong = new Paint();
		paintHong.setColor(Color.rgb(247, 8, 24));
		paintHong.setAntiAlias(true);

		// Paint 橘黄
		paintJu = new Paint();
		paintJu.setColor(Color.rgb(255, 125, 0));
		paintJu.setAntiAlias(true);

		// Paint 黄色
		paintHuang = new Paint();
		paintHuang.setColor(Color.rgb(255, 231, 24));
		paintHuang.setAntiAlias(true);

		// Paint 绿色
		paintLu = new Paint();
		paintLu.setColor(Color.rgb(82, 219, 57));
		paintLu.setAntiAlias(true);

		// 虚线
		dottedLine = new Paint();
		dottedLine.setColor(Color.rgb(89, 187, 241));
		dottedLine.setAntiAlias(true);
		dottedLine.setAlpha(100);

		// 数据Paint
		dataPaint = new Paint();
		dataPaint.setAntiAlias(true);
		dataPaint.setColor(getDataPaintColor());
		dataPaint.setStrokeWidth(getDatapaintWidth());

	}


	/**
	 * @return 获得要显示的数据
	 */
	public int[] getData() {
		return data;
	}

	/**
	 * @param 设置要显示的数据
	 */
	public void setData(int[] data) {
		this.data = data;
	}

	/**
	 * @return 获得显示数据的线的颜色
	 */
	public int getLineColor() {
		return lineColor;
	}

	/**
	 * @param 设置要显示数据线的颜色
	 */
	public void setLineColor(int lineColor) {
		this.lineColor = lineColor;
	}

	/**
	 * @return 要显示数据的线的宽度
	 */
	public float getLineWith() {
		return lineWith;
	}

	/**
	 * @param 设置要显示线的数据的宽度
	 */
	public void setLineWith(int lineWith) {
		this.lineWith = lineWith;
	}
   
	/**
         * @return 线条的颜色
         */
	
	public void setDataPaintColor(int dataPaintColor) {
		this.dataPaintColor = dataPaintColor;
	}
	
	public int getDataPaintColor() {
		return dataPaintColor;
	}

	
	/**
	 * @return 线条的宽度
	 */
	public void setDatapaintWidth(int datapaintWidth) {
		this.datapaintWidth = datapaintWidth;
	}
	
	public int getDatapaintWidth() {
		return datapaintWidth;
	}

	
	/**
	 * @return 点的类型
	 */
	public int getPaintDataType() {
		return paintDataType;
	}

	/**
	 * @param paintType  设置点的类型 1 2 3 4 5
	 */
	public void setDataPaintType(int paintDataType) {
		this.paintDataType = paintDataType;
	}

	/**
	 * @return 是否显示Y轴轴线
	 */
	public boolean isHasYLine() {
		return hasYLine;
	}

	/**
	 * @param 设置是否显示Y轴轴线
	 */
	public void setHasYLine(boolean hasYLine) {
		this.hasYLine = hasYLine;
	}

	/**
	 * @return 是否显示X轴轴线
	 */
	public boolean isHasXLine() {
		return hasXLine;
	}

	/**
	 * @param 设置是否显示X轴轴线
	 */
	public void setHasXLine(boolean hasXLine) {
		this.hasXLine = hasXLine;
	}

	/**
	 * @return X轴的间距
	 */
	public float getXScale() {
		return XScale;
	}

	/**
	 * @param 设置x轴的间距
	 */
	public void setXScale(float xScale) {
		XScale = xScale;
	}

	/**
	 * @return X轴的长度
	 */
	public int getXLength() {
		return XLength;
	}

	/**
	 * @param 设置X轴的长度
	 */
	public void setXLength(int xLength) {
		XLength = xLength;
	}

	/**
	 * @return Y轴的刻度
	 */
	public int getYScale() {
		return YScale;
	}

	/**
	 * @param 设置Y轴的刻度
	 */
	public void setYScale(int yScale) {
		YScale = yScale;
	}

	/**
	 * @return Y轴的长度
	 */
	public int getYLength() {
		return YLength;
	}

	/**
	 * @param 设置Y轴的
	 */
	public void setYLength(int yLength) {
		YLength = yLength;
	}

	/**
	 * @return 是否显示坐标点的Y值
	 */
	public boolean isHasYdata() {
		return hasYdata;
	}

	/**
	 * @param 设置是否显示坐标点的Y值
	 */
	public void setHasYdata(boolean hasYdata) {
		this.hasYdata = hasYdata;
	}

	/**
	 * @return 文本字体的大小
	 */
	public int getTextSize() {
		return textSize;
	}

	/**
	 * @param 设置文本字体的大小
	 */
	public void setTextSize(int textSize) {
		this.textSize = textSize;
	}

	/**
	 * @return 文本字体的颜色
	 */
	public int getTextColor() {
		return textColor;
	}

	/**
	 * @param 设置文本字体的颜色
	 */
	public void setTextColor(int textColor) {
		this.textColor = textColor;
	}

	/**
	 * @return 是否显示X轴的刻度
	 */
	public boolean isHasXScale() {
		return hasXScale;
	}

	/**
	 * @param 设置是否显示X轴刻度
	 */
	public void setHasXScale(boolean hasXScale) {
		this.hasXScale = hasXScale;
	}

	/**
	 * @return 左边距
	 */
	public int getLeftMargins() {
		return leftMargins;
	}

	/**
	 * @param 设置左边距
	 */
	public void setLeftMargins(int leftMargins) {
		this.leftMargins = leftMargins;
	}

	/**
	 * @return 右边距
	 */
	public int getRightMargins() {
		return rightMargins;
	}

	/**
	 * @param 设置右边距
	 */
	public void setRightMargins(int rightMargins) {
		this.rightMargins = rightMargins;
	}

	/**
	 * @return 下边距
	 */
	public int getButtomMargins() {
		return buttomMargins;
	}

	/**
	 * @param 设置下边距
	 */
	public void setButtomMargins(int buttomMargins) {
		this.buttomMargins = buttomMargins;
	}

	/**
	 * @return 上边距
	 */
	public int getTopMargins() {
		return topMargins;
	}

	/**
	 * @param 设置上边距
	 */
	public void setTopMargins(int topMargins) {
		this.topMargins = topMargins;
	}

}

接下来是View的显示 需要的设置 

	ccView = (ChartView) findViewById(R.id.mycharview);
		// 设置要显示的数据
		ccView.setData(new int[] { 35, 46, 46, 32, 67, 89, 28, 28, 50,300}); 
		ccView.setHasYLine(false);     // 设置显示Y轴轴线

		ccView.setBackgroundColor(Color.rgb(240, 248, 255)); // 设置背景颜色
		ccView.setLineColor(Color.rgb(46, 45, 44));// 设置轴线的颜色
		ccView.setLineWith(2);          // 设置轴线的宽度
		ccView.setDataPaintType(5);    // 设置数据坐标点的类型
		ccView.setTextColor(Color.BLACK);// 设置文本(优、良……)的颜色

XML 文件: 就是可以直接放入这个  view  或者 你把这个view add 到你的 布局中 

<com.ll.identityview.ChartView
        android:id="@+id/mycharview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />


空白的泡
关注
专栏目录
MPAndroidChart折线图Demo
12-14
Demo对应的博客地址：http://blog.csdn.net/kong_gu_you_lan/article/details/53634368
Android 简单/简易折线图的实现
最新发布
qimeng54321的博客
06-02 174
**创建视图View：LineChart ** 创建lineChart的XML布局放进layout目录里，名称fragment_zt_fragment 封装进入Fragment，方便使用（创建Zt_fragment java类继承Fragment） 具体使用 ** activity对应的布局** ** drawable资源,名称：radius_background04.xml** 这个东西的二次开发性蛮高的，可以根据自己的项目要求进行更改，另外通过取消线条然后再添加线条（数据跟随改变）还可以实现动态效果。
Android 实时曲线图/折线图
热门推荐
风晴
03-23 1万+
基于开源框架AChartEnginee绘制图表表格，实现显示数据折线图，对比功能。效果图如下： 新建工程 通过Android studio新建项目，添加achartenginee.jar依赖。点击下载jar 初始化图表 数据集 根据需求设置多条曲线，一条曲线对应一个XYSeries实例 series = new XYSeries(title); series2 =
AChartEngine: 动态图表绘制的利器
gitblog_00062的博客
04-03 356
AChartEngine: 动态图表绘制的利器 项目地址:https://gitcode.com/wangjia55/AChartEngine AChartEngine 是一个强大的开源库，专为Android平台设计，用于快速、轻松地创建各种数据可视化图表。无论你是开发数据分析应用还是需要在移动设备上展示复杂信息，AChartEngine都能成为你的得力助手。 技术分析 支持的图表类型 AChar...
Android之玩转MPAndroidChart让折线图柱形图饼状图散列图雷达图优雅的舞动.zip
07-30
Android之玩转MPAndroidChart让折线图柱形图饼状图散列图雷达图优雅的舞动.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
android自定义折线图曲线图
10-15
在Android开发中，自定义视图是实现特定图形或交互效果的重要手段，而自定义折线图和曲线图则是数据可视化中的常见需求。本篇将深入探讨如何在Android环境中实现这两种图表。 首先，我们需要理解折线图和曲线图的...
Android 自定义折线图
07-27
该返回值为折线图左右两端的padding值 LineView--->setPaintColor中的coorColor为坐标轴,坐标字体和选择竖线的颜色 private final int maxValue = 300;//上限阀值 private final int minValue = 0;//下限阀值 ...
Android自定义折线图，可左右滑动，可点击
01-10
首先，要创建这样一个自定义折线图，你需要了解Android的图形绘制原理，特别是使用Canvas和Paint类。Canvas是画布，用于绘制图形；Paint则包含了图形的样式和颜色等属性。在自定义视图（View）中，重写onDraw()方法...
Android自定义折线图
06-18
在提供的`LineChart-master`压缩包中，可能包含了实现上述功能的源代码示例，你可以通过阅读和学习这些代码来加深对Android自定义折线图的理解。通过不断实践和调整，你将能够创建出满足各种需求的高质量折线图组件...
Android自定义折线图，可设置基准线，不同点颜色
08-16
总的来说，Android自定义折线图是一项挑战性的任务，它涉及到图形绘制、布局适配、用户交互等多个方面。通过这个知识点的学习，开发者不仅可以创建美观的图表，还能提升对Android系统绘图机制的理解。在实际开发中，...
Android下各种曲线图汇总
08-30
汇总的Android下常见曲线图，附带源码，有些没有验证过
SimpleChart：适用于Android的简单折线图
03-04
SimpleChart：适用于Android的简单折线图
Android绘制动态折线图
01-20
所谓动态折线图，就是折线图能随着手指的滑动进行动态绘制，这里很定会产生动画效果。基于这个效果，这里使用SurfaceView进行制图。 实现步奏如下： (1): 这里新建一个绘图ChartView，继承SurfaceView并实现SurfaceHolder.Callback , Runnable接口，主要绘图工作在子线程中完成。 (2):现实 SurfaceHolder.Callback接口的三个方法，并在 surfaceCreated中开启子线程进行绘图。 (3):重写onTouchEvent方法，在Move事件中，根据手指的滑动距离计算偏移量，具体实现请看代码。 (4): 这里的折线图的坐
Android之自定义控件实现天气温度折线图和饼状图
02-28
自定义控件实现天气温度折线图和饼状图 。 博客地址：http://blog.csdn.net/dickyqie/article/details/58690947
Android绘制line chart的过程（折线图）
pomodoro
09-06 2794
安卓的前端有很多不错的开源框架，最近做了一个项目，用到了7个开源框架，虽然最近没有时间去一点点钻研源码，但是对其中的一些框架还是比较熟悉了。github上最好的chart框架是MpAndroidCharts,github地址,youtube上也有教学视频,csdn上有中文教程，除此之外还有另外一个很简单的一步一步画折线图的教程,看完以上内容，基本上已经差不多了，下面附上自己的一个demo：publi
Android 图表开源框架之MPAndroidChart LineChart折线图（三）
shenggaofei的博客
05-31 974
Android 图表开源框架之MPAndroidChart LineChart折线图（一） Android 图表开源框架之MPAndroidChart LineChart折线图（二） Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能
Android 画折线图 MPAndroidchart 折线图
afufufufu的博客
11-24 544
效果图 依赖 allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' activity.xml <?xml version="1.0" encoding="utf-8"?&g
Android实现折线图
qq_34873801的博客
11-02 2013
Android实现折线图直接上代码package com.example.tuxing;import java.util.ArrayList; import java.util.List; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import andr
Android实现绘制折线图
danwuxie的博客
01-16 1万+
本文转载自：https://www.cnblogs.com/rainday1/p/5547653.html 一、新建Constant类 package com.example.mpcc.myapplication; import android.graphics.Point; public class Constant { public static Point point;//...
Android自定义折线图View实现详解与属性设置
总结来说，这篇文章提供了自定义Android View创建简易折线图的基本框架，包括自定义属性的设置、视图的初始化和绘制过程中的关键步骤。对于想要学习自定义View和图形绘制的开发者来说，这是一个很好的起点，可以帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空白的泡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值