关于MpAndroidChart-开源图表库

前言:

MpAndroidChart是一个开源图表库，它能实现多种常见的图表类型，如：折线图，饼图，堆叠图等。此外它还提供了一些对图表的操作功能，如：拖拽，缩放，显示标签等。这个第三方库能满足一般性图表开发需求。

关于使用：

1:引入依赖：

为目前使用的是MpAndroidChart-3.03版本，更新的版本可以去官网上找一找。
https://github.com/PhilJay/MPAndroidChart

需要在配置文件的allprojects中加入maven仓库

allprojects {
    repositories {
        google()
        jcenter()
        
        //添加本行
        maven{url"https://jitpack.io"}       
        
    }
}

然后引入依赖即可

implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

2:实现

• 饼图 PieChart

  
  PieChart.png

布局：

<com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现：

public class PieChartFragment extends Fragment {

    public PieChartFragment() {
        // Required empty public constructor

    }

    private PieChart pieChart;
    private List<PieEntry> entries ;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_pie_chart, container, false);
        pieChart = view.findViewById(R.id.pieChart);

        //添加数据
        entries = new ArrayList<>();
        entries.add(new PieEntry(12.0f,"未违章"));
        entries.add(new PieEntry(88.0f,"违章"));

        pieChart.setDrawHoleEnabled(true);                 //设置中心孔洞

        //设置描述内容
        String descriptionStr = "平台上有违章车辆和没违章车辆的占比统计";
        Description description = new Description();
        description.setText(descriptionStr);


        //设置图表边距，间接改变图表大小

        pieChart.setExtraLeftOffset(0f);
        pieChart.setExtraTopOffset(32f);
        pieChart.setExtraRightOffset(0f);
        pieChart.setExtraBottomOffset(32f);



        PieDataSet pieDataSet = new PieDataSet(entries,"违章情况");
        pieDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        pieDataSet.setValueLinePart1OffsetPercentage(80f);
        pieDataSet.setSliceSpace(4f);
        pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);       //设置连接线在图的外侧


        PieData pieData = new PieData(pieDataSet);
        pieData.setDrawValues(true);
        pieData.setValueFormatter(new PercentFormatter());
        pieChart.setData(pieData);
        pieChart.setDescription(description);                           //设置标签


        return view;

    }

}

• 柱状图 BarChart
  它可以同时写多组数据。并且可以实现堆叠效果也就是堆叠图。

  
  image.png

布局文件:

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现:

public class BarChartFragment extends Fragment {


    public BarChartFragment() {
        // Required empty public constructor
    }

    private BarChart barChart;
    private List<BarEntry> entryList1 ;
    private List<BarEntry> entryList2 ;
    private List<BarEntry> entryList3 ;
    private List<IBarDataSet> dataSetList ;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.fragment_bar_chart, container, false);
        barChart = view.findViewById(R.id.barChart);

        entryList1 = new ArrayList<>();
        entryList2 = new ArrayList<>();
        entryList3 = new ArrayList<>();
        dataSetList = new ArrayList<>();

        //表数据
        entryList1.add(new BarEntry(0f,1000f));
        entryList1.add(new BarEntry(3f,1100f));
        entryList1.add(new BarEntry(6f,9000f));

        entryList2.add(new BarEntry(1f,2000f));
        entryList2.add(new BarEntry(4f,15000f));
        entryList2.add(new BarEntry(7f,10500f));

        entryList3.add(new BarEntry(2f,1000f));
        entryList3.add(new BarEntry(5f,10900f));
        entryList3.add(new BarEntry(8f,19000f));

        BarDataSet barDataSet = new BarDataSet(entryList1,"保养支出");
        BarDataSet barDataSet2 = new BarDataSet(entryList2,"维修支出");
        BarDataSet barDataSet3 = new BarDataSet(entryList3,"保险支出");

        barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        barDataSet2.setColors(ColorTemplate.JOYFUL_COLORS);
        barDataSet3.setColors(ColorTemplate.JOYFUL_COLORS);

        dataSetList.add(barDataSet);
        dataSetList.add(barDataSet2);
        dataSetList.add(barDataSet3);

        BarData barData = new BarData(dataSetList);
        barData.setBarWidth(0.9f);          //设置柱体宽度，这样柱与柱之间间隔就是0.1

        barChart.setData(barData);
        barChart.setFitBars(true);
        barChart.invalidate();              //刷新


        return view;
    }

}

• 堆叠图
  它属于BarChart，但是由于数据发生变化他的显示也发生了变化。

  
  image.png

布局文件:

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/stackingBarChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现:

public class StackingBarChartFragment extends Fragment {


    public StackingBarChartFragment() {
        // Required empty public constructor
    }

