前言: 最近项目里有相关统计的功能。网上翻阅一番资料后。远远达不到实际功能的需求。故此库诞生了。如果有相关统计功能或隐藏功能,收藏下本库吧。这里只做个简单介绍。根据以往经验,自定义View的文章都没什么人看。如果大家感兴趣,我后续会出一篇详细教程。



一、统计图折线

折线图有26个自定义属性,高度定制化。足以满足你的审美,且带手势操作:

android MPAndroidChart设置Y轴 android自定义折线图_android




1.1、添加依赖

  • 项目build.gradle添加如下
allprojects {
 	repositories {
 		maven { url 'https://jitpack.io' }
 	}
 }
  • app build.gradle添加如下
dependencies {
        implementation 'com.github.lihangleo2:ChartView:1.0.0'
}


1.2、使用

xml里只需要这样:

<com.lihang.chart.ChartLineView
    android:id="@+id/chartLineView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    />



初始化数据代码:

public void initData() {
        //横坐标titles数据 
        ArrayList<String> axesTitles = new ArrayList<>();
        arrayList.add("2");
        arrayList.add("4");
        arrayList.add("6");
        arrayList.add("8");
        arrayList.add("10");
        //设置横坐标titles
        chartLineView.setHoriItems(arrayList);



        ArrayList<ChartLineItem>items = new ArrayList<>();
        /*
        * 参数:
        * 1、折线统计的数据源
        * 2、此折线的颜色值
        * 3、手势操作后,展示此折线数据的描述语
        * 4、此折线是否带阴影填充色
        * 5、此折线是否带动画展示
        * */
        items.add(new ChartLineItem(points, R.color.red, "昨日", true, true));
        items.add(new ChartLineItem(points_second, R.color.black, "今日", true, true));
        //设置折线数据源
        chartLineView.setItems(items);
    }

是不是超简单。



1.3、折线统计图自定义属性

在我们还未设置任何属性的时候,我们的坐标轴长这样:


android MPAndroidChart设置Y轴 android自定义折线图_java_02




  • 1、坐标轴颜色 app:cl_axesColor="#ff0000"
  • 2、坐标轴宽度 app:cl_axesWidth=“2dp”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_安卓_03




  • 3、刻度值颜色 app:cl_divideColor="#ff0000"
  • 4、刻度值宽度 app:cl_divideWith=“2dp”
  • 5、刻度值高度 app:cl_divideHeight=“5dp”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_java_04




  • 6、是否隐藏奇数刻度值(解决刻度值过密) app:cl_divide_hideOdd=“true”

图1为刻度值过密 --> 图2为隐藏奇数刻度值

android MPAndroidChart设置Y轴 android自定义折线图_安卓_05

android MPAndroidChart设置Y轴 android自定义折线图_安卓_06





  • 7、坐标轴文字颜色 app:cl_textColor="#ff0000"
  • 8、坐标轴文字大小 app:cl_textSize=“15dp”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_android_07




  • 9、纵轴最大值 app:cl_max=“1000”
  • 10、纵轴分几段 app:cl_span=“4”

这里要注意,如果传入的数值中,有比最大值还大,那么最终最大值为 传入数值最大值+设置最大值/4

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_ide_08




  • 11、是否隐藏Y轴 app:cl_hideY=“true”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_折线_09




  • 12、Y轴刻度值虚线是否显示 app:cl_Y_showDash=“true”
  • 13、Y轴刻度值虚线颜色 app:cl_Y_dashColor="#CCCCCC"
  • 14、Y轴刻度值虚线宽度 app:cl_Y_dashWith=“1dp”
  • 15、Y轴刻度值虚线间隔 app:cl_Y_dashDivide=“10dp”
  • 16、Y轴刻度值虚线的实线长度 app:cl_Y_dash_solidLength=“5dp”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_折线_10




  • 17、手势虚线颜色 app:cl_dashColor="#ff0000"
  • 18、手势虚线宽度 app:cl_dashWith=“1dp”
  • 19、手势虚线间隔 app:cl_dashDivide=“10dp”
  • 20、手势虚线的实线长度 app:cl_dash_solidLength=“5dp”
  • 21、手指离开后多久,虚线消失 app:cl_dashStay_duration=“1500”(-1表示常驻不会消失)
  • 22、是否禁止手势操作 app:cl_isOnTouch=“false”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_折线_11




  • 23、提醒背景颜色 app:cl_remind_backColor="#00BCD4"
  • 24、提醒文字颜色 app:cl_remind_textColor="#ff0000"
  • 25、提醒文字大小 app:cl_remind_textSize=“15dp”

修改后如图:


android MPAndroidChart设置Y轴 android自定义折线图_安卓_12




  • 26、折线图动画时间 app:cl_lineAnim_duratinotallow=“1500”



二、环状统计图

同样我们先看看饼状统计图的效果:

添加/移除item

初始角度startAngle

圆环or扇形

android MPAndroidChart设置Y轴 android自定义折线图_ide_13

android MPAndroidChart设置Y轴 android自定义折线图_ide_14

android MPAndroidChart设置Y轴 android自定义折线图_安卓_15

圆环比率

android MPAndroidChart设置Y轴 android自定义折线图_java_16


2.1、使用(未使用自定义属性,则使用默认值)

<com.lihang.chart.ChartCircleView
    android:id="@+id/charCircleView"
    android:layout_width="wrap_content"
    android:layout_height="200dp" />



初始化数据代码:

private void initData() {
        ArrayList<ChartCircleItem> items = new ArrayList<>();
        /*
        * 参数:
        * 1、当前的value的值
        * 2、绘制此部分的颜色值
        * 3、此部分的文字描述
        * */
        items.add(new ChartCircleItem(1, R.color.yellow, "原价"));
        items.add(new ChartCircleItem(3, R.color.blue, "优惠"));
        //设置数据源
        charCircleView.setItems(items);
    }

这样你就能用了。soEasy!




2.2、饼状统计图自定义属性

1、文字大小 app:cv_textSize=“16sp”
  • 这里指的是demo中原价/优惠的字体大小
2、文字颜色 app:cv_textColor="#ff0000"
  • demo中原价/优惠字体颜色
3、初始旋转角度 app:cv_startAngle="-90"
  • 可以控制统计图从哪个角度开始启动。默认是0度
4、圆环比率 app:cv_rate=“0.68”
  • 圆环比率,这里可以简单认为是控制圆环粗细的属性
5、扇形or圆环 app:cv_isArc=“true”
  • 改变控件外观。默认为圆环状,通过app:cv_isArc="true"可改变为扇形
6、圆环动画时间 app:cv_animDuration=“1500”
  • 圆环开始到结束的动画时间
7、是否需要动画 app:cv_isAnim=“true”
  • 圆环是否需要动画。这里要注意也可以动态改变,最终以代码为最终结果
//改变是否需要动画有2种方法
//方法1.
charCircleView.setAnim(true);

//方法2.(设置数据的时候)
charCircleView.setItems(true,items);