Android图表控件MPAndroidChart——曲线图LineChart的使用（财富收益图）

目录

前言

本文涉及文章

其他相关文章

1.数据准备

1.1 数据来源

2.曲线展示

2.1 MPAndroidChart获取

2.2 数据对象获取

2.3 数据展示

3.曲线完善

3.1 图表背景、边框、网格线修改

3.2 X Y轴值的自定义

3.3 线条的渐变背景、值、点的修改

3.4 MarkerView的实现

3.5 X轴的位置调整、以及X Y 轴的刻度显示

4. 多条曲线

4.1 LineChart创建多条曲线

4.2 MarkerView显示所以曲线的X Y 轴值

5. 重置某条曲线

6. 最终效果图

---

前言

发现最新的MPAndroidChart和以前版本的使用有一些差距，就写下了现在新版的使用方法

注：2018-06-01更新，当前MPAndroidChart版本：3.0.3 

本文涉及文章

Android图表控件MPAndroidChart的简单介绍（MPAndroidChart3.0）

Android图表控件MPAndroidChart——LineChart实现 X、Y轴以及原点线的直尺刻度样式

其他相关文章

Android图表控件MPAndroidChart——曲线图LineChart的使用（多条曲线）

Android图表控件MPAndroidChart——曲线图LineChart（多条曲线）动态添加数据

Android图表控件MPAndroidChart——柱状图BarChart的使用（多条柱状图）

Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用 

本文将要实现的图表效果，个人财富收益图。

1.数据准备

1.1 数据来源

数据是抓包佣金宝的数据，将获取的数据存入.json文件。

json格式如下

Json 文件地址：

https://github.com/897532167/ChartManager/blob/master/app/src/main/assets/line_chart.json

2.曲线展示

2.1 MPAndroidChart获取

Github 地址：GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

依赖：

Project 的build.gradle文件中添加

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

然后在 module中的build,gradle 中添加

implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

然而大多情况下，我们会根据自己的需求自定义MPAndroidChart库，则需要下载源码并将MPChartLib引入自己的项目中。

2.2 数据对象获取

在Android Studio app项目src同级目录下新建中新建assets文件夹，然后将步骤1.1得到的.json文件放入改文件夹中。

然后在获取.json文件中的json字符串并解析为对应的数据对象，可参考以下文章

相关文章：Android访问assets本地Json文件

在此就不详叙述了，只是列出图表展示所需要的类

/**
 * 我的收益
 */
public class IncomeBean {
    /**
     * tradeDate : 20180502
     * value : 0.03676598
     */
    private String tradeDate;
    private double value;
}

/**
 * 沪深创指数
 */
public class CompositeIndexBean {
    /**
     * rate : -0.00034196
     * tradeDate : 20180502
     */
    private String rate;
    private String tradeDate;
}

2.3 数据展示

2.3.1  LineChart 图表初始化设置

LineChart曲线图表一会使用到如下属性

    private LineChart lineChart;
    private XAxis xAxis;                //X轴
    private YAxis leftYAxis;            //左侧Y轴
    private YAxis rightYaxis;           //右侧Y轴
    private Legend legend;              //图例
    private LimitLine limitLine;        //限制线
//  private MyMarkerView markerView;    //标记视图 即点击xy轴交点时弹出展示信息的View 需自定义

然后进行相应的设置

/**
 * 初始化图表
 */
private void initChart(LineChart lineChart) {
    /***图表设置***/
    //是否展示网格线
    lineChart.setDrawGridBackground(false);
    //是否显示边界
    lineChart.setDrawBorders(true);
    //是否可以拖动
    lineChart.setDragEnabled(false);
    //是否有触摸事件
    lineChart.setTouchEnabled(true);
    //设置XY轴动画效果
    lineChart.animateY(2500);
    lineChart.animateX(1500);

    /***XY轴的设置***/
    xAxis = lineChart.getXAxis();
    leftYAxis = lineChart.getAxisLeft();
    rightYaxis = lineChart.getAxisRight();
    //X轴设置显示位置在底部
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setAxisMinimum(0f);
    xAxis.setGranularity(1f);
    //保证Y轴从0开始，不然会上移一点
    leftYAxis.setAxisMinimum(0f);
    rightYaxis.setAxisMinimum(0f);

    /***折线图例 标签 设置***/
    legend = lineChart.getLegend();
    //设置显示类型，LINE CIRCLE SQUARE EMPTY 等等 多种方式，查看LegendForm 即可
    le