安卓图形之MPAndroidChart3.0详解二——饼状图_android mpchart 饼图

1 前言

饼图和折线图的相关设置和属性差别不大，相同点是：都是通过设置legend(图例)、description(标题)、填充数据等来达到我们想要的效果。但和折线图有差别的就是在饼图中没有yAxis和xAxis，其他大致相同。

2 基本使用

2.1 基础用法

下面这个demo仅仅只是描述了PieChart的基本只用，就只是填充了数据，基本没有设置其他样式
效果图：
>：可以看到，默认的饼图样式为空心圆，且有一点透明圈的感觉。还有旋转和点击放大的效果。

代码如下：

public class Pie_Frag extends Fragment {

    private PieChart pc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.pie_frag,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        pc = view.findViewById(R.id.pc);

        loadData();

    }

    private void loadData() {
        //设置偏移量
        pc.setExtraOffsets(20,20,20,20);
        //创建数据源List<PieEntry>对象
        List<PieEntry> pieEntries = new ArrayList<PieEntry>();
        
        //添加两个分组
        pieEntries.add(new PieEntry(40f,"有违章"));
        pieEntries.add(new PieEntry(60f,"无违章"));

        PieDataSet pieDataSet = new PieDataSet(pieEntries,"图例标题");
        pieDataSet.setColors(Color.RED,Color.BLUE);//分别为每个分组设置颜色

        PieData pieData = new PieData(pieDataSet);

        //填充数据
        pc.setData(pieData);

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

3 属性介绍

3.1 Description属性

常用属性

效果图

代码如下：

	//该方法在onCreate中直接调用即可，后面会给出完整代码
    private void setdDesc() {
        Description description = new Description();
        description.setText("这是饼图的标题");
        description.setTextColor(Color.RED);
        description.setTextSize(18f);
        description.setTypeface(Typeface.DEFAULT_BOLD);//字体加粗

		// 获取屏幕中间x 轴的像素坐标
        WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        float x = dm.widthPixels / 2;

        description.setXOffset(x);
        description.setYOffset(50f);
        pc.setDescription(description);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.2 Legend属性

常用属性

效果图：

代码：

	//该方法在onCreate中直接调用即可，后面会给出完整代码
 public void setLegend(){
        Legend legend = pc.getLegend();
        legend.setTextSize(16f);
        legend.setTextColor(Color.BLUE);
        //设置图例是在文字的左边还是右边
        legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);
        //设置图例为圆形，默认为方形
        legend.setOrientation(Legend.LegendOrientation.VERTICAL);
        legend.setForm(Legend.LegendForm.CIRCLE);
        legend.setFormSize(20);
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.CENTER);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        legend.setFormToTextSpace(15);
        legend.setXOffset(40);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.3 PieDataSet属性

PieDataSet是表示的为饼图部分
常用属性

代码如下：

   private void loadData() {
        //设置偏移量
        pc.setExtraOffsets(20,30,20,10);
        //创建数据源List<PieEntry>对象
        List<PieEntry> pieEntries = new ArrayList<PieEntry>();

        //添加两个分组
        pieEntries.add(new PieEntry(40f,"有违章"));
        pieEntries.add(new PieEntry(60f,"无违章"));

        PieDataSet pieDataSet = new PieDataSet(pieEntries,"图例标题");
        pieDataSet.setColors(Color.RED,Color.BLUE);//分别为每个分组设置颜色
//        pieDataSet.setDrawValues();是否绘制文字
        pieDataSet.setValueTextColor(Color.GREEN);//设置在饼图上显示的百分数颜色
        pieDataSet.setSelectionShift(15f);//设置饼块选中时偏离饼图中心的距离
        pieDataSet.setValueTextSize(16f);//设置在饼图上显示文字的大小
        pieDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
        pieDataSet.setSliceSpace(5f);//设置饼块与饼块之间的距离
        pieDataSet.setValueLineColor(Color.BLUE);//设置连接线的颜色
        //设置饼图上的文字是绘制在内部还是外部
       pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

        //可用过该属性可以设置是否绘制连接线
        pieDataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

        pieDataSet.setValueLineVariableLength(true);//设置数据连接线的长度是否可变
        //设置连接线距离饼图的距离，注意为百分数，1-100
        pieDataSet.setValueLinePart1OffsetPercentage(80f);
        //设置连接线的长度，一般取0-1的值即可
        pieDataSet.setValueLinePart1Length(0.8f);
        //设置连接线的宽度
        pieDataSet.setValueLineWidth(2f);
        final String strs[] = new String[]{"有违章","无违章"};

        //自定义格式
        pieDataSet.setValueFormatter(new IValueFormatter() {
            private int indd = -1;
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                indd++;
                return strs[indd] + value + "%";
            }
        });

        PieData pieData = new PieData(pieDataSet);

        //填充数据
        pc.setData(pieData);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

3.3 PicChart属性

PicChart设置的属性即为整个控件属性
常用属性

效果图：

完整代码如下

public class Pie_Frag extends Fragment {

    private PieChart pc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.pie_frag,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        pc = view.findViewById(R.id.pc);

        setdDesc();

        loadData();

        setLegend();
    }


    private void setdDesc() {
        Description description = new Description();
        description.setText("这是饼图的标题");
        description.setTextColor(Color.RED);
        description.setTextSize(18f);
        description.setTypeface(Typeface.DEFAULT_BOLD);//字体加粗

		// 获取屏幕中间x 轴的像素坐标
        WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        float x = dm.widthPixels / 2;

        description.setXOffset(x);
        description.setYOffset(50f);
        pc.setDescription(description);
    }

    public void setLegend(){
        Legend legend = pc.getLegend();
        legend.setTextSize(16f);
        legend.setTextColor(Color.BLUE);
        //设置图例是在文字的左边还是右边
        legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);
        //设置图例为圆形，默认为方形
        legend.setOrientation(Legend.LegendOrientation.VERTICAL);
        legend.setForm(Legend.LegendForm.CIRCLE);
        legend.setFormSize(20);
//        legend.setFormLineWidth(20);
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.CENTER);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        legend.setFormToTextSpace(15);
        legend.setXOffset(40);
    }

    private void loadData() {
        //设置偏移量
        pc.setExtraOffsets(20,30,20,10);
        //创建数据源List<PieEntry>对象
        List<PieEntry> pieEntries = new ArrayList<PieEntry>();

        //添加两个分组
        pieEntries.add(new PieEntry(40f,"有违章"));
        pieEntries.add(new PieEntry(60f,"无违章"));

        PieDataSet pieDataSet = new PieDataSet(pieEntries,"图例标题");
        pieDataSet.setColors(Color.RED,Color.BLUE);//分别为每个分组设置颜色
//        pieDataSet.setDrawValues();是否绘制文字
        pieDataSet.setValueTextColor(Color.GREEN);//设置在饼图上显示的百分数颜色
        pieDataSet.setSelectionShift(15f);//设置饼块选中时偏离饼图中心的距离
        pieDataSet.setValueTextSize(16f);//设置在饼图上显示文字的大小
        pieDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
        pieDataSet.setSliceSpace(5f);//设置饼块与饼块之间的距离

        pieDataSet.setValueLineColor(Color.BLUE);//设置连接线的颜色

        //可用过该属性可以设置是否绘制连接线
        pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

        //设置饼图上的文字是绘制在内部还是外部
        pieDataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

        pieDataSet.setValueLineVariableLength(true);//设置数据连接线的长度是否可变
        //设置连接线距离饼图的距离，注意为百分数，1-100
        pieDataSet.setValueLinePart1OffsetPercentage(80f);
        //设置连接线的长度，一般取0-1的值即可
        pieDataSet.setValueLinePart1Length(0.8f);
        //设置连接线的宽度
        pieDataSet.setValueLineWidth(2f);

        final String strs[] = new String[]{"有违章","无违章"};

        //自定义格式
        pieDataSet.setValueFormatter(new IValueFormatter() {
            private int indd = -1;
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                indd++;
                if(indd >= strs.length){
                    indd = 0;
                }
                return strs[indd] + value + "%";
            }
        });

        //设置初始旋转角度，没有动画
        pc.setRotationAngle(60f);

        //是否绘制中间的文本
        pc.setDrawCenterText(false);
        pc.setCenterText("中心文字");
        pc.setCenterTextSize(16f);
        pc.setCenterTextColor(Color.BLACK);
        pc.setCenterTextTypeface(Typeface.DEFAULT_BOLD);
        pc.setCenterTextSizePixels(20f);//设置中心显示文字的像素
        //是否绘制空洞，若为false则为实心圆，且不会绘制透明圈
        pc.setDrawHoleEnabled(false);
        //设置空洞的颜色
