詳解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軸發(fā)出橫向直線
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軸執(zhí)行動畫
//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方法用來更新圖表,可以動態(tài)的顯示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軸數據比較多的話,就要算一下了,如果有不懂的地方可以給我留言或者發(fā)私信。
5.寫在最后
在實現的過程中,MPAndroidChart的Issues幫了不少忙,有很多人和我遇到了同樣的問題,原來沒有查閱Issues的習慣,又get新技能一枚。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android之日期時間選擇控件DatePicker和TimePicker實例
本篇文章主要介紹了Android之日期時間選擇控件DatePicker和TimePicker實例,具有一定的參考價值,有興趣的可以了解一下2017-05-05
android Launcher AppWidget添加步驟介紹
大家好,本篇文章主要講的是android Launcher AppWidget添加步驟介紹,感興趣的同學趕快來看一看吧,對你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01
Android原生TabLayout使用的超全解析(看這篇就夠了)
現在很多app都有頂部可左右切換的導航欄,并且還帶動畫效果,要實現這種導航欄,可以使用Android原生的Tablayout也可以借助第三方框架實現,這篇文章主要給大家介紹了關于Android原生TabLayout使用的相關資料,需要的朋友可以參考下2022-09-09

