微信公众号：伴职创作
IT类、哲学、散文、叙事情感类、小说…欢迎你来投稿。

3. 基于MPAndroidChart开发LineChart折线图

在读这篇文章之前，推荐先读：引文

目录

1.1. LineChart简单实现
1.2. 封装LineChart实现折线图

基于MPAndroidChart开发LineChart折线图

LineChart是MPAndroidChart组件中用来实现折线图的自定义ViewGroup，通过LineChart一些属性设置就能实现折线图。

1.1. LineChart简单实现

首先看看LineChart简单实现的效果图，如图1-1：

由图1-1可以看出，LineChart折线图实际是可以分Chart图，Legend图例，以及Description图表描述三个部分组成。默认生成的折线是浅蓝色空心的折线图。

通过LineChart来实现这样的折线图，只需要二步：

一、在布局文件中引入LineChart

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/lineChart"
    android:layout_width="match_parent"
    android:layout_height="250dp" />

注意：LineChart在布局文件中一定要设置layout_height的明确值，如果设置成match_parent或wrap_content，LineChart会因无法确定图表的大小，而显示不完全（或Chart图无法显示）。

二、将LineChart设置数据

首先通过LineChart的布局ID在相应窗体中找到LineChart对象。

LineChart lineChart = findViewById(R.id.lineChart);

其次设置LineChart相关数据。

LineChart提供了LineChart.setData(LineData data)来设置数据，LineData通过new LineData(LineDataSet dataSet)来进行实例化，而LineDataSet类包含List类型的yVals和String类型的label两个变量，yVals是携带Chart图数据的对象（一个点对应一个Entry数据），label是携带Legend图例标签的对象。

// 初始化折线图数据
private void initLineChart() {
    ArrayList<Entry> list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        Entry entry = new Entry(i, 10 + i);
        list.add(entry);
    }
    for (int i = 5; i >= 0; i--) {
        Entry entry = new Entry(10 - i, 15 - i);
        list.add(entry);
    }
    LineDataSet lineDataSet = new LineDataSet(list, null);
    LineData lineData = new LineData(lineDataSet);
    lineChart.setData(lineData);
}

注意：折线图分为x轴和y轴，x轴数值的排序需要以升序的方式排列。

通过上面两步就能实现图1-1中的折线图。

三、LineChart常用方法介绍

• setDescription(String desc)：设置图表说明的文字（默认右下角）。

• setDescriptionColor(int color)：设置图表说明文字的颜色。

• setDescriptionTypeface(Typeface t)：设置Typeface用于绘制图表说明文字。

• setDescriptionTextSize(float size)：以像素为单位设置描述文本的大小，最小6f，最大16f。

• setNoDataText(String text)：设置图表为空时应显示的文字

• setTouchEnabled(boolean enabled)：允许启用/禁用所有可能的与图表的触摸交互。

• setDragEnabled(boolean enabled)：启用/禁用拖动（平移）图表。

• setScaleEnabled(boolean enabled)：启用/禁用两个轴上图表的缩放比例。

• setDoubleTapToZoomEnabled(boolean enabled)：将其设置为false以禁止通过双击缩放图表来缩放图表。

• setMarker(IMarker marker) ：设置标记（点击对应点显示对应描述，如图1黑色框）。

• setRenderer(DataRenderer renderer)：设置渲染器，可对绘制过程进行操作。

• setData(LineData data)：设置数据集合。

• animateX（3000）; //动画水平3000毫秒。

• animateY（3000）; //动画垂直3000毫秒 。

• animateXY（3000，3000）; //动画水平和垂直3000毫秒。

• invalidate()：刷新数据（使用了动画则无需使用，重复）

• setDescriptionPosition(float x, float y)：设置图表说明的位置，以像素为单位

1.2. 封装LineChart实现折线图

封装LineChart实现折线图的目的是通过自定义LineChart来简化LineChart所提供的操作方法。

本文是定义一个ZLineChart类来继承LineChart，从而实现对LineChart方法的封装。

首先看看最终简化的初始效果图，图1-2：

具体思路：

1. 自定义ZLineChart继承LineChart。
2. 隐藏Legend图例。
3. 隐藏Description图表描述区。
4. 封装数据类型。
5. ZLineChart具体使用。
6. 其他方法简介

1. 自定义ZLineChart继承LineChart。

在ZLineChart中实现三个构造方法：

/**
 * 自定义折线图
 *
 * @author 邹峰立
 */
public class ZLineChart extends LineChart {

    public ZLineChart(Context context) {
        this(context, null);
    }

