Android图表（最新版）----折线图

在应用开发过程中，为了直观地显示数据变化的趋势，往往采用折线图、柱状图显示，为了显示比例的分配，采用饼状图显示，这一系列的图形，都可以使用一个开源框架MPAndroidChart来实现。

在GitHub上下载这个开源框架，引进Android项目中。

implementation project(path: ':MPAndroidChart')

public class LineChart extends BarLineChartBase<LineData> implements LineDataProvider {

    public LineChart(Context context) {
        super(context);
    }

    public LineChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public LineChart(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void init() {
        super.init();

        mRenderer = new LineChartRenderer(this, mAnimator, mViewPortHandler);
    }

    @Override
    public LineData getLineData() {
        return mData;
    }

    @Override
    protected void onDetachedFromWindow() {
        // releases the bitmap in the renderer to avoid oom error
        if (mRenderer != null && mRenderer instanceof LineChartRenderer) {
            ((LineChartRenderer) mRenderer).releaseBitmap();
        }
        super.onDetachedFromWindow();
    }
}

1、折线图

在布局文件中，添加折线图的布局。

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line_chart"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></com.github.mikephil.charting.charts.LineChart>

接下来就需要在代码中设置折线图的各项数据。

（1）设置折线图描述setDescription

 //设置该折线图的描述
        Description description = new Description();
        description.setText("天气变化");
        line_chart.setDescription(description);
        //是否绘制网格背景
        line_chart.setDrawGridBackground(true);

（2）设置X轴显示XAxis

//x轴的设置
        XAxis xAxis = line_chart.getXAxis();
        //将x轴的描述（文字 or 数字）显示在x轴下方
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //是否绘制x轴的网格线
        xAxis.setDrawGridLines(false);
        //是否绘制x轴的轴线
        xAxis.setDrawAxisLine(true);

（3）Y轴的设置YAxis

 //y轴设置
        YAxis yAxis = line_chart.getAxisLeft();
        //y轴提供数据的区间个数5个  false:是否均匀显示数据
        yAxis.setLabelCount(5,false);

setLabelCount指的是设置y轴区间个数，类似于下图展示的，也是大部分折线图都采用的显示方式，属于等比例显示区间。

（4）设置X和Y轴的数据setData

line_chart.setData(new LineData());

需要的数据源是LineData数据源，下面先看一下源码，分析一下。

public class LineData extends BarLineScatterCandleBubbleData<ILineDataSet> {

    public LineData() {
        super();
    }

    public LineData(ILineDataSet... dataSets) {
        super(dataSets);
    }

    public LineData(List<ILineDataSet> dataSets) {
        super(dataSets);
    }
}

LineData可以设置ILineDataSet... dataSets多个参数，而且是LineDataSet集，所以传入数据，就需要创建LineDataSet集合。

public LineDataSet(List<Entry> yVals, String label) {
        super(yVals, label);

        // mCircleRadius = Utils.convertDpToPixel(4f);
        // mLineWidth = Utils.convertDpToPixel(1f);

        if (mCircleColors == null) {
            mCircleColors = new ArrayList<Integer>();
        }
        mCircleColors.clear();

        // default colors
        // mColors.add(Color.rgb(192, 255, 140));
        // mColors.add(Color.rgb(255, 247, 140));
        mCircleColors.add(Color.rgb(140, 234, 255));
    }

LineDataSet需要传入的两个数据，一个是Entry的集合，代表折线图中的点，是y轴的数据，label指的是对y轴数据的描述。

Entry代表一个点，传入的2个参数分别代表x轴的数据和y轴的数据，y轴代表数据，x轴指的是时间。

   * @param x the x value
     * @param y the y value (the actual value of the entry)
     */
    public Entry(float x, float y) {
        super(y);
        this.x = x;
    }

所以具体显示数据的代码，如下所示

      //显示数据
        line_chart.setData(getLineData());
    }

    private LineData getLineData() {
        //提供折线数据
        List<Entry> entries = new ArrayList<>();
        for (int i = 0; i < 12; i++) {
        	//第一个参数：x轴的数据
        	//第二个参数：y轴的数据
            entries.add(new Entry(i,(float) (Math.random() * 10) + 50));
        }
        //第二个参数：如图显示
        LineDataSet dataSet = new LineDataSet(entries,"随机数");
        //设置折线的宽度
        dataSet.setLineWidth(2.5f);
        //圆圈的大小
        dataSet.setCircleHoleRadius(4.5f);
        //设置颜色
        dataSet.setHighLightColor(Color.rgb(244,0,0));
        //是否显示圆点处的数据
        dataSet.setDrawValues(true);

        LineData lineData = new LineData(dataSet);
        return lineData;
    }

如图显示的数据

这个数据的数据源是自己造的，实际的项目开发中，会通过网络请求获取服务器的数据。