MPAndroidChart

其余文章索引：
MPAndroidChart开源图表框架—-柱状图（二）

下面简单介绍下MPAndroidChart
Github地址连接，后面是youtube上面演示MPAndroidChart的视频，MPAndroidChart由于提供了动画效果，为了兼容低版本的Android系统，MPAndroidChart需要添加nineoldandroids-2.4.0-2.jar作为依赖库，所以如果项目中使用这个表格库，需要同时导入这个两个jar，当然如果使用lib project的方式，就不用了。

https://github.com/PhilJay/MPAndroidChart

https://www.youtube.com/watch?v=ufaK_Hd6BpI

http://nineoldandroids.com/

MPAndroidChart核心功能:
支持x，y轴缩放
支持拖拽
支持手指滑动
支持高亮显示
支持保存图表到文件中
支持从文件（txt）中读取数据
预先定义颜色模板
自动生成标注
支持自定义x，y轴的显示标签
支持x，y轴动画
支持x，y轴设置最大值和附加信息
支持自定义字体，颜色，背景，手势，虚线等

各种图形样式在Github 地址上都有展示，在这里就不进行展示了

那开始进行实际操作-- MPAndroidChart开源图表框架----折线图（一）

效果图：

首先在xml文件中

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#2D2D2D" />

创建BaseChartUtil 公共的Chart工具类 注释都在代码中标明了

/**
 * Created by nan on 2016/2/1.
 * <p/>
 * chart base
 */
public abstract class BaseChartUtil {

    protected boolean mAxisLeft;
    protected boolean mAxisRight;
    protected boolean mXAxis;
    protected boolean mYAxis;

    public static final int[] CHARTCOLORS = new int[]{
            R.color.chart_color_23A2EF, R.color.chart_color_8E8E8E, R.color.chart_color_FB6E52,
            R.color.chart_color_FFCE55, R.color.chart_color_A0D468, R.color.chart_color_EC87BF
    };

    protected String[] mMonths = new String[]{
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"
    };


    protected String[] mParties = new String[]{
            "Party A", "Party B", "Party C", "Party D", "Party E", "Party F"
    };

	//这样设置是为了占位置 故透明不显示
    protected int[] color = {Color.TRANSPARENT, Color.TRANSPARENT};
    protected String[] lable = {"", ""};

    /**
     * 设置 左边轴 是否显示
     *
     * @param axisLeft
     * @return
     */
    public void setAxisLeft(boolean axisLeft) {
        this.mAxisLeft = axisLeft;
    }

    /**
     * 设置 右边轴 是否显示
     *
     * @param axisRight
     * @return
     */
    public void setAxisRight(boolean axisRight) {
        this.mAxisRight = axisRight;
    }

    /**
     * 设置 x表格是否显示
     *
     * @param xAxis
     * @return
     */
    public void setXAxis(boolean xAxis) {
        this.mXAxis = xAxis;
    }

    /**
     * 设置 y表格是否显示
     *
     * @param yAxis
     * @return
     */
    public void setYAxis(boolean yAxis) {
        this.mYAxis = yAxis;
    }


    /**
     * 设置表头样式    这个是折线表头样式
     *
     * @param l
     * @param LegendEnabled 是否显示  false：不显示   true：显示
     */


    public void setLegend(Legend l, boolean LegendEnabled) {
        if (LegendEnabled) {
            l.setTextColor(Color.TRANSPARENT);
            l.setCustom(color, lable);
            l.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);
            l.setForm(Legend.LegendForm.LINE);
        }
        l.setEnabled(LegendEnabled);
    }

    /**
     * /设置左边样式
     *
     * @param leftAxis
     * @param yAxisEnabled false：不显示   true：显示
     * @param maxValue     最大显示值
     * @param minValue     最小显示值
     */
    public void setLeftYAxis(YAxis leftAxis, boolean yAxisEnabled, float maxValue, float minValue) {
        if (yAxisEnabled) {
            leftAxis.setStartAtZero(false);
            leftAxis.setAxisMaxValue(maxValue);
            leftAxis.setAxisMinValue(minValue);
            leftAxis.setTextColor(Color.WHITE);
            leftAxis.setDrawAxisLine(false);
            //颠倒显示
            //leftAxis.setInverted(true);
            //显示Y轴的坐标数 true:按平均值  false:按整数 y-axis max = 25, min = 2, default: 6,
            //leftAxis.setLabelCount(10, false);
        }
        leftAxis.setEnabled(yAxisEnabled);
    }


    /**
     * /设置x 表格
     *
     * @param yAxis
     * @param yAxisEnabled false：不显示   true：显示
     */
    public void setyAxis(YAxis yAxis, boolean yAxisEnabled) {
        if (yAxisEnabled) {
            yAxis.setDrawAxisLine(true);
            yAxis.setDrawGridLines(true);
        }
        yAxis.setEnabled(yAxisEnabled);
    }

    /**
     * /设置y 表格
     *
     * @param xAxis
     * @param xAxisEnabled false：不显示   true：显示
     */
    public void setxAxis(XAxis xAxis, boolean xAxisEnabled) {
        if (xAxisEnabled) {
            xAxis.setTextColor(Color.WHITE);
            xAxis.setDrawGridLines(false);
            xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        }
        xAxis.setEnabled(xAxisEnabled);
    }


    /**
     * 设置数据
     */