    public ZLineChart(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    // 初始化
    private void initZLineChart() {

    }
}

2. 隐藏Legend图例。

LineChart提供了图例类Legend来实现对图例的处理。

隐藏Legend图例可以通过LineChart提供的一下方法实现。

// 图例对象
Legend legend = getLegend();
// 不显示图例
legend.setEnabled(false);

3. 隐藏Description图表描述区。

对图表描述区的操作就需要通过Description来进行操作。同样先获取Description对象，然后进行隐藏操作。

Description mDescription = getDescription();
// 取消右下角描述
mDescription.setEnabled(false);

4. 封装数据类型。

首先定义数据对象，在该对象中含有显示折线图表相关数据，例如x轴值、y轴值等，因为x轴数据还要进行一次列表排序，所以要继承Comparable。

/**
 * 折线图数据
 *
 * @author 邹峰立
 */
public class LineChartBean<T> implements Comparable<LineChartBean> {
    private float x;
    private float y;
    private T data;
}

最后针对封装的数据类型实现图表设值。

/**
 * 设置数据
 *
 * @param list  待设置数据
 * @param label 图例标签
 */
public ZLineChart setLineChartData(ArrayList<LineChartBean> list, String label) {
    if (list != null && list.size() > 0) {
        Collections.sort(list);
        ArrayList<Entry> values = new ArrayList<>();
        for (int i = 0; i < list.size(); i++) {
            LineChartBean data = list.get(i);
            Entry entry = new Entry(data.getX(), data.getY());
            values.add(entry);
        }
        if (getData() != null && getData().getDataSetCount() > 0) {
            lineDataSet = (LineDataSet) getData().getDataSetByIndex(0);
            lineDataSet.setValues(values);
            lineDataSet.setLabel(label);
            getData().notifyDataChanged();
            notifyDataSetChanged();
        } else {
            lineDataSet = new LineDataSet(values, label);
            LineData lineData = new LineData(lineDataSet);
            setData(lineData);
        }
    }
    return this;
}

/**
 * 设置数据
 *
 * @param list 待设置数据
 */
public ZLineChart setLineChartData(ArrayList<LineChartBean> list) {
    return setLineChartData(list, null);
}

至此如图1-1的效果图就实现了。那么该如何使用ZLineChart，并实现图1-2呢？

5. ZLineChart具体使用。

同样，现在布局文件中引入：

<cc.ibooker.zmpandroidchartlib.ZLineChart
    android:id="@+id/z_line_chart"
    android:layout_width="match_parent"
    android:layout_height="300dp" />

其次在ZLineChart所在窗体设置数据：

// 初始化控件
private void initView() {
    // 折线图
    zLineChart = findViewById(R.id.z_line_chart);
    initLineChart();
}

// 显示折线图
private void initPieChart() {
    ArrayList<LineChartBean> list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        LineChartBean lineChartBean = new LineChartBean();
        lineChartBean.setX(i);
        lineChartBean.setY(10 + i);
        list.add(lineChartBean);
    }
    for (int i = 0; i < 5; i++) {
        LineChartBean lineChartBean = new LineChartBean();
        lineChartBean.setX(10 - i);
        lineChartBean.setY(15 - i);
        list.add(lineChartBean);
    }
    zLineChart.setLineChartData(list);
}

最后就是设置折线图的样式（注意设置样式要在设置数据之后）：

zLineChart.setLineChartData(list)
        .enableDashedLine(10f, 5f, 0f)
        .setColor(Color.BLACK)
        .setCircleColor(Color.BLACK)
        .setLineWidth(1f)
        .setCircleRadius(3f)
        .setDrawCircleHole(false)
        .setValueTextSize(9f)
        .setDrawFilled(true)
        .setFormLineWidth(1f)
        .setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f))
        .setFormSize(15f)
        .setFillColor(Color.YELLOW)
        .setMode(LineDataSet.Mode.CUBIC_BEZIER)
        .enableDashedHighlightLine(10f, 5f, 0f);

至此图1-2完全显示成功。

