MPAndroidChart折线图（LineChart）的使用，可以左右滑动

MPAndroidChart折线图（LineChart）的使用，可以左右滑动

折线图实现渐变的补丁，直接跟着这个补丁实现就可以实现家变
楼主就不把修改的代码贴出来了，上面这个补丁讲的很清楚，^_^。
我上一篇的折线图

来看看效果

LineChart的使用可以看看别写的demo，这里列举一下我项目中用到的方法，大概可以解决我们碰到的基本需求。我们在使用的时候，可能会碰到服务器返回的数据不是我们想要的格式，就要我们自己去封装，^_^。

• 设置简单的属性

private void setChartProperties() {
        //设置描述文本不显示
        mLineChart.getDescription().setEnabled(false);
        //设置是否显示表格背景
        mLineChart.setDrawGridBackground(true);
        //设置是否可以触摸
        mLineChart.setTouchEnabled(true);
        mLineChart.setDragDecelerationFrictionCoef(0.9f);
        //设置是否可以拖拽
        mLineChart.setDragEnabled(true);
        //设置是否可以缩放
        mLineChart.setScaleEnabled(false);
        mLineChart.setDrawGridBackground(false);
        mLineChart.setHighlightPerDragEnabled(true);
        mLineChart.setPinchZoom(true);
        //设置背景颜色
        mLineChart.setBackgroundColor(ColorAndImgUtils.CHART_BACKGROUND_COLOR);
        //设置一页最大显示个数为6，超出部分就滑动
        float ratio = (float) xValueList.size()/(float) 6;
        //显示的时候是按照多大的比率缩放显示,1f表示不放大缩小
        mLineChart.zoom(ratio,1f,0,0);
        //设置从X轴出来的动画时间
        //mLineChart.animateX(1500);
        //设置XY轴动画
        mLineChart.animateXY(1500,1500, Easing.EasingOption.EaseInSine, Easing.EasingOption.EaseInSine);
    }

---

• 设置图例是否显示，这里我们可以隐藏图例，使用ListView或者RecyclerView实现我们需要实现的简答的效果

private void setChartLegend() {
        //获取图例对象
        Legend legend = mLineChart.getLegend();
        //设置图例不显示
        legend.setEnabled(false);
    }

• 设置MarkView，实现我们想要的效果

private void setChartMarkView() {
        CustomMarkView mv = new CustomMarkView(getActivity(), R.layout.line_chart_custom_marker_view);
        // For bounds control
        mv.setChartView(mLineChart);
        // Set the marker to the chart
        mLineChart.setMarker(mv);
    }

• 设置X轴

private void setChartXAxis(int position) {
        ArrayList list = getList(position);
        //自定义设置横坐标
        IAxisValueFormatter xValueFormatter = new FastBrowserXValueFormatter(list);
        //X轴
        XAxis xAxis = mLineChart.getXAxis();
        //设置线为虚线
        //xAxis.enableGridDashedLine(10f, 10f, 0f);
        //设置字体大小10sp
        xAxis.setTextSize(10f);
        //设置X轴字体颜色
        xAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);
        //设置从X轴发出横线
        xAxis.setDrawGridLines(true);
        xAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
        //设置网格线宽度
        xAxis.setGridLineWidth(1);
        //设置显示X轴
        xAxis.setDrawAxisLine(true);
        //设置X轴显示的位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置自定义X轴值
        xAxis.setValueFormatter(xValueFormatter);
        //一个界面显示6个Lable，那么这里要设置11个
        xAxis.setLabelCount(6);
        //设置最小间隔，防止当放大时出现重复标签
        xAxis.setGranularity(1f);
        //设置为true当一个页面显示条目过多，X轴值隔一个显示一个
        xAxis.setGranularityEnabled(true);
        //设置X轴的颜色
        xAxis.setAxisLineColor(ColorAndImgUtils.GRID_COLOR);
        //设置X轴的宽度
        xAxis.setAxisLineWidth(1f);
        mLineChart.invalidate();
    }

• 设置Y轴

