Android实现简易的柱状图和曲线图表实例代码

前言

之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示,下面话不多说了,来一起看看详细的介绍吧。

1.效果图

2.各种图表的使用方式

1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用。

2.水平多柱状图

2.1 xml布局

<wellijohn.org.varchart.hor_bar_with_line_chart.ChartLine
 android:id="@+id/chartline"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@color/white"
 app:default_x_visible_num="4.2"//一个屏幕中显示多少列
 app:y_interval="40dp"//Y轴的间距
 app:y_num_text_max_width="56dp"//y轴左边的文字的宽度 />

还有y_visible_num:y轴需要显示几列

2.2 数据设置

public class HorBarActivity extends AppCompatActivity {
 //显示的坐标点
 private ChartLine mChartline;
 //多条折线的坐标点
 private List<List<DotVo>> mMulListDisDots;
 //x轴的点
 private String[] mXdots = new String[]{"08/18"
 , "08/19",
 "08/20", "08/21", "08/22", "08/23", "08/24",
 "08/25", "08/26", "08/27", "08/28", "08/29", "09/01", "09/02", "09/23",
 };
 private double mMax = 44;
 private Random rand = new Random();
 private List<CategoryVo> mCategoryList;
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_hor_bar);
 initView();
 initMulTestData();
 initCategoryList();
 try {
 mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationOpen(true).setListDisDots(mMulListDisDots).
  setCategoryList(mCategoryList).reDraw();
 } catch (YCoordinateException e) {
 Log.d("MainActivity", "onCreate: ");
 e.printStackTrace();
 }
 }
 /**
 * 柱状图的数据,是一个list,一个CategoryVo,就是一列中增加一个柱状
 * CategoryVo:{
 * 卡券类目的名称
 * private String categoryName;
 * 每个卡券类目的值
 * private List<String> categoryValueList;
 * }
 */
 private void initCategoryList() {
 mCategoryList = new ArrayList<>();
 mCategoryList.add(new CategoryVo());
 mCategoryList.add(new CategoryVo());
 mCategoryList.add(new CategoryVo());
 }
 /**
 * 初始化曲线图,private List<List<DotVo>> mMulListDisDots;
 * List<DotVo>>就是一条曲线图,
 */
 private void initMulTestData() {
 mMulListDisDots = new ArrayList<>();
 for (int i = 0; i < 3; i++) {
 ArrayList<DotVo> temp = new ArrayList();
 DotVo tempDotVo = new DotVo("08/18", rand.nextInt((int) mMax));
 temp.add(tempDotVo);
 DotVo tempDotVo1 = new DotVo("08/19", rand.nextInt((int) mMax));
 temp.add(tempDotVo1);
 DotVo tempDotVo2 = new DotVo("08/20", rand.nextInt((int) mMax));
 temp.add(tempDotVo2);
 DotVo tempDotVo3 = new DotVo("08/21", rand.nextInt((int) mMax));
 temp.add(tempDotVo3);
 DotVo tempDotVo4 = new DotVo("08/22", rand.nextInt((int) mMax));
 temp.add(tempDotVo4);
 DotVo tempDotVo5 = new DotVo("08/23", rand.nextInt((int) mMax));
 temp.add(tempDotVo5);
 DotVo tempDotVo6 = new DotVo("09/02", rand.nextInt((int) mMax));
 temp.add(tempDotVo6);

 mMulListDisDots.add(temp);
 }
 }
 private void initView() {
 mChartline = findViewById(R.id.chartline);
 }
}

3.叠加柱状图

3.1 xml布局

<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLayBarChartLine
 android:id="@+id/overlay_chart_line"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@color/white"
 android:visibility="visible"
 app:overlay_default_x_visible_num="4.2"
 app:overlay_y_interval="40dp"
 app:overlay_y_num_text_max_width="56dp" />

3.2 数据设置,如2.2一样

4.实现的几个关键点

4.1 宽度需要重写,onMeasure,因为的控件的宽度是大于屏幕的宽度的,宽度是根据显示的x轴的点和间距,以及y轴坐标的文字的所占的宽度的距离所组成。

 int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
 int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
 int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);
 int resultWidthSize = 0;
 int resultHeightSize = 0;
 int resultWidthMode = MeasureSpec.EXACTLY;//用来对childView进行计算的
 int resultHeightMode = MeasureSpec.EXACTLY;
 int paddingWidth = getPaddingLeft() + getPaddingRight();
 int paddingHeight = getPaddingTop() + getPaddingBottom();
 ViewGroup.LayoutParams thisLp = getLayoutParams();
 switch (widthParentMeasureMode) {
  //父类不加限制给子类
  case MeasureSpec.UNSPECIFIED:
  //这个代表在布局写死了宽度
  if (thisLp.width > 0) {
   resultWidthSize = thisLp.width;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.UNSPECIFIED;
  }
  break;
  case MeasureSpec.AT_MOST:
  //这个代表在布局写死了宽度
  if (thisLp.width > 0) {
   resultWidthSize = thisLp.width;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
   resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);
   resultWidthMode = MeasureSpec.AT_MOST;
  } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.AT_MOST;
  }
  break;
  case MeasureSpec.EXACTLY:
  //这个代表在布局写死了宽度
  if (thisLp.width > 0) {
   resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
   resultWidthSize = widthParentMeasureSize;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.AT_MOST;
  }
  break;
 }
 setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),
  MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));

