MPAndroidChart - LineChart使用并踩坑

MPAndroidChart是Android的一个比较优秀的图表控件，今天来说一下在使用MPAndroidChart折线图控件LineChart的使用方法和所遇到的问题。

使用方法：
第一步：
在app的gradle中添加 compile ‘com.github.PhilJay:MPAndroidChart:v3.1.0-alpha’

第二步
创建布局代码，下面只给一个代码片段

第三步
在你的Activity或者Fragment中findViewById找到它，并设置各种你需要的属性，配置可以见我的代码；

  //数据源
        List entries = new ArrayList<>();
        float taotalKm = 0.0f;
        for (int i = 0; i < mList.size(); i++) {
            StatisticsPositionEntity statisticsPositionEntity = mList.get(i);
            entries.add(new Entry(i, Float.parseFloat(statisticsPositionEntity.getMileageDay())));
            taotalKm += Float.parseFloat(statisticsPositionEntity.getMileageDay());
        }
        tvMean.setText((int) (taotalKm / day) + "km");


        LineDataSet dataSet = new LineDataSet(entries, "");
        //线条颜色
        dataSet.setColor(getMyColor(R.color.white));
        //圆点颜色
        dataSet.setCircleColor(getMyColor(R.color.white));
        //线条宽度
        dataSet.setLineWidth(1f);
        /*————————————————设置样式——————————————*/
        //设置图表右边的y轴禁用,不显示右侧的Y轴
        YAxis rightAxis = mLineChart.getAxisRight();
        rightAxis.setEnabled(false);
        //设置左边Y轴的样式
        YAxis axisLeft = mLineChart.getAxisLeft();
        //设置字体颜色
        axisLeft.setTextColor(getMyColor(R.color.white));
        //在这里对拿到的值进行处理，图表的数据源是float的，你可以做你需要的处理
        axisLeft.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return ((int) value) + "km";
            }
        });
        //设置x轴
        XAxis xAxis = mLineChart.getXAxis();
        //设置字体颜色
        xAxis.setTextColor(getMyColor(R.color.white));
        //设置字体大小
        xAxis.setTextSize(11f);
        xAxis.setAxisMinimum(0f);
        //是否绘制轴线
        xAxis.setDrawAxisLine(true);
        //设置x轴上每个点对应的线
        xAxis.setDrawGridLines(false);
        //绘制标签  指x轴上的对应数值
        xAxis.setDrawLabels(true);
        //设置x轴的显示位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //禁止放大后x轴标签重绘
        xAxis.setGranularity(1f);
        //准备好每个点对应的x轴数值
        List list = new ArrayList<>();
        for (int i = 0; i < mList.size(); i++) {
            StatisticsPositionEntity entity = mList.get(i);
            Date date = DateUtils.formatDate(entity.getCreateDate());
            list.add(DateUtils.format(date, "MM-dd"));
        }
        xAxis.setValueFormatter(new IndexAxisValueFormatter(list));
        //设置一页最大显示个数为6，超出部分就滑动
        float ratio = (float) list.size() / (float) 10;
        if (ratio < 1) {
            ratio = 1.0f;
        }
        //显示的时候是按照多大的比率缩放显示,1f表示不放大缩小
        //着重说明一下下面代码的用途
        /**
         * 先将缩放比设置成0后，再去设置你想要的缩放比。
         * 若不这样做的话，在当前页面重新加载数据时，你所设置的缩放比会失效，并且出现你意向不到的显示问题。
         * 如果你的图表只在页面加载一次的话不需要这么做。
         */
        mLineChart.zoom(0f, 1f, 0, 0);
        mLineChart.zoom(ratio, 1f, 0, 0);
        //设置为不可缩放
        mLineChart.setScaleEnabled(false);
        //设置为可左右滑动
        mLineChart.setDragEnabled(true);
        //透明化图例
        Legend legend = mLineChart.getLegend();
        legend.setForm(Legend.LegendForm.NONE);
        legend.setTextColor(Color.WHITE);

        //隐藏x轴描述
        Description description = new Description();
        description.setEnabled(false);
        mLineChart.setDescription(description);

        //添加覆盖物
        DetailsMarkerView markerView = new DetailsMarkerView(mActivity, R.layout.chart_show_tag_layout);
        markerView.setChartView(mLineChart);
        mLineChart.setMarker(markerView);

        /*————————————————样式设置结束——————————————*/

        //将点的数据添加到图标中并绘制
        LineData lineData = new LineData(dataSet);
        lineData.setDrawValues(false);
        mLineChart.setData(lineData);
        mLineChart.invalidate();

设置的东西可能有一点多，大家可把我设置样式的一部分剔除出去先看一下效果，需要的可以再加上，给大家看一下效果图。

默认的图表是四边都有刻度的，所以你不想要其他边的话可以通过代码去掉，使用方法就介绍到这里。

下面来给大家说一个我在使用时遇到的bug，大家能看到我的页面右上角有一个 ‘一周内’ 的东西，这个是用来做检索的可以选择 一个月、三个月、半年、一年、自定以等，搜索完后重新加载页面数据。
但是在重新加载数据的时候，图表的缩放比出问题了，本来应该一屏显示10个点，超过十个点的需要向右滑动才能看到，出问题后一页显示不了10个了，你继续进行检索选择 半年或者一年甚至一屏都显示不了一个点了。

上面是bug的表现，下面说一下我的解决方法，直接上代码;

 /**
         * 先将缩放比设置成0后，再去设置你想要的缩放比。
         * 若不这样做的话，在当前页面重新加载数据时，你所设置的缩放比会失效，并且出现你意向不到的显示问题。
         * 如果你的图表只在页面加载一次的话不需要这么做。
         */
        mLineChart.zoom(0f, 1f, 0, 0);
        mLineChart.zoom(ratio, 1f, 0, 0);

这样就行了，嗯嗯，再见。