天天看點

MPAndroidChart之餅圖PieChart

前段時間沒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中可以找到這個

MPAndroidChart之餅圖PieChart

image.png

那就沒錯了,很多好的架構都這樣,把文檔寫在wiki中,為什麼我也不知道,我沒經常在gayhub發文章。然後跳到wiki去看使用文檔。

一眼看去全英文,我也看不懂,浏覽器翻譯一下可以看看目錄怎麼寫

MPAndroidChart之餅圖PieChart

那就有點明朗了,先看入門,然後按照官方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();
           

最終可以得到結果

MPAndroidChart之餅圖PieChart

發現其實就這麼簡單,我覺得官方的文檔講得還是挺清晰的,如果還是看不懂,可以去參考官方的demo也行。

其實這樣已經完成了預覽的效果,但是有幾點需要改的地方

(1)把中間空心變成實心

(2)把數字換成百分比

(3)右下角的Description Label去掉

首先去除右下角的label

發現在文檔的

11.一般設定和樣式

中能找到

MPAndroidChart之餅圖PieChart

但是發現我的setDescription方法傳的值要求是Description對象而不是String,說明文檔内容沒有更新,這時可以浏覽這個類的源碼,很快你就能發現改變這個Label的方法

Description description = new Description();
        description.setText("");
        picChart.setDescription(description);
           
把空心變成實心

找到文檔的第

12.特定的設定和樣式

MPAndroidChart之餅圖PieChart

先設成半徑為零

picChart.setHoleRadius(0f);
           

發現内圈還有個半透明的,再設定半透明的半徑為0

picChart.setTransparentCircleRadius(0f);
           
把數字變成百分比

一聽就知道需要看

9.格式化資料值(ValueFormatter)

這個,再配合之前的文檔,可以這樣寫

pieData.setDrawValues(true);
        pieData.setValueFormatter(new PercentFormatter());
           

順便再把字型變大些

pieData.setValueTextSize(12f);
           

修改後可以得到結果

MPAndroidChart之餅圖PieChart

三.總結

我這主要說怎麼去看文檔,至于内容我覺得列舉出來不完的,而且新功能一出,能随時更新的就是文檔,是以最好還是看文檔。但是文檔是講全部的,如果你想比如隻用餅圖,想隻找它相關的方法調用,可以百度,但是如果你以後還要用的話還去百度?不如花點時間看看文檔的結構,以後用時能友善的找到相應的地方。

然後你做了餅圖這個功能之後你會發現主要是用到三個類

(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);
           

繼續閱讀