4.2 规划固定的区域,在超出区域的部分不可见,这个在之前用的bitmap来实现,总感觉别扭,后面读官方的源码的时候,了解了canvas的clipRect方法,我们在绘制这块的时候,onDraw方法中调用

 int clipRestoreCount = canvas.save();
 canvas.clipRect(mContentRect);//绘制之前调用
 doDraw();//进行想要的绘制
 canvas.restoreToCount(clipRestoreCount);//绘制完成调用restoreToCount恢复到绘制这块之前的状态

4.3 动画我们基本都可以用ValueAnimator来实现,比如说饼状图:他的一个绘制是0-360的角度的转变,我们就可以

 private void startPathAnim(long duration) {
 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 360);
 valueAnimator.setDuration(duration);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mDrawAngle = (float) animation.getAnimatedValue();
  ViewCompat.postInvalidateOnAnimation(CirclePercentChart.this);
  }
 });
 valueAnimator.start();
 }

然后通过mDrawAngle来控制每次绘制的角度,这样就可以有从0-360度绘制的感觉,那个柱状图的动画也是一样的,以不变应万变。

4.4 贝塞尔曲线绘制的算法

 if (i == 0) {// 第一条为二阶贝塞尔
 path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);// 起点
 } else {
 float cpx = preX + (mDots[0] - preX) / 2.0f;
 path.cubicTo(cpx, preY + (mLastHorLineY - preY) * mPhaseY,
  cpx, mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY,
  mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);}

在绘制贝塞尔曲线,我仔细去查过这些控制点的计算规则,有根据三点,来计算出两个控制点,但是这样绘制出来在三个点内部曲线是很平滑的,但是在接下来的第四个点的衔接的时候,感觉不是很好,所以我还是用了上面的计算方法来计算控制点,算法我贴出来,参数分别是1,2,3的x和y坐标和弯曲系数