private void setChartYAxis() {
        YAxis leftAxis = mLineChart.getAxisLeft();
        //设置从Y轴发出横向直线(网格线)
        leftAxis.setDrawGridLines(true);
        //设置网格线的颜色
        leftAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
        //设置网格线宽度
        leftAxis.setGridLineWidth(1);
        //设置Y轴最小值是0，从0开始
        leftAxis.setAxisMinimum(0f);
        leftAxis.setGranularityEnabled(true);
        //设置最小间隔，防止当放大时出现重复标签
        leftAxis.setGranularity(1f);
        //如果沿着轴线的线应该被绘制，则将其设置为true,隐藏Y轴
        leftAxis.setDrawAxisLine(false);
        leftAxis.setDrawZeroLine(false);
        leftAxis.setTextSize(10f);
        leftAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);
        //设置左边X轴显示
        leftAxis.setEnabled(true);
        //设置Y轴的颜色
        leftAxis.setAxisLineColor(ColorAndImgUtils.GRID_COLOR);
        //设置Y轴的宽度
        leftAxis.setAxisLineWidth(1f);

        YAxis rightAxis = mLineChart.getAxisRight();
        //设置右边Y轴不显示
        rightAxis.setEnabled(false);
    }

• 设置整个图表的Y值，Y轴的值，和X轴Y轴对应的值

private void setData(ArrayList xValueList, ArrayList yValueList) {
        ArrayList yValues = new ArrayList<>();
        for(int i=0;i
            yValues.add(new Entry(i,yValueList.get(i)));
        }

        LineDataSet set;
        if(mLineChart.getData() != null && mLineChart.getData().getDataSetCount() > 0){
            set = (LineDataSet) mLineChart.getData().getDataSetByIndex(0);
            set.setValues(yValues);
            mLineChart.getData().notifyDataChanged();
            mLineChart.notifyDataSetChanged();
        }else{
            //设置值给图表
            set = new LineDataSet(yValues, "");
            //设置图标不显示
            set.setDrawIcons(false);
            //设置Y值使用左边Y轴的坐标值
            set.setAxisDependency(YAxis.AxisDependency.LEFT);
            //设置线的颜色
            set.setColors(ColorAndImgUtils.ONE_COLOR);
            //设置数据点圆形的颜色
            set.setCircleColor(ColorAndImgUtils.ONE_COLOR);
            //设置填充圆形中间的颜色
            set.setCircleColorHole(ColorAndImgUtils.ONE_COLOR);
            //设置折线宽度
            set.setLineWidth(1f);
            //设置折现点圆点半径
            set.setCircleRadius(4f);
            //设置十字线颜色
            //set.setHighLightColor(Color.parseColor("#47DBCC"));
            //设置显示十字线，必须显示十字线，否则MarkerView不生效
            set.setHighlightEnabled(true);
            //设置是否在数据点中间显示一个孔
            set.setDrawCircleHole(false);

            //设置填充
            //设置允许填充
            set.setDrawFilled(true);
            set.setFillAlpha(50);
            //设置背景渐变
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2){
                //设置渐变
                Drawable drawable = ContextCompat.getDrawable(getActivity(), R.drawable.line_chart_gradient);
                set.setFillDrawable(drawable);
            }else {
                set.setFillColor(ColorAndImgUtils.ONE_COLOR);
            }

            LineData data = new LineData(set);
            //设置不显示数据点的值
            data.setDrawValues(false);

            mLineChart.setData(data);
            mLineChart.invalidate();
        }
    }

最后的结果，单个折线图

多个图表不同的地方就是设置值的地方处理不同

private void setData(ArrayList xValueList, ArrayList> allYValueList, ArrayList nameList) {
        mLineChart.resetTracking();

        ArrayList dataSets = new ArrayList();

        for (int z = 0; z < nameList.size(); z++) {
            ArrayList values = new ArrayList();
            for (int i = 0; i < xValueList.size(); i++) {
                values.add(new Entry(i, allYValueList.get(z).get(i)));
            }
            LineDataSet set = new LineDataSet(values, nameList.get(z));
            set.setDrawIcons(false);//设置图标不显示
            set.setAxisDependency(YAxis.AxisDependency.LEFT);//设置Y值使用左边Y轴的坐标值
            int color = ColorAndImgUtils.ALL_COLORS[z % ColorAndImgUtils.ALL_COLORS.length];
            set.setColor(color);
            set.setCircleColor(color);//设置数据点颜色
            set.setCircleColorHole(color);//设置数据点中间填充颜色
            set.setLineWidth(1f);
            set.setCircleRadius(4f);
            set.setHighlightEnabled(true);//设置是否显示十字线
            set.setDrawCircleHole(false);//设置是否在数据点中间显示一个孔
            dataSets.add(set);
        }
        LineData data = new LineData(dataSets);
        data.setDrawValues(false);//设置不显示数据点
        mLineChart.setData(data);
        mLineChart.invalidate();
    }

结果

---