Android图表绘制之MPAndroidChart

来源：互联网发布：python 查看字节码编辑：程序博客网时间：2024/04/30 00:31

最近正在做用图表显示数据这一功能，之前一直没接触安卓中的图表绘制，刚开始有些不知所措，好在有GitHub这个神奇的网站！让我找到了一个强大的图表绘制工具——MPAndroidChart。有了这个工具，我很快入了手，下面简单记录一下如何利用MPAndroidChart绘制出最基础的图表。

一、添加Gradle依赖

dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
}
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}

二、绘制折线图——LineChart

1.单条折线图的实现，如下图

图一

在布局文件中添加控件：

 <com.github.mikephil.charting.charts.LineChart        android:id="@+id/linechart"        android:layout_width="600dp"        android:layout_height="350dp"        android:layout_gravity="center_horizontal"> </com.github.mikephil.charting.charts.LineChart>

final LineChart lineChart = (LineChart) v.findViewById(R.id.linechart);  //关联LineChart控件

//初始化一条折线的数据源 一个数据点对应一个Entry对象 Entry对象包含x值和y值 List<Entry> entries = new ArrayList<>(); Random random = new Random(); for (int i = 0 ; i < 10 ; i++){      entries.add(new Entry(i + 1 , random.nextInt(240) + 30)); }

将数据源装进折线对象LineDataSet ，并设置折线对象的相关属性：

 LineDataSet set = new LineDataSet(entries, "BarDataSet");       set.setColor(getResources().getColor(R.color.green));         //设置线条颜色 set.setDrawValues(true);                                      //设置显示数据点值                              set.setValueTextColor(getResources().getColor(R.color.green));//设置显示值的字体颜色 set.setValueTextSize(12);                                     //设置显示值的字体大小

设置折线图数据并绘制：

LineData lineData = new LineData(set);                                   lineChart.setData(lineData);lineChart.invalidate();                                                //刷新显示绘图lineChart.setBackgroundColor(getResources().getColor(R.color.black));  //设置LineChart的背景颜色//设置折线图中每个数据点的选中监听lineChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {        @Override       public void onValueSelected(Entry e, Highlight h) {                       }        @Override       public void onNothingSelected() {       } });

折线图相关属性的设置：

lineChart.setNoDataTextDescription("无数据");  //设置无数据时显示的描述信息lineChart.setDrawGridBackground(false);        //设置是否绘制网格背景lineChart.setScaleEnabled(false);              //设置图表是否缩放lineChart.setDescription("折线图");            //设置图表的描述信息lineChart.setDescriptionColor(Color.GREEN);    //设置描述信息的字体颜色lineChart.setDescriptionPosition(550,330);     //设置描述信息的显示位置   lineChart.setDescriptionTextSize(12);          //设置描述信息的字体大小

获得左y轴线并设置相关参数：

YAxis leftAxis = lineChart.getAxisLeft();     leftAxis.setTextColor(Color.GREEN);leftAxis.setDrawAxisLine(true);leftAxis.setDrawGridLines(false);leftAxis.setTextSize(12f);leftAxis.setAxisLineWidth(2);leftAxis.setAxisMinValue(0);leftAxis.setAxisMaxValue(280);leftAxis.setAxisLineColor(getResources().getColor(R.color.colorAccent));lineChart.getAxisRight().setEnabled(false); // 设置不显示右y轴  默认会显示右y轴

获得x轴对象并设置相关参数：

XAxis xAxis = lineChart.getXAxis();xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);xAxis.setTextSize(12f);xAxis.setAxisLineWidth(2);xAxis.setAxisMinValue(0);xAxis.setLabelCount(10);xAxis.setAxisMaxValue(10);xAxis.setAxisLineColor(getResources().getColor(R.color.colorAccent));xAxis.setTextColor(Color.GREEN);xAxis.setDrawAxisLine(true);xAxis.setDrawGridLines(false);

2.多条折线图的实现，如下图

图二