//        pc.setHoleColor(Color.GRAY);
        //设置空洞的半径大小
//        pc.setHoleRadius(-5f);

        //是否绘制饼图上的文字，不是百分比的那个文字
        pc.setDrawEntryLabels(false);

        //设置透明圈的半径，注意透明圈的半径必须大于空洞的半径，不然看不到效果默认55%
        pc.setTransparentCircleRadius(30f);
        //设置是否可以进行旋转
         pc.setRotationEnabled(false);

         pc.setHighlightPerTapEnabled(false);//设置点击是否可以放大

        pc.animateXY(800,800,Easing.EasingOption.EaseInOutQuad,Easing.EasingOption.EaseInOutQuad);

        PieData pieData = new PieData(pieDataSet);

        //填充数据
        pc.setData(pieData);

    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

综合案例

效果图

上面的描述和下面的框框都是用xml布局实现的

完整代码如下：

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:paddingBottom="10dp"
    android:layout_height="match_parent">

    <TextView
        android:layout_marginTop="20dp"
        android:textSize="22dp"
        android:gravity="center"
        android:textColor="@color/col_pie_bule"
        android:text="有无“重复违章记录的车辆”的占比统计"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pc_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:gravity="center"
        android:layout_marginLeft="350dp"
        android:background="@drawable/pie_border"
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content">
        <TextView
            android:background="@color/col_pie_bule"
            android:layout_width="25dp"
            android:layout_height="15dp"/>
        <TextView
            android:textSize="18dp"
            android:gravity="center"
            android:textColor="@color/col_pie_bule"
            android:text="无重复违章"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_marginLeft="20dp"
            android:background="@color/col_pie_red"
            android:layout_width="25dp"
            android:layout_height="15dp"/>
        <TextView
            android:textSize="18dp"
            android:gravity="center"
            android:textColor="@color/col_pie_bule"
            android:text="有重复违章"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

