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" />
4.遇到的問題
5.寫在最后
在實現的過程中，MPAndroidChart的Issues幫了不少忙，有很多人和我遇到了同樣的問題，原來沒有查閱Issues的習慣，又get新技能一枚。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