在单条折线图的基础上：增加折线条的数据源集，添加如下代码：

        List<Entry> entries1 = new ArrayList<>();        Random random = new Random();        for (int i = 0 ; i < 10 ; i++){           entries1.add(new Entry(i + 1 , random.nextInt(240) + 30));        }        //再创建一个折线对象set1：        LineDataSet set1 = new LineDataSet(entries1,"Label");        set1.setColor(getResources().getColor(R.color.colorPrimaryDark));    //给线条设置颜色        set1.setAxisDependency(YAxis.AxisDependency.RIGHT);                  //设置该折线的y值依赖右y轴 也可不设置 默认都依赖左y轴        set1.setDrawValues(true);        set1.setValueTextColor(getResources().getColor(R.color.colorPrimaryDark));        set1.setValueTextSize(12);        //将两个折线数据集添加到LineChart中        List<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();        dataSets.add(set);        dataSets.add(set1);        LineData lineData = new LineData(dataSets);        lineChart.setData(lineData);        lineChart.invalidate();        //获得右y轴并设置相关参数        YAxis rightAxis = lineChart.getAxisRight();        rightAxis.setTextColor(Color.GREEN);        rightAxis.setDrawAxisLine(true);        rightAxis.setDrawGridLines(false);        rightAxis.setTextSize(12f);        rightAxis.setAxisLineWidth(2);        rightAxis.setAxisMaxValue(200);        rightAxis.setAxisMinValue(0);        rightAxis.setAxisLineColor(getResources().getColor(R.color.colorPrimaryDark));        //添加图注（图二中的身高 体重）        Legend l = lineChart.getLegend();        l.setFormSize(10f);                  // set the size of the legend forms/shapes        l.setForm(Legend.LegendForm.CIRCLE); // set what type of form/shape should be used        l.setPosition(Legend.LegendPosition.ABOVE_CHART_CENTER);        l.setTextSize(12f);        l.setTextColor(Color.YELLOW);        l.setXEntrySpace(10f); // set the space between the legend entries on the x-axis        l.setYEntrySpace(5f);        int[] colors = {getResources().getColor(R.color.colorAccent),getResources().getColor(R.color.colorPrimaryDark)};        l.setCustom(colors, new String[] { "身高", "体重"});

3.添加标识线，如下图

图三

添加如下代码：

//标识特殊的界线  可以用来提示某个临界值        LimitLine l1 = new LimitLine(140f, "一级（轻度）");        l1.setLineColor(Color.RED);        l1.setLineWidth(2f);        l1.setTextColor(Color.GREEN);        l1.setTextSize(12f);        LimitLine ll = new LimitLine(160f, "二级（中度）");        ll.setLineColor(Color.RED);        ll.setLineWidth(2f);        ll.setTextColor(Color.GREEN);        ll.setTextSize(12f);        LimitLine lll = new LimitLine(180f, "三级（重度）");        lll.setLineColor(Color.RED);        lll.setLineWidth(2f);        lll.setTextColor(Color.GREEN);        lll.setTextSize(12f);        leftAxis.addLimitLine(l1);        leftAxis.addLimitLine(ll);        leftAxis.addLimitLine(lll);        leftAxis.setDrawLimitLinesBehindData(true);   //设置标识线在折线条的后面

三、绘制条形图（柱状图）——BarChart

1.单条条形图实现，如下图

图四

布局文件：

<com.github.mikephil.charting.charts.BarChart        android:id="@+id/barchar"        android:layout_width="600dp"        android:layout_height="350dp"></com.github.mikephil.charting.charts.BarChart>

关联控件：

final BarChart barChart = (BarChart) view.findViewById(R.id.barchart);

设置数据源时与折线图大体相同，稍有区别：

List<BarEntry> entries = new ArrayList<>();   //数据点的封装类变为BarChartRandom random = new Random();for (int i = 0 ; i < 10 ; i++){    entries.add(new BarEntry(i + 1 , random.nextFloat() + random.nextInt(3) + 35));}同样装载数据：BarDataSet set = new BarDataSet(entries, "BarDataSet");set.setColor(getResources().getColor(R.color.colorAccent));  //给线条设置颜色set.setDrawValues(true);set.setValueTextColor(getResources().getColor(R.color.colorAccent));set.setValueTextSize(12);final BarData data = new BarData(set);data.setBarWidth(0.9f);      // 设置条形的宽度barChart.setData(data);barChart.setFitBars(true); barChart.invalidate();

其他均与折线图差不多，只需把lineChart换成BarChart即可

2.多条条形图的实现，如下图

图五

增加数据源集，在单条的基础上，添加一个数据源（也可以是多个）：

List<BarEntry> entries1 = new ArrayList<>(); Random random = new Random();for (int i = 0 ; i < 10 ; i++){    entries1.add(new BarEntry(i + 1 , random.nextInt(50) + 50));}//装载数据BarDataSet set1 = new BarDataSet(entries1, "BarDataSet");set1.setAxisDependency(YAxis.AxisDependency.RIGHT);                  set1.setColor(getResources().getColor(R.color.colorPrimaryDark));   set1.setDrawValues(true);set1.setValueTextColor(getResources().getColor(R.color.colorPrimaryDark));set1.setValueTextSize(12);BarData data = new BarData(set,set1);      //参数可以是任意个 data.setBarWidth(0.45f);                   // 单个条形的宽度barChart.setData(data);barChart.setFitBars(true);          barChart.groupBars(0.1f, 0.1f, 0.0f);  //参数一是最左边的条形距离左y轴的距离 参数二是条形对（set和set1组成）与相邻条形对的距离，参数三是条形对中set与set1                                          之间的距离barChart.invalidate();

这里概述了最基础的折线图、条形图的画法，更详细、更多元化的做法请参考GitHub地址：https://github.com/PhilJay/MPAndroidChart

1 0