shape代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/gray" android:width="1dp"/>
    <corners android:radius="10dp"/>
</shape>
1
2
3
4
5

Java代码：

public class Pie_test extends Fragment {

    private PieChart pc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.pie_test,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        pc = view.findViewById(R.id.pc_test);

        loadData();

    }

    private void loadData() {

        //不显示描述/标题
        pc.getDescription().setEnabled(false);
        //不显示图例
        pc.getLegend().setEnabled(false);
        //设置上边和下边的偏移量
        pc.setExtraTopOffset(30);
        pc.setExtraBottomOffset(30);
        //数据源
        List<PieEntry> entries = new ArrayList<PieEntry>();
        entries.add(new PieEntry(86.1f));
        entries.add(new PieEntry(13.8f));
        //添加到PieDataSet中
        PieDataSet pieDataSet = new PieDataSet(entries,"");
        pieDataSet.setColors(getResources().getColor(R.color.col_pie_bule),getResources().getColor(R.color.col_pie_red));
        //自定义描述
        final String strs[] = {"无重复违章：","有重复违章："};

        pieDataSet.setValueFormatter(new IValueFormatter() {
            private int indd = -1;
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                indd ++;
                if(indd >= strs.length){
                    indd = 0;
                }
                return strs[indd] + value + "%";
            }
        });
        //设置饼块之间的间隔
        pieDataSet.setSliceSpace(10f);
        //设置点击某一饼快多出来的距离
        pieDataSet.setSelectionShift(15f);
        //设置连接线显示在外面
        pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
        //设置连接线距离饼图的距离，为百分数
        pieDataSet.setValueLinePart1OffsetPercentage(100f);
        //定义连接线的长度
        pieDataSet.setValueLinePart1Length(0.7f);
        
        //不绘制空洞
        pc.setDrawHoleEnabled(false);
        //不可旋转
        pc.setRotationEnabled(false);
        PieData pieData = new PieData(pieDataSet);
        //设置数据
        pc.setData(pieData);


    }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73