//    public abstract void setData();
    public LineData setLineData(LineData lineData, boolean lineDataEnabled) {
        if (lineDataEnabled) {
            lineData.setValueTextColor(Color.WHITE);
            lineData.setValueTextSize(9f);
            // 设置折线上显示数据的格式。如果不设置，将默认显示float数据格式。
//            lineData.setValueFormatter(new ValueFormatter() {
//                @Override
//                public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
//                    int n = (int) value;
//                    String str = n + "℃";
//                    return str;
//                }
//            });
        }
        lineData.setDrawValues(lineDataEnabled);
        return lineData;
    }


    /**
     * 设置颜色
     *
     * @param context
     * @param color
     * @return
     */
    public int getColor(Context context, int color) {
        if (context != null && color != 0) {
            return context.getResources().getColor(color);
        }
        return 0x00ffffff;
    }

然后创建ChartUtil 工具类进行封装

/**
 * Created by nan on 2016/1/28.
 * <p/>
 * 双折线图
 * <p/>
 * <p/>
 * 创建CombinedLineChartUtil对象 必须调用的四个方法
 * mLineChartUtil.setRule(minValue, maxValue);
 * mLineChartUtil.setDateTime(dateTime);
 * mLineChartUtil.setTypes(types);
 * mLineChartUtil.setCombinedLineChart(mChart, yValsList);
 */
public class CombinedLineChartUtil extends BaseChartUtil {
    private Context mContext;
    private float minValue;
    private float maxValue;
    private List<String> dateTime;
    private List<Integer> types;


    public CombinedLineChartUtil(Context context) {
        this.mContext = context;
    }

    /**
     * 折线图  工具类
     * 2016--01--29
     * Demo中主要在listview中显示折线图
     * 第一个参数：节点 第二个参数：起始值 第三个参数：结束值
     *
     * @param minValue
     * @param maxValue
     */
    public void setRule(float minValue, float maxValue) {
        this.minValue = minValue;
        this.maxValue = maxValue;
    }


    public void setDateTime(List<String> dateTime) {
        if (dateTime == null) {
            dateTime = new ArrayList<>();
        }
        this.dateTime = dateTime;
    }

    /**
     * 折线图  工具类
     * 2016--01--29
     * Demo中主要在主页中显示两条的折线图
     * <p/>
     * //设置边框宽度
     * mChart.setBorderWidth(15f);
     * <p/>
     * //是否画边框
     * mChart.setDrawBorders(true);
     * <p/>
     * //边框的颜色
     * mChart.setBorderColor(Color.WHITE);
     * <p/>
     * //是否画标识
     * mChart.setDrawMarkerViews(false);
     * MyMarkerView mv = new MyMarkerView(mContext, R.layout.custom_marker_view);
     * // set the marker to the chart
     * mChart.setMarkerView(mv);
     * <p/>
     * 设置字体
     * Typeface tf = Typeface.createFromAsset(getActivity().getAssets(), "OpenSans-Light.ttf");
     * Legend l = mChart.getLegend();//头部描述设置
     * l.setTypeface(tf);* @param
     * <p/>
     * //是否画x轴
     * leftAxis.setDrawAxisLine(true);
     * leftAxis.setDrawGridLines(true);
     * <p/>
     * //相当于设置外边距
     * mChart.setExtraOffsets(20, 0, 0, 0);
     */

