MPAndroidChart绘制图表

最新项目上遇到要绘制图表的功能，研究了一下，也使用了一些绘制图表的库，其中包含AChartEngine （google自带），但是goole自带的功能简单，要想绘制绚丽的图表要自己改源码。所以，这里推荐一款绘制图表的库–MPAndroidChart。

MPAndroidChart的源码地址：https://github.com/PhilJay/MPAndroidChart

下面将详细介绍绘制过程，xml什么的就略过了（因为每个图就是一个控件）。

1、饼状图PieChat

/** * PieChat * * @param mPieChat */
    public void initPieChat(PieChart mPieChat, List<Map<String, Object>> list) {

        mPieChat.setUsePercentValues(true);//显示百分比
        mPieChat.setDescription("");
        mPieChat.setDrawHoleEnabled(true);
        mPieChat.setHoleColorTransparent(true);

        mPieChat.setTransparentCircleColor(Color.WHITE);

        mPieChat.setHoleRadius(30f);//半径
        mPieChat.setTransparentCircleRadius(32f);//半透明圆

        mPieChat.setDrawCenterText(false);//饼状图中间可以添加文字

        mPieChat.setRotationAngle(0);//初始旋转角度
        // enable rotation of the chart by touch
        mPieChat.setRotationEnabled(false);//可以手动旋转

        PieData data = getPieData(list);
        data.setValueFormatter(new PercentFormatter());
        data.setValueTextSize(15f);

        data.setValueTextColor(Color.WHITE);
        data.setDrawValues(true);
        mPieChat.setData(data);
        // undo all highlights
        mPieChat.highlightValues(null);
        mPieChat.setDrawSliceText(false);//让xValues不显示 找了好久的源码才发现
        mPieChat.invalidate();

        Legend mLegend = mPieChat.getLegend();  //设置比例图
        mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_INSIDE);
// mLegend.setForm(LegendForm.LINE); //设置比例图的形状，默认是方形
// mLegend.setXEntrySpace(7f);
// mLegend.setYEntrySpace(5f);
    }

private PieData getPieData(List<Map<String, Object>> list) {
        ArrayList<String> xValues = new ArrayList<String>();  //xVals用来表示每个饼块上的内容
        ArrayList<Entry> yValues = new ArrayList<Entry>();  //yVals用来表示封装每个饼块的实际数据

        for (int i = 0; i < list.size(); i++) {
            Log.i("YUQING", "ChatUtil key=" + list.get(i).get("key").toString());
            xValues.add(list.get(i).get("key").toString());  //饼块上显示
            yValues.add(new Entry((int) list.get(i).get("count"), i));
        }
        //y轴的集合
        PieDataSet pieDataSet = new PieDataSet(yValues, null);
        pieDataSet.setSliceSpace(0f); //设置个饼状图之间的距离

        // 饼图颜色
        TypedArray colors = mContext.getResources().obtainTypedArray(R.array.pie_color);
        ArrayList<Integer> colorList = new ArrayList<Integer>();
        for (int i = 0; i < colors.length(); i++) {
            colorList.add(colors.getColor(i, 0));
        }
        pieDataSet.setColors(colorList);

// DisplayMetrics metrics = getResources().getDisplayMetrics();
// float px = 5 * (metrics.densityDpi / 160f);
// pieDataSet.setSelectionShift(px); // 选中态多出的长度

        PieData pieData = new PieData(xValues, pieDataSet);

        return pieData;
    }

2、柱状图BarChat

public void initBarChat(BarChart mBarChat, List<Map<String, Object>> mBarList) {

        mBarChat.setDrawBorders(false); ////是否在折线图上添加边框
        mBarChat.setDescription("");// 数据描述

        // 如果没有数据的时候，会显示这个，类似ListView的EmptyView
        mBarChat.setNoDataTextDescription("You need to provide data for the chart.");

        // enable / disable grid background
        mBarChat.setDrawGridBackground(true); // 是否显示表格颜色
        mBarChat.setGridBackgroundColor(mContext.getResources().getColor(R.color.pic_bg)); // 表格的的颜色

        mBarChat.setTouchEnabled(true); // 设置是否可以触摸

        mBarChat.setDragEnabled(false);// 是否可以拖拽
        mBarChat.setScaleEnabled(true);// 是否可以缩放

        mBarChat.setPinchZoom(false);//

        mBarChat.setBackgroundColor(mContext.getResources().getColor(R.color.pic_bg));// 设置背景

//        mBarChat.setDrawBarShadow(true);

        Legend mLegend = mBarChat.getLegend(); // 设置比例图标示
//        mLegend.setForm(LegendForm.CIRCLE);// 样式
//        mLegend.setFormSize(6f);// 字体
//        mLegend.setTextColor(Color.BLACK);// 颜色
        mLegend.setEnabled(false);
//      X轴设定
        XAxis xAxis = mBarChat.getXAxis();
        xAxis.setTextSize(12f);
        xAxis.setTextColor(mContext.getResources().getColor(R.color.line_xy_color));
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        YAxis rightAxis = mBarChat.getAxisRight();
        rightAxis.setEnabled(false);

        YAxis leftAxis = mBarChat.getAxisLeft();
        leftAxis.setTextColor(mContext.getResources().getColor(R.color.line_xy_color));
        leftAxis.setTextSize(12f);

        mBarChat.setData(getBarData(mBarList)); // 设置数据
        mBarChat.invalidate();
    }

