详解Android图表 MPAndroidChart折线图

1.介绍

mpandroidchart github地址 

mpandroidchart的强大之处就不在多说了，目前最新的版本是3.0.1，在新版本中很多方法都被弃用了，这个要注意一下，在网上查到的大多数资料都是关于旧版本的，今天来实现一下折线图，把过程记录下来，分享给大家。

效果图：

2.引入开源库

在项目根目录的build.gradle文件中加入如下代码

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

在app根目录的buil.gradle文件中加入依赖

dependencies {
  compile 'com.github.philjay:mpandroidchart:v3.0.1'
}

3.实现

在项目中，我把图表相关的功能抽取成了一个工具类chartutils。

初始化图表

initchart方法用来设置图表的功能和显示的样式，方法中注释了缩放和动画的代码，如果要使用动画，则不需要调用图表的invalidate方法。

/**
 * 初始化图表
 *
 * @param chart 原始图表
 * @return 初始化后的图表
 */
public static linechart initchart(linechart chart) {
  // 不显示数据描述
  chart.getdescription().setenabled(false);
  // 没有数据的时候，显示“暂无数据”
  chart.setnodatatext("暂无数据");
  // 不显示表格颜色
  chart.setdrawgridbackground(false);
  // 不可以缩放
  chart.setscaleenabled(false);
  // 不显示y轴右边的值
  chart.getaxisright().setenabled(false);
  // 不显示图例
  legend legend = chart.getlegend();
  legend.setenabled(false);
  // 向左偏移15dp，抵消y轴向右偏移的30dp
  chart.setextraleftoffset(-15);

  xaxis xaxis = chart.getxaxis();
  // 不显示x轴
  xaxis.setdrawaxisline(false);
  // 设置x轴数据的位置
  xaxis.setposition(xaxis.xaxisposition.bottom);
  xaxis.settextcolor(color.white);
  xaxis.settextsize(12);
  xaxis.setgridcolor(color.parsecolor("#30ffffff"));
  // 设置x轴数据偏移量
  xaxis.setyoffset(-12);

  yaxis yaxis = chart.getaxisleft();
  // 不显示y轴
  yaxis.setdrawaxisline(false);
  // 设置y轴数据的位置
  yaxis.setposition(yaxis.yaxislabelposition.outside_chart);
  // 不从y轴发出横向直线
  yaxis.setdrawgridlines(false);
  yaxis.settextcolor(color.white);
  yaxis.settextsize(12);
  // 设置y轴数据偏移量
  yaxis.setxoffset(30);
  yaxis.setyoffset(-3);
  yaxis.setaxisminimum(0);

  //matrix matrix = new matrix();
  // x轴缩放1.5倍
  //matrix.postscale(1.5f, 1f);
  // 在图表动画显示之前进行缩放
  //chart.getviewporthandler().refresh(matrix, chart, false);
  // x轴执行动画
  //chart.animatex(2000);
  chart.invalidate();
  return chart;
}

设置图表数据

setchartdata方法用来设置图表显示的数据，以及折线的属性。

/**
 * 设置图表数据
 *
 * @param chart 图表
 * @param values 数据
 */
public static void setchartdata(linechart chart, list<entry> values) {
  linedataset linedataset;

  if (chart.getdata() != null && chart.getdata().getdatasetcount() > 0) {
    linedataset = (linedataset) chart.getdata().getdatasetbyindex(0);
    linedataset.setvalues(values);
    chart.getdata().notifydatachanged();
    chart.notifydatasetchanged();
  } else {
    linedataset = new linedataset(values, "");
    // 设置曲线颜色
    linedataset.setcolor(color.parsecolor("#ffffff"));
    // 设置平滑曲线
    linedataset.setmode(linedataset.mode.cubic_bezier);
    // 不显示坐标点的小圆点
    linedataset.setdrawcircles(false);
    // 不显示坐标点的数据
    linedataset.setdrawvalues(false);
    // 不显示定位线
    linedataset.sethighlightenabled(false);

    linedata data = new linedata(linedataset);
    chart.setdata(data);
    chart.invalidate();
  }
}

更新图表

notifydatasetchanged方法用来更新图表，可以动态的显示x轴标签。

/**
 * 更新图表
 *
 * @param chart   图表
 * @param values  数据
 * @param valuetype 数据类型
 */
public static void notifydatasetchanged(linechart chart, list<entry> values,
                    final int valuetype) {
  chart.getxaxis().setvalueformatter(new iaxisvalueformatter() {
    @override
    public string getformattedvalue(float value, axisbase axis) {
      return xvaluesprocess(valuetype)[(int) value];
    }
  });

  chart.invalidate();
  setchartdata(chart, values);
}

x轴数据处理

xvaluesprocess方法用于处理x轴数据。

x轴可以显示三种类型的数据，分别是今日数据、本周数据、本月数据。

/**
 * x轴数据处理
 *
 * @param valuetype 数据类型
 * @return x轴数据
 */
private static string[] xvaluesprocess(int valuetype) {
  string[] week = {"周日", "周一", "周二", "周三", "周四", "周五", "周六"};

  if (valuetype == dayvalue) { // 今日
    string[] dayvalues = new string[7];
    long currenttime = system.currenttimemillis();
    for (int i = 6; i >= 0; i--) {
      dayvalues[i] = timeutils.datetostring(currenttime, timeutils.dateformat_day);
      currenttime -= (3 * 60 * 60 * 1000);
    }
    return dayvalues;

  } else if (valuetype == weekvalue) { // 本周
    string[] weekvalues = new string[7];
    calendar calendar = calendar.getinstance();
    int currentweek = calendar.get(calendar.day_of_week);

    for (int i = 6; i >= 0; i--) {
      weekvalues[i] = week[currentweek - 1];
      if (currentweek == 1) {
        currentweek = 7;
      } else {
        currentweek -= 1;
      }
    }
    return weekvalues;

  } else if (valuetype == monthvalue) { // 本月
    string[] monthvalues = new string[7];
    long currenttime = system.currenttimemillis();
    for (int i = 6; i >= 0; i--) {
      monthvalues[i] = timeutils.datetostring(currenttime, timeutils.dateformat_month);
      currenttime -= (4 * 24 * 60 * 60 * 1000);
    }
    return monthvalues;
  }
  return new string[]{};
}

在activity中使用

chartutils.initchart(chart);
chartutils.notifydatasetchanged(chart, getdata(), chartutils.dayvalue);

布局文件

<com.github.mikephil.charting.charts.linechart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4.遇到的问题

• 在设置x轴水平方向平移时，xaxis.setxoffset()方法不起作用，这让我研究了好长时间，最后无奈使用图表平移方法chart.setextraleftoffset()来抵消y轴的平移，已经提交到了issues上，有解答会在博客中更新。
• 目前y轴数据只能通过设置最大值、最小值、显示个数的方式来显示数据（如果不设置会自动计算），还没有找到自定义显示数据的方法，有了解的小伙伴可以留言告诉我啊。
• 自定义x轴数据的时候记得要算好对应的值，demo中只用到了7个点，所以比较简单，但是x轴数据比较多的话，就要算一下了，如果有不懂的地方可以给我留言或者发私信。

5.写在最后

在实现的过程中，mpandroidchart的issues帮了不少忙，有很多人和我遇到了同样的问题，原来没有查阅issues的习惯，又get新技能一枚。

官方文档

完整的demo下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。