public static ControlPonits getControlPoints(double x0, double y0, double x1, double y1, double x2, double y2, double paramCoefficient) {
 double d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
 double d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
 double fa = paramCoefficient * d01 / (d01 + d12); // scaling factor for triangle Ta
 double fb = paramCoefficient * d12 / (d01 + d12); // ditto for Tb, simplifies to fb=t-fa
 double p1x = x1 - fa * (x2 - x0); // x2-x0 is the width of triangle T
 double p1y = y1 - fa * (y2 - y0); // y2-y0 is the height of T
 double p2x = x1 + fb * (x2 - x0);
 double p2y = y1 + fb * (y2 - y0);
 ControlPonits tempControlPoints = new ControlPonits();
 tempControlPoints.beforeControlPointX = (float) p1x;
 tempControlPoints.beforeControlPointY = (float) p1y;
 tempControlPoints.afterControlPointX = (float) p2x;
 tempControlPoints.afterControlPointY = (float) p2y;
 return tempControlPoints;
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

  • Android实现价格走势自定义曲线图
  • Android 自定义View实现芝麻分曲线图效果
  • Android 游戏开发中绘制游戏触摸轨迹的曲线图
  • Android 曲线图的绘制示例代码
(0)

相关推荐

  • Android 曲线图的绘制示例代码

    本文介绍了Android 曲线图的绘制示例代码,分享给大家,具体如下: 效果展示 效果展示.gif 使用方式 // 初始化数据表格相关 with(mTableView) { // 配置坐标系 setupCoordinator("日", "人", /*这里是横坐标的值*/0f, 5f, 10f, 15f, 20f, 25f, 30f) // 添加曲线, 确保纵坐标的数值位数相等 addWave(ContextCompat.getColor(this@MainActiv

  • Android 游戏开发中绘制游戏触摸轨迹的曲线图

    本篇文章主要来讲解怎样绘制游戏触摸轨迹的曲线图. 我们在onTouchEvent方法中,可以获取到触摸屏幕时手指触摸点的x.y坐标,如何用这些点形成一条无规则轨迹并把这条无规则轨迹曲线显示在屏幕上就是本篇文章的主旨内容. Android Path类 Android提供了一个Path类 , 顾名思义这个类可以设置曲线路径轨迹.任何无规则的曲线实际上都是由若干条线段组成,而线段的定义为两点之间最短的一条线.path类就 可以记录这两点之间的轨迹,那么若干个Path 就是我们须要绘制的无规则曲线. 下

  • Android 自定义View实现芝麻分曲线图效果

    1.简介 其实这个效果几天之前就写了,但是一直没有更新博客,本来想着把芝麻分雷达图也做好再发博客的,然后今天看到鸿洋的微信公众号有朋友发了芝麻分的雷达图,所以就算了,算是一个互补吧.平时文章也写的比较少,所以可能有点杂乱,有什么需要改进的地方欢迎给出建议,不胜感激. 效果图: 2.步骤: 初始化View的属性 初始化画笔 绘制代表最高分和最低分的两根虚线 绘制文字 绘制代表月份的属性 绘制芝麻分折线 绘制代表芝麻分的圆点 绘制选中分数的悬浮文字以及背景 处理点击事件 3.编码: 初始化View属

  • Android实现价格走势自定义曲线图

    本文是引用开源图表库框架 MPAndroidChart的LineChart 地址:https://github.com/PhilJay/MPAndroidChart 1.需求: (1)动态添加RadioButton,点击改变下面的LineChart数据 (2)LineChart绘制价格走势图,只显示最低点的小圆点和View,手指滑动,MarkView数据变化. (3) 服务端返回端数据,不是每一天端数据,但是x轴显示的必须是每一天的数据,这里是有我自己处理过的.返回里需要显示点的数组,之前的时间

  • Android实现简易的柱状图和曲线图表实例代码

    前言 之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示,下面话不多说了,来一起看看详细的介绍吧. 1.效果图 2.各种图表的使用方式 1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <well

  • Android实现一个包含表格的图标库实例代码

    之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示 1.效果图 2.各种图表的使用方式 1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <wellijohn.org.varchart.hor_

  • Android利用ZXing扫描二维码的实例代码解析

    相关阅读: Android开发框架之自定义ZXing二维码扫描界面并解决取景框拉伸问题 此项目源码地址:请点击这里 看一下zxing的项目结构,我这里直接拿过来用的 看一下扫码的activity: package com.fanyafeng.barcode.activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle

  • Android仿美团下拉菜单(商品选购)实例代码

    美团电商应用平台大家使用非常频繁,下面小编通过本文给大家介绍电商应用平台中常用的选择类别下拉列表的实现.先给大家展示下效果图: 一.下拉列表的实现 其实实现方法有很多,这时实现的也没有什么技术含量,只是总结下自己在项目中的做法,也提供一个思路. 首先是列表的数据,一般数据都是从后台读过来,这里因为没有后台,所以写死在客户端: private void initMenuData() { menuData = new ArrayList<map<string, string=""

  • android中图片加载到内存的实例代码

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="matc

  • Android界面上拉下拉的回弹效果实例代码

    废话不多说,具体代码如下所示: public class MyScrollView extends ScrollView { private View childView; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Co

  • Android中关于递归和二分法的算法实例代码

    // 1. 实现一个函数,在一个有序整型数组中二分查找出指定的值,找到则返回该值的位置,找不到返回 -1. package demo; public class Mytest { public static void main(String[] args) { int[] arr={1,2,5,9,11,45}; int index=findIndext(arr,0,arr.length-1,12); System.out.println("index="+index); } // 1

  • Android Uri和文件路径互相转换的实例代码

    在项目中需要用到将Uri转换为绝对路径,在网上找到一个方法,做个笔记 网上有不少方法,但是有的对4.4后的版本无效,这里的方法可以在4.4之后的版本将Uri转换为绝对路径 public class GetPathFromUri { /** * 专为Android4.4设计的从Uri获取文件绝对路径 */ public static String getPath(final Context context, final Uri uri) { final boolean isKitKat = Bui

  • Android 中TabLayout自定义选择背景滑块的实例代码

    TabLayout是Android 的Material Design包中的一个控件,可以和V4包中的ViewPager搭配产生一个联动的效果.这里我自定义了一个滑块能够跟随TabLayout进行滑动选择的SliderLayout.效果见下图(白色方框): 下面是SliderLayout的源码: import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawabl

  • Android自定义View实现箭头沿圆转动实例代码

    具体代码如下所示: //MyCircleView类 public class MyCircleView extends View{ //当前画笔画圆的颜色 private int CurrenCircleBoundColor; private Paint paint; ////从xml中获取的颜色 private int circleBundColor; private float circleBoundWidth; private float pivotX; private float piv

随机推荐