前言

最近看了一下 Android 上的圖表控件，去年做過(guò)一款應(yīng)用也已上架了，也用到了圖表控件，但是只是按照官方 demo 集成了，并沒(méi)有過(guò)多的研究。

我最近基本上是面向 Github 編程了，拿別人造好的輪子拿來(lái)用，不能直接用的就改改再用，實(shí)在不好實(shí)現(xiàn)的就勸說(shuō)產(chǎn)品去改需求，基本這是個(gè)套路。

既然是圖表控件，就上 github 一番搜索，關(guān)鍵字 chart，按照 java 一篩選，再按照 start 數(shù)量排序，由高到低?；旧?start 從高到低的圖表控件就是 MPAndroidChart、hellocharts-android、WilliamChart、XCL-Charts、EazeGraph、Jgraph 這么幾個(gè)了。再排除那些常年不更新的，issues 常年無(wú)人問(wèn)津的一些庫(kù)，我基本確定就使用 MPAndroidChart 了，我找其它庫(kù)也是這么個(gè)套路。所以日常工作就是逛 github，看到中意的就 star make 一下，這和逛淘寶是一個(gè)道理[yahch]。

話不多說(shuō)，先看一下最終效果。

MPAndroidChart 的官方文檔可以說(shuō)是非常詳細(xì)了，基本上只要照著來(lái)就行了。

方法如下

第一步是 Gradle 引用和控件使用：

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

基本上很多項(xiàng)目都是通過(guò)通過(guò) maven 官方和 jitpack了，沒(méi)什么好說(shuō)的。

dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

我這里只用到了折線圖，其它還有很多種類的圖表，把項(xiàng)目 clone 下來(lái)跑一遍就知道了。

<com.github.mikephil.charting.charts.LineChart
 android:id="@+id/lineChart1"
 android:layout_width="match_parent"
 android:layout_height="150dp"
android:layout_marginTop="10dp"></com.github.mikephil.charting.charts.LineChart>

第二步是構(gòu)建要顯示的數(shù)據(jù)。

ArrayList<Entry> entryArrayList = new ArrayList<>();
for (int i = 0; i < chartDataBean.Altitudes.length; i++) {
 Entry entry = new Entry(i, (float) chartDataBean.Altitudes[i]);
 entryArrayList.add(entry);
}
//yahch

Entry 的兩個(gè)參數(shù) x,y 都是 float 類型的，我開(kāi)始以為都表示 x,y 軸的值，但是想想若是 x 軸不是數(shù)值那 float 類型也表示不了，其實(shí)這個(gè) x 軸的 float 類型的值就是 x 軸的下標(biāo)了。

在折線圖表中，一個(gè)線條就是一個(gè) LineDataSet ，構(gòu)建線條，也很簡(jiǎn)單。就是一通設(shè)置，都是按照字面意思了。

LineDataSet lineDataSet = new LineDataSet(entryArrayList, "demo");
lineDataSet.setDrawCircles(false);
lineDataSet.setDrawFilled(true);
lineDataSet.setDrawValues(false);
if (Utils.getSDKInt() >= 18) {
 Drawable drawable = ContextCompat.getDrawable(activity, R.drawable.chart_bg);
 lineDataSet.setFillDrawable(drawable);
} else {
 lineDataSet.setFillColor(Color.BLACK);
}
lineDataSet.setColor(Color.parseColor("#7093C9"));
lineDataSet.setLineWidth(2f);
lineDataSet.setDrawHighlightIndicators(false);
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
// yahch

LineChart 設(shè)置數(shù)據(jù)方法是 LineChart.setData(LineData lineData) ，所以還要構(gòu)造一個(gè) LineData 。

LineData lineData = new LineData(lineDataSet);

假如我們有需求需要繪制一條平均刻線，可以使用 LimitLine。

LimitLine avgLine = new LimitLine(123f);
avgLine.setLineColor(Color.parseColor("#FFFFFF"));
lineChart1.getAxisLeft().addLimitLine(avgLine);

作為靈魂畫手，我當(dāng)時(shí)就畫了一幅圖。

然后點(diǎn)擊全屏橫向顯示怎么個(gè)做法呢，很簡(jiǎn)單，這個(gè)并不是非要在當(dāng)前的 Activity 中橫向顯示這個(gè)圖表，重新開(kāi)一個(gè) Activity 就是了，并在 onCreate 的時(shí)候去掉 ActionBar 就行了。

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 getSupportActionBar().hide();
 setContentView(R.layout.activity_full_altitude_chart);
 }
//yahch

那怎么橫向呢，在 AndroidManifest.xml 設(shè)置這個(gè) Activity 的 screenOrientation 參數(shù)為 landscape，強(qiáng)制設(shè)置橫向屏幕即可。

OK，安裝上的折線圖表就搞完了，有木有很簡(jiǎn)單。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論