    public void setCombinedLineChart(final LineChart mChart, List<List<Entry>> yValsList) {
        if (yValsList == null || yValsList.size() <= 0) {
            mChart.setNoDataText("暂时没有数据进行图表展示！");
            mChart.getPaint(Chart.PAINT_INFO).setColor(0xFFADA9AA);
            mChart.getPaint(Chart.PAINT_INFO).setTextSize(28);
            mChart.invalidate();
            return;
        }
        // 图表为空时显示
        mChart.setDescription("");//描述  设置为空
        mChart.setGridBackgroundColor(Color.WHITE); //设置表格的背景颜色
        mChart.setScaleYEnabled(false);
        mChart.setScaleXEnabled(true);
        mChart.setDrawGridBackground(false);
        mChart.getAxisRight().setEnabled(mAxisRight);
        //设置为false以禁止通过在其上双击缩放图表。
        mChart.setDoubleTapToZoomEnabled(false);
        /** * 设置数据x和样式 */
        mChart.setData(setData(yValsList));
        setLegend(mChart.getLegend(), true);//头部描述设置
        setLeftYAxis(mChart.getAxisLeft(), true, maxValue, minValue);  //设置左边样式
        mChart.getAxisLeft().setValueFormatter(new YAxisValueFormatter() {//设置左边文字描述
            @Override
            public String getFormattedValue(float value, YAxis yAxis) {
                int n = (int) value;
                String str = n + "%";
                return str;
            }
        });
        setxAxis(mChart.getXAxis(), true);//设置x 表格
        /** * 是否执行动画   false 否  true 执行 */
        setAnimate(mChart, false);
        mChart.invalidate();
    }

    private LineData setData(List<List<Entry>> yValsList) {
        ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
        for (int i = 0; i < yValsList.size(); i++) {
            //前期图表只展示两条数据 多的不显示
            //TODO   后期显示条数问题在此处理  还有在DetailActivity中处理显示问题
            if (i > 1) {
                continue;
            }
            int color;
            if (getTypes() != null && getTypes().size() > i) {
                int type = getTypes().get(i);
                LogUtils.d("setData---type-->" + i + "-->" + type);
                switch (type) {
                    case 0:
                        color = CHARTCOLORS[0];//设置字体颜色  蓝色 实际值
                        break;
                    case 1:
                        color = CHARTCOLORS[1];//设置字体颜色  灰色目标值
                        break;
                    default:
                        color = CHARTCOLORS[i];//设置字体颜色  其他颜色的实际值
                        break;
                }
            } else {
                color = CHARTCOLORS[i];//设置字体颜色  其他颜色的实际值
            }
            dataSets.add(setYVals1Data1(yValsList.get(i), color)); // add the datasets
        }
        // create a data object with the datasets
        return setLineData(new LineData(dateTime, dataSets), false);
    }


    /**
     * 设置 折线图 蓝色折线样式
     *
     * @return
     */
    private LineDataSet setYVals1Data1(List<Entry> yVals1, int color) {
        /**         * 设置 蓝色折线的数据         */
        // create a dataset and give it a type
        LineDataSet set1 = new LineDataSet(yVals1, "Actual");
        set1.setAxisDependency(YAxis.AxisDependency.LEFT);
        set1.setColor(getColor(mContext, color));//设置字体颜色  其他颜色的实际值
        set1.setCircleColor(getColor(mContext, color));
        set1.setLineWidth(2f);
        set1.setCircleSize(3f);
        set1.setHighlightEnabled(true);
        set1.setHighLightColor(getColor(mContext, CHARTCOLORS[0]));
        set1.setHighlightLineWidth(2f);
        set1.setDrawHorizontalHighlightIndicator(false);
        set1.setDrawVerticalHighlightIndicator(true);
        set1.setDrawCircleHole(false);
        return set1;
    }

    private void setAnimate(LineChart mChart, boolean animateEnabled) {
        if (animateEnabled) {
            mChart.animateY(1500); //执行动画
        }
    }

    public List<Integer> getTypes() {
        return types;
    }

    public void setTypes(List<Integer> types) {
        this.types = types;
    }

}

最后直接调用

CombinedLineChartUtil mLineChartUtil = new CombinedLineChartUtil(mContext);
        mLineChartUtil.setRule(minValue, maxValue);//设置最小值和最大值
        mLineChartUtil.setDateTime(dateTime);//设置日期
        mLineChartUtil.setTypes(types);  //显示多根线
        mLineChartUtil.setCombinedLineChart(mChart, yValsList);//设置数据进行展示
        // /*     * Chart 中设置图表中最多显示的节点数     */
        mChart.setVisibleXRangeMinimum(CustomConstant.SET_VISIBLE_XRANGE_MINIMUM);

分享个返利程序，可以赚点零花钱。