前段時間沒Android端的需求,是以在學前端,是以也差不多有一個多月沒更新文章了,前端我是新手也基本沒法寫什麼文章,隻能總結一些比較基礎的内容,然後現在暫時Android這邊又開始了新的版本開發,是以近期應該會寫些新文章。
然後這次講講MPAndroidChart的PieChart,我之前也沒想到會碰上要開發統計圖需求的情況,然後找了一下發現這個MPAndroidChart是挺火的。
https://github.com/PhilJay/MPAndroidChart這個架構可以用來開發統計圖,而且這個架構的功能挺龐大的。那為什麼這麼多統計圖隻講餅圖PieChart呢,因為其它我都暫時用不上,隻用到了PieChart,會用這個之後,其它的統計圖用法其實差不多。
這裡我主要隻拿一個例子來講,不總結pieChart的API
一.導入MPAndroidChart依賴并建立
這個按照gayhub上的來弄就行了
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}
官網這個implementation 什麼鬼我不知道,我這邊不識别,換成compile就行了。
<com.github.mikephil.charting.charts.PieChart
android:layout_width="300dp"
android:layout_height="300dp"
android:id="@+id/pic_chart"
>
</com.github.mikephil.charting.charts.PieChart>
二.設定屬性,讓圖顯示
如果僅僅按照上面這樣弄,圖檔是顯示不出的,肯定要寫一些代碼嘛,那要寫什麼。
寫什麼一般可以百度,但是不是我黑百度,百度找的文章,大多數時候都讓人心累,就算你找到合适的文章,寫的肯定也不完整,就像我的文章一樣,肯定寫的内容是不完整的,是以最好是看官方的文檔,是以最好是看官方的文檔,是以最好是看官方的文檔,重要的事情說3遍。
但是并不是所有架構的文檔對新人都這麼友好,我也是踩着坑過來的,是以為了幫助一些和我一樣的萌新,我多花時間講詳細點。
在gayhub中可以找到這個

image.png
那就沒錯了,很多好的架構都這樣,把文檔寫在wiki中,為什麼我也不知道,我沒經常在gayhub發文章。然後跳到wiki去看使用文檔。
一眼看去全英文,我也看不懂,浏覽器翻譯一下可以看看目錄怎麼寫
那就有點明朗了,先看入門,然後按照官方demo去怼代碼。發現隻顯示一種顔色,可以看看設定資料和設定顔色
List<PieEntry> strings = new ArrayList<>();
strings.add(new PieEntry(30f,"aaa"));
strings.add(new PieEntry(70f,"bbb"));
PieDataSet dataSet = new PieDataSet(strings,"Label");
ArrayList<Integer> colors = new ArrayList<Integer>();
colors.add(getResources().getColor(R.color.login_red));
colors.add(getResources().getColor(R.color.blue));
dataSet.setColors(colors);
PieData pieData = new PieData(dataSet);
pieData.setDrawValues(true);
picChart.setData(pieData);
picChart.invalidate();
最終可以得到結果
發現其實就這麼簡單,我覺得官方的文檔講得還是挺清晰的,如果還是看不懂,可以去參考官方的demo也行。
其實這樣已經完成了預覽的效果,但是有幾點需要改的地方
(1)把中間空心變成實心
(2)把數字換成百分比
(3)右下角的Description Label去掉
首先去除右下角的label
發現在文檔的
11.一般設定和樣式中能找到
但是發現我的setDescription方法傳的值要求是Description對象而不是String,說明文檔内容沒有更新,這時可以浏覽這個類的源碼,很快你就能發現改變這個Label的方法
Description description = new Description();
description.setText("");
picChart.setDescription(description);
把空心變成實心
找到文檔的第
12.特定的設定和樣式條
先設成半徑為零
picChart.setHoleRadius(0f);
發現内圈還有個半透明的,再設定半透明的半徑為0
picChart.setTransparentCircleRadius(0f);
把數字變成百分比
一聽就知道需要看
9.格式化資料值(ValueFormatter)這個,再配合之前的文檔,可以這樣寫
pieData.setDrawValues(true);
pieData.setValueFormatter(new PercentFormatter());
順便再把字型變大些
pieData.setValueTextSize(12f);
修改後可以得到結果
三.總結
我這主要說怎麼去看文檔,至于内容我覺得列舉出來不完的,而且新功能一出,能随時更新的就是文檔,是以最好還是看文檔。但是文檔是講全部的,如果你想比如隻用餅圖,想隻找它相關的方法調用,可以百度,但是如果你以後還要用的話還去百度?不如花點時間看看文檔的結構,以後用時能友善的找到相應的地方。
然後你做了餅圖這個功能之後你會發現主要是用到三個類
(1)展示的樣式的類PieChart
(2)設定資料的類xxxDataSet
(3)資料展示相關的類xxxData
然後肯定其它圖的用法差不多,是以會一個基本其它就很快了。
還有一點我想說的是,不要把配置這個view的代碼直接寫在頁面中,這樣耦合性高複用性低,可以寫的viewmodel也行,寫個manager也行,寫個helper類也行,寫個adapter也行......
最後貼下實心餅的效果,這篇就算是結束了
List<PieEntry> strings = new ArrayList<>();
strings.add(new PieEntry(30f,"aaa"));
strings.add(new PieEntry(70f,"bbb"));
PieDataSet dataSet = new PieDataSet(strings,"Label");
ArrayList<Integer> colors = new ArrayList<Integer>();
colors.add(getResources().getColor(R.color.login_red));
colors.add(getResources().getColor(R.color.blue));
dataSet.setColors(colors);
PieData pieData = new PieData(dataSet);
pieData.setDrawValues(true);
pieData.setValueFormatter(new PercentFormatter());
pieData.setValueTextSize(12f);
picChart.setData(pieData);
picChart.invalidate();
Description description = new Description();
description.setText("");
picChart.setDescription(description);
picChart.setHoleRadius(0f);
picChart.setTransparentCircleRadius(0f);