MPAndroidChart折线图一

背景：
MPAndroidChart折线图，是由于项目中要用到，所以这次把在做的过程中，所用到的api(网上很多，所以这里不是重点)，以及遇到的问题和怎样解决问题写了这篇文章。如果过程中有问题，希望大家及时的提出来，一起共同进步。

一、直接上需求效果图

随着移动x轴坐标，对应的时间点和扫码次数都发生改变。当是x轴是24小时显示的时候，要求x轴每隔6个小时显示，如上图。如果是日期或者其他时间，x轴只显示开始和末尾的时间点。当移动x轴坐标的时候，lebal标签上的时间（即x轴）和统计的数据（即y轴）数据也发生不断的改变。

二、功能的实现（基本API的介绍）
1、设置图表数据

public void loadLineChartData() {
        //所有线的List
        ArrayList<LineDataSet> allLinesList = new ArrayList<LineDataSet>();
//        Entry(yValue,xIndex);一个Entry表示一个点，第一个参数为y值，第二个为X轴List的角标
        ArrayList<Entry> entryList = new ArrayList<Entry>();

        for (int i = 0; i < mList.size(); i++)
        {
            Map.Entry<String, Integer> mapEntry = Tools.fstMapEntry(mList.get(i));
            String time = mapEntry.getKey();   //时间
            //x轴方向上的坐标值(时间)
            xVals.add(time);
            ContentUtil.makeLog("time----",time);
            //                y轴方向数据
            int type = mapEntry.getValue();     //统计的数据
            types.add(type);

            //Entry(yValue,xIndex);一个Entry表示一个点，第一个参数为y值，第二个为X轴List的角标
            entryList.add(new Entry(type, i));
            ContentUtil.makeLog("type------",type + "");

        }

        //LineDataSet可以看做是一条线
        LineDataSet dataSet = new LineDataSet(entryList, "dataLine");
        dataSet.setLineWidth(2.5f);
        dataSet.setCircleSize(4.5f);
        dataSet.setHighLightColor(Color.RED); // 设置点击某个点时，横竖两条线的颜色
        dataSet.setDrawValues(false); // 是否在点上绘制Value
        //        dataSet.setValueTextColor(Color.WHITE);
        dataSet.setValueTextSize(24f);
        //        图标上的点的数据是否用小圆圈标示
        dataSet.setDrawCircles(false);
        //设置允许曲线平滑
        dataSet.setDrawCubic(true);
        //        设置折线的平滑度
        dataSet.setCubicIntensity(0.4f);
        //        设置允许填充
        dataSet.setDrawFilled(true);
        dataSet.setColor(Color.WHITE);
        //        设置填充颜色
        dataSet.setFillColor(context.getResources().getColor(R.color.table_content_color));
        allLinesList.add(dataSet);

        //LineData表示一个LineChart的所有数据(即一个LineChart中所有折线的数据)
        LineData mChartData = new LineData(xVals, allLinesList);

        // set data
        chart.setData((LineData) mChartData);
        //        标签数据的设置
// 动态设置标签的数据
 LineChartMarkerView markerView = new LineChartMarkerView(context, R.layout.label_view, typeName,mList,mLabelTime,mLabelData);
            chart.setMarkerView(markerView);
            markerView.invalidate();
//        }
        chart.setVisibleYRangeMaximum(50f,YAxis.AxisDependency.LEFT);
        chart.moveViewToY(60,YAxis.AxisDependency.LEFT);
    }

2、设置图表样式

public void setLineChartStyle() {
        // 设置手势
        //        chart.setOnChartGestureListener(this);
        chart.setDrawGridBackground(false); // 设置网格背景
        chart.setTouchEnabled(true);        //设置表格是否有触摸事件
        chart.setDoubleTapToZoomEnabled(true);
        chart.setScaleEnabled(false); // 设置缩放
        chart.setDoubleTapToZoomEnabled(false); // 设置双击不进行缩放
        chart.setAutoScaleMinMaxEnabled(false);
        chart.setDrawBorders(false);//是否在折线图上添加边框
        chart.setDescription("");
//      chart.setDragEnabled(true);// 是否可以拖拽
        // 设置X轴
        XAxis xAxis = chart.getXAxis();
        xAxis.setAvoidFirstLastClipping(true);  //x轴上起点和终点坐标数显示不完全
        if ("1".equals(mDateStart)) {
            xAxis.setLabelsToSkip(5);           //设置x轴相邻两个点的间隔5个时间，如0:00,6:00，12:00
            ContentUtil.makeLog("ToSkip--","000000000");
        }else {
            //其他时间，只显示首末的时间
            xAxis.setLabelsToSkip(xVals.size() -2);
            ContentUtil.makeLog("ToSkip--","1111111111");
        }


        //        xAxis.setTypeface(mTf); // 设置字体
        xAxis.setEnabled(true);
        xAxis.setDrawGridLines(false);
        xAxis.setSpaceBetweenLabels(1);
        //      让x轴在上面
        xAxis.setPosition(XAxis.XAxisPosition.TOP);
//        设置x轴字体的颜色
    xAxis.setTextColor(context.getResources().getColor(R.color.share_text_color));
        // 图例
        chart.getLegend().setEnabled(false);
        YAxis axisRight = chart.getAxisRight();
        // 隐藏右边 的坐标轴
        axisRight.setEnabled(false);
        axisRight.setAxisMinValue(-10);
        //隐藏右边坐标轴横网格线
        axisRight.setDrawGridLines(false);
        //隐藏左边坐标轴横网格线
        YAxis axisLeft = chart.getAxisLeft();
        axisLeft.setDrawGridLines(false);
        axisLeft.setEnabled(false);
        // 获得左侧侧坐标轴
        YAxis leftAxis = chart.getAxisLeft();
        //        leftAxis.setValueFormatter(new MyYAxisValueFormatter());
        leftAxis.setTextSize(18f);
        leftAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
        //设置右侧坐标轴
        YAxis rightAxis = chart.getAxisRight();
        rightAxis.setDrawAxisLine(false); // 右侧坐标轴线
        rightAxis.setDrawLabels(false); // 右侧坐标轴数组Label
    }