Android图表超简单实现柱状图、折线图、饼状图（基于MpAndroidChart）

本文基于MpAndroidChart实现各种图标，目的是让同学们快速实现图标效果
实现效果：
柱状图

折线图

饼状图

实现步骤：
1.导入
先从git上克隆下来，下载之后将jar包考到自己的工程
git地址
我用的是mpandroidchartlibrary-2-2-2.jar
2.柱状图实现
柱状图实现核心类：BarChart（用于显示柱状图）、BarData （用于设置数据和样式）

xml文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.github.mikephil.charting.charts.BarChart        android:id="@+id/bar_chart"        android:layout_width="match_parent"        android:layout_height="match_parent"></com.github.mikephil.charting.charts.BarChart></LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12

Activity文件

import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.Toast;import com.github.mikephil.charting.charts.BarChart;import com.github.mikephil.charting.data.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.highlight.Highlight;import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;import com.github.mikephil.charting.listener.OnChartValueSelectedListener;import com.github.mikephil.charting.utils.ColorTemplate;import java.util.ArrayList;public class ZhuzhuangtuActivity extends AppCompatActivity {    //显示的图表    public BarChart barChart;    //保存数据的实体（下面定义了两组数据集合）    public ArrayList<BarEntry> entries = new ArrayList<BarEntry>();    public ArrayList<BarEntry> entries1 = new ArrayList<>();    //数据的集合（每组数据都需要一个数据集合存放数据实体和该组的样式）    public BarDataSet dataset;    public BarDataSet dataset1;    //表格下方的文字    public ArrayList<String> labels = new ArrayList<String>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_zhuzhuangtu);        barChart = (BarChart) findViewById(R.id.bar_chart);        entries.add(new BarEntry(4f, 0));        entries.add(new BarEntry(8f, 1));        entries.add(new BarEntry(6f, 2));        entries.add(new BarEntry(12f, 3));        entries.add(new BarEntry(18f, 4));        entries.add(new BarEntry(9f, 5));        entries1.add(new BarEntry(4f, 0));        entries1.add(new BarEntry(8f, 1));        entries1.add(new BarEntry(6f, 2));        //设置数据组的数据        dataSet1 = new BarDataSet(entries1, "第二组数据");        //设置数据组的样式（参数是显示颜色的数组）        dataSet1.setColors(ColorTemplate.PASTEL_COLORS);        //设置柱状图上方显示数据字体大小        dataSet1.setValueTextSize(14);        labels.add("一月");        labels.add("二月");        labels.add("三月");        labels.add("四月");        labels.add("五月");        labels.add("六月");        dataset = new BarDataSet(entries, "第一组数据");        dataset.setColors(ColorTemplate.COLORFUL_COLORS);        ArrayList<IBarDataSet> dataSets = new ArrayList<>();        dataSets.add(dataset);        dataSets.add(dataSet1);        BarData data = new BarData(labels, dataSets);        barChart.setData(data);        //设置单个点击事件        barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {            @Override            public void onValueSelected(Entry entry, int i, Highlight highlight) {                Toast.makeText(getApplicationContext(),entry.getVal()+"",Toast.LENGTH_LONG).show();            }            @Override            public void onNothingSelected() {            }        });        //设置显示动画效果        barChart.animateY(2000);        //设置图标右下放显示文字        barChart.setDescription("MPandroidChart Test");    }}
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

3.折线图实现
xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"    >    <com.github.mikephil.charting.charts.LineChart        android:id="@+id/spread_line_chart"        android:layout_width="match_parent"        android:layout_height="fill_parent"        android:layout_gravity="center_horizontal"        /></RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Activity文件

import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import com.github.mikephil.charting.charts.LineChart;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.LineData;import com.github.mikephil.charting.data.LineDataSet;import java.util.ArrayList;public class ZhexiantuActivity extends AppCompatActivity {    public LineChart lineChart;    public ArrayList<String> x = new ArrayList<String>();    public ArrayList<Entry> y = new ArrayList<Entry>();    public ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();    public LineData lineData = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_zhexiantu);        lineChart = (LineChart)findViewById(R.id.spread_line_chart);        getLineData(100, 100);        showChart();    }    /**     * 初始化数据     * count 表示坐标点个数，range表示等下y值生成的范围     */    public LineData getLineData(int count, float range) {        for (int i = 0; i < count; i++) {  //X轴显示的数据            x.add(i + "");        }        for (int i = 0; i < count; i++) {//y轴的数据            float result = (float) (Math.random() * range) + 3;            y.add(new Entry(result, i));        }        LineDataSet lineDataSet = new LineDataSet(y, "随机产生的折线图");//y轴数据集合        lineDataSet.setLineWidth(1f);//线宽        lineDataSet.setCircleSize(Color.BLUE);//圆形颜色        lineDataSet.setCircleSize(2f);//现实圆形大小        lineDataSet.setColor(Color.RED);//现实颜色        lineDataSet.setHighLightColor(Color.BLACK);//高度线的颜色        lineDataSets.add(lineDataSet);        lineData = new LineData(x,lineDataSet);        return lineData;    }    /**     * 设置样式     */    public void showChart() {        lineChart.setDrawBorders(false);//是否添加边框        lineChart.setDescription("随机生成的数据");//数据描述        lineChart.setNoDataTextDescription("我需要数据");//没数据显示        lineChart.setDrawGridBackground(true);//是否显示表格颜色        lineChart.setBackgroundColor(Color.GRAY);//背景颜色        lineChart.setData(lineData);//设置数据        Legend legend = lineChart.getLegend();//设置比例图片标示，就是那一组Y的value        legend.setForm(Legend.LegendForm.SQUARE);//样式        legend.setFormSize(10f);//字体        legend.setTextColor(Color.BLUE);//设置颜色        lineChart.animateX(2000);//X轴的动画    }}
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

4.饼状图实现
xml文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"    >    <com.github.mikephil.charting.charts.PieChart        android:id="@+id/pie_chart"        android:layout_width="match_parent"        android:layout_height="fill_parent"        android:layout_gravity="center_horizontal"        /></RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Activity文件

import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.DisplayMetrics;import com.github.mikephil.charting.charts.PieChart;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.PieData;import com.github.mikephil.charting.data.PieDataSet;import java.util.ArrayList;public class BingzhuangtuActivity extends AppCompatActivity {    public PieChart mChart;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bingzhuangtu);        mChart = (PieChart) findViewById(R.id.pie_chart);        PieData mPieData = getPieData(4, 100);        showChart(mChart, mPieData);    }    private void showChart(PieChart pieChart, PieData pieData) {        pieChart.setHoleColor(Color.TRANSPARENT);        pieChart.setHoleRadius(60f);  //半径        pieChart.setTransparentCircleRadius(64f); // 半透明圈        //pieChart.setHoleRadius(0)  //实心圆        pieChart.setDescription("测试饼状图");        // mChart.setDrawYValues(true);        pieChart.setDrawCenterText(true);  //饼状图中间可以添加文字        pieChart.setDrawHoleEnabled(true);        pieChart.setRotationAngle(90); // 初始旋转角度        pieChart.setCenterTextSize(20);        pieChart.setDescriptionTextSize(20);        // draws the corresponding description value into the slice        // mChart.setDrawXValues(true);        // enable rotation of the chart by touch        pieChart.setRotationEnabled(true); // 可以手动旋转        // display percentage values        pieChart.setUsePercentValues(true);  //显示成百分比        // mChart.setUnit(" €");        // mChart.setDrawUnitsInChart(true);        // add a selection listener//      mChart.setOnChartValueSelectedListener(this);        // mChart.setTouchEnabled(false);//      mChart.setOnAnimationListener(this);        pieChart.setCenterText("Quarterly Revenue");  //饼状图中间的文字//        pieChart.animateY(3000);        //设置数据        pieChart.setData(pieData);        // undo all highlights//      pieChart.highlightValues(null);//      pieChart.invalidate();        Legend mLegend = pieChart.getLegend();  //设置比例图        mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART);  //最右边显示//      mLegend.setForm(LegendForm.LINE);  //设置比例图的形状，默认是方形        mLegend.setXEntrySpace(7f);//设置距离饼图的距离，防止与饼图重合        mLegend.setYEntrySpace(5f);        pieChart.animateXY(1000, 1000);  //设置动画        // mChart.spin(2000, 0, 360);    }    /**     * @param count 分成几部分     * @param range     */    private PieData getPieData(int count, float range) {        ArrayList<String> xValues = new ArrayList<String>();  //xVals用来表示每个饼块上的内容        for (int i = 0; i < count; i++) {            xValues.add("Quarterly" + (i + 1));  //饼块上显示成Quarterly1, Quarterly2, Quarterly3, Quarterly4        }        ArrayList<Entry> yValues = new ArrayList<Entry>();  //yVals用来表示封装每个饼块的实际数据        // 饼图数据        /**         * 将一个饼形图分成四部分， 四部分的数值比例为14:14:34:38         * 所以 14代表的百分比就是14%         */        float quarterly1 = 14;        float quarterly2 = 14;        float quarterly3 = 34;        float quarterly4 = 38;        yValues.add(new Entry(quarterly1, 0));        yValues.add(new Entry(quarterly2, 1));        yValues.add(new Entry(quarterly3, 2));        yValues.add(new Entry(quarterly4, 3));        //y轴的集合        PieDataSet pieDataSet = new PieDataSet(yValues, "Quarterly Revenue 2014"/*显示在比例图上*/);        pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离        ArrayList<Integer> colors = new ArrayList<Integer>();        // 饼图颜色        colors.add(Color.rgb(205, 205, 205));        colors.add(Color.rgb(114, 188, 223));        colors.add(Color.rgb(255, 123, 124));        colors.add(Color.rgb(57, 135, 200));        pieDataSet.setColors(colors);        DisplayMetrics metrics = getResources().getDisplayMetrics();        float px = 5 * (metrics.densityDpi / 160f);        pieDataSet.setSelectionShift(px); // 选中态多出的长度        PieData pieData = new PieData(xValues, pieDataSet);        return 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

转自:http://blog.csdn.net/XieChaoAndroid/article/details/53423341