詳解Android圖表 MPAndroidChart折線圖_Android

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下載

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。