6. 其他方法简介

    /**
     * 使线条以虚线模式绘制，例如
     * <p>
     * "- - - - - -". 只有在关闭硬件加速时，此选项才起作用。
     * <p>
     * 请记住，硬件加速可以提高性能。
     *
     * @param lineLength  线段的长度
     * @param spaceLength 碎片之间的空间长度
     * @param phase       相位偏移，单位为度（通常使用0）
     **/
    public ZLineChart enableDashedLine(float lineLength, float spaceLength, float phase) ;

    /**
     * 使突出显示线以虚线模式绘制，例如这样的“----”
     *
     * @param lineLength  线段的长度
     * @param spaceLength 线段之间的间距长度
     * @param phase       相位偏移，单位为度（通常使用0）
     */
    public ZLineChart enableDashedHighlightLine(float lineLength, float spaceLength, float phase);

    /**
     * 设置此数据集应使用的唯一颜色。
     * <p>
     * 在内部，这将重新创建颜色数组并添加指定的颜色。
     *
     * @param color 颜色
     */
    public ZLineChart setColor(int color);

    /**
     * 设置此数据集应使用的唯一颜色。
     * <p>
     * 在内部，这将重新创建颜色数组并添加指定的颜色。
     *
     * @param color 颜色
     */
    public ZLineChart setCircleColor(int color);

    /**
     * 设置图表的线宽（最小值=0.2f，最大值=10f）；默认值1f注意：
     * <p>
     * 细线==性能更好，粗线==性能更差
     *
     * @param width 宽度
     */
    public ZLineChart setLineWidth(float width);

    /**
     * 设置绘制圆的半径。
     * <p>
     * 默认半径=4f，最小值=1f
     *
     * @param radius 半径
     */
    public ZLineChart setCircleRadius(float radius);

    /**
     * 将此设置为true以允许在每个数据圆中绘制孔。
     *
     * @param enabled 是否启用
     */
    public ZLineChart setDrawCircleHole(boolean enabled);

    /**
     * 设置折线图上字体大小
     *
     * @param size 字体大小
     */
    public ZLineChart setValueTextSize(float size);

    /**
     * 绘制填充模式
     *
     * @param filled 是否填充
     */
    public ZLineChart setDrawFilled(boolean filled);

    /**
     * 设置表格线条宽度
     *
     * @param formLineWidth 宽度值
     */
    public ZLineChart setFormLineWidth(float formLineWidth);

    /**
     * 设置表格线条虚线效果
     *
     * @param dashPathEffect 虚线效果
     */
    public ZLineChart setFormLineDashEffect(DashPathEffect dashPathEffect);

    /**
     * 设置表格字体大小
     *
     * @param formSize 字体大小
     */
    public ZLineChart setFormSize(float formSize);

    /**
     * 设置用于填充线下区域的颜色。
     * <p>
     * 重置最终设置为“可填充”。
     *
     * @param color 颜色
     */
    public ZLineChart setFillColor(int color);

    /**
     * 设置折线图Mode LineDataSet.Mode.LINEAR LineDataSet.Mode.CUBIC_BEZIER
     *
     * @param mode 模式
     */
    public ZLineChart setMode(LineDataSet.Mode mode);

    /**
     * 设置图例显示方向
     *
     * @param value 显示方向，水平或垂直
     */
    public ZLineChart setLegendOrientation(Legend.LegendOrientation value);

    /**
     * 设置图例垂直方向显示位置
     *
     * @param value 上中下
     */
    public ZLineChart setLegendVerticalAlignment(Legend.LegendVerticalAlignment value);

    /**
     * 设置图例水平方向显示位置
     *
     * @param value 左中右
     */
    public ZLineChart setLegendHorizontalAlignment(Legend.LegendHorizontalAlignment value);

    /**
     * x轴的间距
     *
     * @param space 待显示间距
     */
    public ZLineChart setLegendXEntrySpace(float space);

    /**
     * y轴的间距
     *
     * @param space 待显示间距
     */
    public ZLineChart setLegendYEntrySpace(float space);

    /**
     * 图例的y偏移量
     *
     * @param yOffset 偏移值
     */
    public ZLineChart setLegendYOffset(float yOffset);

    /**
     * 图例x的偏移量
     *
     * @param xOffset 偏移值
     */
    public ZLineChart setLegendXOffset(float xOffset);

    /**
     * 图例文字的颜色
     *
     * @param color 待显示颜色 16进制
     */
    public ZLineChart setLegendTextColor(int color);

    /**
     * 图例文字的大小
     *
     * @param size 文字的大小 dp
     */
    public ZLineChart setLegendTextSize(float size);

    /**
     * 设置图例色块形状
     *
     * @param shape 形状 圆形，方形
     */
    public ZLineChart setLegendForm(Legend.LegendForm shape);

    /**
     * 设置Description是否显示
     *
     * @param enabled 是否显示
     */
    public ZLineChart setDescriptionEnabled(boolean enabled);

    /**
     * 设置Description显示文本
     *
     * @param text 待显示文本
     */
    public ZLineChart setDescriptionText(String text);

    /**
     * 设置Description在屏幕上的显示位置
     *
     * @param x - X轴偏移
     * @param y - Y轴偏移
     */
    public ZLineChart setDescriptionPosition(float x, float y);

    /**
     * 设置Description文本方向
     *
     * @param align 文本方向
     */
    public ZLineChart setDescriptionTextAlign(Paint.Align align);

代码地址ZMPAndroidChart