Android圖表 MPAndroidChart折線圖

封面

1.介紹

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" />