詳解Android圖表 MPAndroidChart折線圖

更新時(shí)間：2016年12月15日 11:33:19 作者：容華謝后

本篇文章主要介紹了Android圖表 MPAndroidChart折線圖，MPAndroidChart的功能很強(qiáng)大，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。

1.介紹

MPAndroidChart的強(qiáng)大之處就不在多說了，目前最新的版本是3.0.1，在新版本中很多方法都被棄用了，這個(gè)要注意一下，在網(wǎng)上查到的大多數(shù)資料都是關(guān)于舊版本的，今天來實(shí)現(xiàn)一下折線圖，把過程記錄下來，分享給大家。

效果圖：

2.引入開源庫(kù)

在項(xiàng)目根目錄的build.gradle文件中加入如下代碼

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

在app根目錄的buil.gradle文件中加入依賴

dependencies {
  compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}

3.實(shí)現(xiàn)

在項(xiàng)目中，我把圖表相關(guān)的功能抽取成了一個(gè)工具類ChartUtils。

初始化圖表

initChart方法用來設(shè)置圖表的功能和顯示的樣式，方法中注釋了縮放和動(dòng)畫的代碼，如果要使用動(dòng)畫，則不需要調(diào)用圖表的invalidate方法。

/**
 * 初始化圖表
 *
 * @param chart 原始圖表
 * @return 初始化后的圖表
 */
public static LineChart initChart(LineChart chart) {
  // 不顯示數(shù)據(jù)描述
  chart.getDescription().setEnabled(false);
  // 沒有數(shù)據(jù)的時(shí)候，顯示“暫無數(shù)據(jù)”
  chart.setNoDataText("暫無數(shù)據(jù)");
  // 不顯示表格顏色
  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);
  // 設(shè)置x軸數(shù)據(jù)的位置
  xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  xAxis.setTextColor(Color.WHITE);
  xAxis.setTextSize(12);
  xAxis.setGridColor(Color.parseColor("#30FFFFFF"));
  // 設(shè)置x軸數(shù)據(jù)偏移量
  xAxis.setYOffset(-12);

  YAxis yAxis = chart.getAxisLeft();
  // 不顯示y軸
  yAxis.setDrawAxisLine(false);
  // 設(shè)置y軸數(shù)據(jù)的位置
  yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
  // 不從y軸發(fā)出橫向直線
  yAxis.setDrawGridLines(false);
  yAxis.setTextColor(Color.WHITE);
  yAxis.setTextSize(12);
  // 設(shè)置y軸數(shù)據(jù)偏移量
  yAxis.setXOffset(30);
  yAxis.setYOffset(-3);
  yAxis.setAxisMinimum(0);

  //Matrix matrix = new Matrix();
  // x軸縮放1.5倍
  //matrix.postScale(1.5f, 1f);
  // 在圖表動(dòng)畫顯示之前進(jìn)行縮放
  //chart.getViewPortHandler().refresh(matrix, chart, false);
  // x軸執(zhí)行動(dòng)畫
  //chart.animateX(2000);
  chart.invalidate();
  return chart;
}

設(shè)置圖表數(shù)據(jù)

setChartData方法用來設(shè)置圖表顯示的數(shù)據(jù)，以及折線的屬性。

/**
 * 設(shè)置圖表數(shù)據(jù)
 *
 * @param chart 圖表
 * @param values 數(shù)據(jù)
 */
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, "");
    // 設(shè)置曲線顏色
    lineDataSet.setColor(Color.parseColor("#FFFFFF"));
    // 設(shè)置平滑曲線
    lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
    // 不顯示坐標(biāo)點(diǎn)的小圓點(diǎn)
    lineDataSet.setDrawCircles(false);
    // 不顯示坐標(biāo)點(diǎn)的數(shù)據(jù)
    lineDataSet.setDrawValues(false);
    // 不顯示定位線
    lineDataSet.setHighlightEnabled(false);

    LineData data = new LineData(lineDataSet);
    chart.setData(data);
    chart.invalidate();
  }
}

更新圖表

notifyDataSetChanged方法用來更新圖表，可以動(dòng)態(tài)的顯示x軸標(biāo)簽。

/**
 * 更新圖表
 *
 * @param chart   圖表
 * @param values  數(shù)據(jù)
 * @param valueType 數(shù)據(jù)類型
 */
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軸數(shù)據(jù)處理

xValuesProcess方法用于處理x軸數(shù)據(jù)。

x軸可以顯示三種類型的數(shù)據(jù)，分別是今日數(shù)據(jù)、本周數(shù)據(jù)、本月數(shù)據(jù)。

/**
 * x軸數(shù)據(jù)處理
 *
 * @param valueType 數(shù)據(jù)類型
 * @return x軸數(shù)據(jù)
 */
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.遇到的問題

在設(shè)置x軸水平方向平移時(shí)，xAxis.setXOffset()方法不起作用，這讓我研究了好長(zhǎng)時(shí)間，最后無奈使用圖表平移方法chart.setExtraLeftOffset()來抵消y軸的平移，已經(jīng)提交到了Issues上，有解答會(huì)在博客中更新。
目前y軸數(shù)據(jù)只能通過設(shè)置最大值、最小值、顯示個(gè)數(shù)的方式來顯示數(shù)據(jù)（如果不設(shè)置會(huì)自動(dòng)計(jì)算），還沒有找到自定義顯示數(shù)據(jù)的方法，有了解的小伙伴可以留言告訴我啊。
自定義x軸數(shù)據(jù)的時(shí)候記得要算好對(duì)應(yīng)的值，Demo中只用到了7個(gè)點(diǎn)，所以比較簡(jiǎn)單，但是x軸數(shù)據(jù)比較多的話，就要算一下了，如果有不懂的地方可以給我留言或者發(fā)私信。

5.寫在最后

在實(shí)現(xiàn)的過程中，MPAndroidChart的Issues幫了不少忙，有很多人和我遇到了同樣的問題，原來沒有查閱Issues的習(xí)慣，又get新技能一枚。

官方文檔

完整的Demo下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: