Android statistics class custom View, line chart or ring chart

Foreword: There are related statistical functions in recent projects. After reading some information online. Far from meeting the actual functional requirements. So the library was born. If there are related statistical functions or hidden functions, save this library. Here is just a brief introduction. According to past experience, no one reads articles about custom View. If you are interested, I will post a detailed tutorial later.

1. Statistics chart broken line

The line chart has 26 custom attributes and is highly customized. Enough to satisfy your aesthetics, and with gesture operation:
Insert picture description here

Scanning two-dimensional experience effect (download password is: 123456):

1.1, add dependency

The project build.gradle is added as follows

allprojects {
      
      
 	repositories {
      
      
 		maven {
      
       url 'https://jitpack.io' }
 	}
 }

add app build.gradle as follows

dependencies {
      
      
        implementation 'com.github.lihangleo2:ChartView:1.0.0'
}

1.2, use

Only this is needed in xml:

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

Initialize data code:

    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);
    }

Is it super simple?

1.3, custom attributes of the line chart

When we have not set any properties, our coordinate axis is like this:

1. App: cl_axesColor="#ff0000"
2. Axis width app: cl_axesWidth="2dp"

As shown in the figure after modification:

3. Scale value color app: cl_divideColor="#ff0000"
4. Scale value width app:cl_divideWith=“2dp”
5. Scale value height app: cl_divideHeight="5dp"

As shown in the figure after modification:

6. Whether to hide the odd scale value (solve the scale value is too dense) app:cl_divide_hideOdd="true"

Figure 1 shows the scale value is too dense --> Figure 2 shows the hidden odd scale value

Sample Sample

7. Coordinate axis text color app: cl_textColor="#ff0000"
8. Coordinate axis text size app: cl_textSize="15dp"

As shown in the figure after modification:

9. The maximum value of the vertical axis app: cl_max = "1000"
10. The vertical axis is divided into several segments app: cl_span="4"

It should be noted here that if some of the incoming values are larger than the maximum value, then the final maximum value is the maximum value of the incoming value + the maximum value of the setting/4

As shown in the figure after modification:

11. Whether to hide Y axis app: cl_hideY="true"

As shown in the figure after modification:

12. Whether the dotted line of Y-axis scale value shows app:cl_Y_showDash=“true”
13. The dotted line color of the Y-axis scale value app: cl_Y_dashColor="#CCCCCC"
14. The width of the dashed line of the Y-axis scale value app:cl_Y_dashWith="1dp"
15. The dotted line interval of the Y-axis scale value app: cl_Y_dashDivide="10dp"
16. The length of the solid line of the dashed line of the Y-axis scale value app: cl_Y_dash_solidLength="5dp"

As shown in the figure after modification:

17. Gesture dotted line color app: cl_dashColor="#ff0000"
18. The width of the gesture dotted line app:cl_dashWith="1dp"
19. Gesture dotted line interval app: cl_dashDivide="10dp"
20. The solid line length of the dashed line of the gesture app: cl_dash_solidLength="5dp"
21. How long does the dashed line disappear after the finger leaves app: cl_dashStay_duration="1500" (-1 means the permanent residence will not disappear)
22. Whether to prohibit gesture operation app: cl_isOnTouch="false"

As shown in the figure after modification:

23. Reminder background color app: cl_remind_backColor="#00BCD4"
24. Reminder text color app: cl_remind_textColor="#ff0000"
25. Reminder text size app: cl_remind_textSize="15dp"

As shown in the figure after modification:

26. Line chart animation time app: cl_lineAnim_duration=“1500”

Two, ring chart

Similarly, let's first look at the effect of the pie chart:

Add/remove item	Initial angle startAngle	Ring or sector

Ring ratio

2.1. Use (if custom attributes are not used, default values are used)

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

Initialize data code:

    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);
    }

Then you can use it. soEasy!

2.2, pie chart custom attributes

1. Text size app: cv_textSize="16sp"

This refers to the font size of the original price / discount in the demo

2. Text color app: cv_textColor="#ff0000"

Original price/preferential font color in demo

3. The initial rotation angle app: cv_startAngle="-90"

You can control the angle from which the statistical graph starts. The default is 0 degrees

4. Ring rate app:cv_rate=“0.68”

Ring ratio, here can be simply regarded as the attribute that controls the thickness of the ring

5. Sector or circle app: cv_isArc="true"

Change the appearance of the control. The default is a circular ring shape, which can be changed to a fan shape by app:cv_isArc="true"

6. Circle animation time app: cv_animDuration="1500"

Animation time from start to end of the circle

7. Do you need an animation app: cv_isAnim="true"

Whether the ring needs animation. It should be noted here that it can also be changed dynamically, and finally the code is the final result

//改变是否需要动画有2种方法
//方法1.
charCircleView.setAnim(true);

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

For the specific use of this library, please go to github

My official account

I play the official account, and send some sincere articles. If you are learning Android, you can follow it. thank

Insert picture description here