    private BarChart barChart;
    private List<BarEntry> entryList ;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_stacking_bar_chart, container, false);
        barChart = view.findViewById(R.id.stackingBarChart);

        entryList = new ArrayList<>();
        entryList.add(new BarEntry(1,new float[]{123,456}));
        entryList.add(new BarEntry(2,new float[]{99,228}));
        entryList.add(new BarEntry(3,new float[]{150,396}));

        BarDataSet barDataSet = new BarDataSet(entryList,"京东");
        barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);

        barChart.setDrawValueAboveBar(false);
        barChart.setEnabled(true);

        BarData barData = new BarData(barDataSet);
        barData.setBarWidth(0.9f);          //设置柱体宽度，这样柱与柱之间间隔就是0.1

        barChart.setData(barData);

        return view;
    }

}

• 横向柱状图 HorizontalBarChart

  
  image.png

布局文件：

<com.github.mikephil.charting.charts.HorizontalBarChart
        android:id="@+id/horizontalBarchart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现:

public class HorizontalBarChartFragment extends Fragment {


    public HorizontalBarChartFragment() {
        // Required empty public constructor
    }

    private HorizontalBarChart barChart;
    private List<BarEntry> entryList ;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_horizontal_bar_chart, container, false);
        barChart = view.findViewById(R.id.horizontalBarchart);

        entryList = new ArrayList<>();
        entryList.add(new BarEntry(1,23));
        entryList.add(new BarEntry(2,17));
        entryList.add(new BarEntry(3,29));
        entryList.add(new BarEntry(4,20));

        barChart.setEnabled(true);

        BarDataSet barDataSet = new BarDataSet(entryList,"成本");
        barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        BarData barData = new BarData(barDataSet);
        barData.setBarWidth(0.9f);

        barChart.setData(barData);

        return view;
    }

}

• 折线图 LineChart
  也可以写多组数据,实现两条或者多条折线同时出现

  
  image.png
  

  布局文件:

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现:

public class LineChartFragment extends Fragment {


    public LineChartFragment() {
        // Required empty public constructor
    }

    private LineChart lineChart;
    private List<Entry> entryList ;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_line_chart, container, false);
        lineChart = view.findViewById(R.id.lineChart);

        entryList = new ArrayList<>();
        entryList.add(new BarEntry(1,10));
        entryList.add(new BarEntry(2,11));
        entryList.add(new BarEntry(3,9));

        lineChart.setEnabled(false);
        lineChart.setTouchEnabled(true);


        //样式设置
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setTextSize(10f);                 //设置x轴字体大小

        Description description = new Description();                    //隐藏右下角的描述
        description.setEnabled(false);
        lineChart.setDescription(description);


        LineDataSet lineDataSet = new LineDataSet(entryList,"温度");
        lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        LineData lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);



        return view;
    }

}

• 雷达图 RadarChart

  
  image.png
  

  布局文件:

<com.github.mikephil.charting.charts.RadarChart
        android:id="@+id/radarChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

具体实现:

public class RadarChartFragment extends Fragment {


    public RadarChartFragment() {
        // Required empty public constructor
    }

    private RadarChart radarChart;
    private List<RadarEntry> entryList;
    private List<String> xdata;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_radar_chart, container, false);
        radarChart = view.findViewById(R.id.radarChart);
        entryList = new ArrayList<>();
        xdata = new ArrayList<>();
        xdata.add("1");
        xdata.add("2");
        xdata.add("3");
        xdata.add("4");
        xdata.add("5");

        //设置显示标签
        XAxis xAxis = radarChart.getXAxis();
        xAxis.setTextSize(20f);
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return xdata.get((int)value % xdata.size());
            }
        });

        //设置雷达图中心为0
        YAxis yAxis = radarChart.getYAxis();
        yAxis.setLabelCount(5,true);
        yAxis.setAxisMinimum(0f);
        yAxis.setDrawTopYLabelEntry(false);
        yAxis.setTextSize(15f);

        radarChart.setDrawWeb(true);
        radarChart.setEnabled(false);

        entryList.add(new RadarEntry(12));
        entryList.add(new RadarEntry(9));
        entryList.add(new RadarEntry(11));
        entryList.add(new RadarEntry(16));
        entryList.add(new RadarEntry(10));

        RadarDataSet radarDataSet = new RadarDataSet(entryList,"研发成本");
        radarDataSet.setDrawValues(false);
        radarDataSet.setColors(ColorTemplate.JOYFUL_COLORS);

        RadarData radarData = new RadarData(radarDataSet);
        radarChart.setData(radarData);

        return view;
    }

}

以上共介绍了六种基本图表及使用方法，可以满足大部分的应用.