private BarData getBarData(List<Map<String, Object>> mBarList) {

        // x轴的数据
        ArrayList<String> xValues = new ArrayList<String>();
        // y轴的数据
        ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();

        for (int i = 0; i < mBarList.size(); i++) {
            // x轴显示的数据，这里默认使用数字下标显示
            xValues.add(mBarList.get(i).get("key").toString());
            yValues.add(new BarEntry((int) mBarList.get(i).get("count"), i));
        }

        // create a dataset and give it a type
        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "");
        barDataSet.setHighlightEnabled(false);
        barDataSet.setDrawValues(false);
        barDataSet.setColor(mContext.getResources().getColor(R.color.line_color));

        ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
        barDataSets.add(barDataSet); // add the datasets
        BarData barData = new BarData(xValues, barDataSets);
        return barData;
    }

3、折线图LineChart

 /** * LineChat * * @param mLineChat */
    public void initLineChat(LineChart mLineChat, List<Map<String, Object>> list) {
        mLineChat.setDrawBorders(false); //是否在折线图上添加边框
        // no description text
        mLineChat.setDescription("");// 数据描述
        // 如果没有数据的时候，会显示这个，类似listview的emtpyview
        mLineChat.setNoDataTextDescription("You need to provide data for the chart.");

        // enable / disable grid background
        mLineChat.setDrawGridBackground(true); // 是否显示表格颜色
        mLineChat.setGridBackgroundColor(mContext.getResources().getColor(R.color.pic_bg)); // 表格的的颜色

        // enable touch gestures
        mLineChat.setTouchEnabled(true); // 设置是否可以触摸

        // enable scaling and dragging
        mLineChat.setDragEnabled(false);// 是否可以拖拽
        mLineChat.setScaleEnabled(false);// 是否可以缩放
        // if disabled, scaling can be done on x- and y-axis separately
        mLineChat.setPinchZoom(true);//

        mLineChat.setBackgroundColor(mContext.getResources().getColor(R.color.pic_bg));// 设置背景

        XAxis xAxis = mLineChat.getXAxis();
        xAxis.setTextSize(12f);
        xAxis.setTextColor(mContext.getResources().getColor(R.color.line_xy_color));
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        YAxis rightAxis = mLineChat.getAxisRight();
        rightAxis.setEnabled(false);

        YAxis leftAxis = mLineChat.getAxisLeft();
        leftAxis.setTextColor(mContext.getResources().getColor(R.color.line_xy_color));
        leftAxis.setTextSize(12f);

        Legend l = mLineChat.getLegend();
        l.setEnabled(false);
        // add data
        mLineChat.setData(getLineData(list)); // 设置数据
        mLineChat.invalidate();
    }

 private LineData getLineData(List<Map<String, Object>> list) {
        // x轴的数据
        ArrayList<String> xValues = new ArrayList<String>();
        // y轴的数据
        ArrayList<Entry> yValues = new ArrayList<Entry>();

        for (int i = 0; i < list.size(); i++) {
            // x轴显示的数据，这里默认使用数字下标显示
            xValues.add(list.get(i).get("key").toString());
            yValues.add(new Entry((int) list.get(i).get("count"), i));
        }

        // create a dataset and give it a type
        // y轴的数据集合
        LineDataSet lineDataSet = new LineDataSet(yValues, "" /*显示在比例图上*/);

        //用y轴的集合来设置参数
        lineDataSet.setLineWidth(3f); // 线宽
        lineDataSet.setDrawCircles(false);
// lineDataSet.setCircleSize(3f);// 显示的圆形大小
        lineDataSet.setColor(mContext.getResources().getColor(R.color.line_color));// 显示颜色
// lineDataSet.setCircleColor(Color.WHITE);// 圆形的颜色
// lineDataSet.setHighLightColor(Color.WHITE); // 高亮的线的颜色
        lineDataSet.setHighlightEnabled(false);
        lineDataSet.setDrawValues(false);
        lineDataSet.setDrawFilled(true);
        lineDataSet.setFillColor(mContext.getResources().getColor(R.color.line_fill_color));

        ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
        lineDataSets.add(lineDataSet); // add the datasets

        // create a data object with the datasets
        LineData lineData = new LineData(xValues, lineDataSets);

        return lineData;
    }