最牛逼Android圖表庫--MPChart(Piechart顯示數(shù)據(jù)帶%號 的問題)

其實(shí)使用這個(gè)庫好久了,網(wǎng)上也有各路大神的博客,參考了很多。但是感覺還是有些屬性沒有涉及到,沒有達(dá)到高度自定義效果,于是自己親自實(shí)踐總結(jié)了一下。(如有雷同之處,沒錯(cuò),那就是我借鑒的-尷尬.png)

一、如何在項(xiàng)目中集成MPChart

項(xiàng)目中集成MpChart有兩種方式(各有利弊):

1.添加依賴

在Project即工程下的build.gradle文件里添加
maven { url "https://jitpack.io" }
添加下來是這個(gè)樣子的:
allprojects {
  repositories {
      jcenter()
      maven { url "https://jitpack.io" }
      google()
  }
}
然后在項(xiàng)目下的build.gradle文件里添加
compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'

是的,第一種方法就是這么簡單

2.導(dǎo)入library

gitHub上的庫請移步

https://github.com/PhilJay/MPAndroidChart
下載下來工程,然后導(dǎo)入如圖2的MPChartLib

導(dǎo)入1.png

導(dǎo)入2.png

導(dǎo)入完成之后再添加項(xiàng)目依賴
導(dǎo)入3.png

到此,第二種方式也介紹完了

然后簡單介紹一下這兩種方式的利弊:第一種方式不用導(dǎo)入library,可以減小你的項(xiàng)目大小,引用起來也非常方便。但是,這種方法我們無法修改庫里的文件,有些不合適我們的屬性我們也不能加以調(diào)整,有些地方就受限了(親身體會)。 第二種方式相比就會增加項(xiàng)目的大小。BUT,你可以在你需要的情況下修改library的一些文件,以達(dá)到我們想要的效果。

二、如何使用

1.PieChart(餅形圖)

這個(gè)庫使用起來還是非常簡單方便的,和普通的控件使用方式是一樣的接下來以PieChart為例在布局文件中添加

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/chart1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在Activity中

-->設(shè)置各區(qū)塊的顏色
public static final int[] PIE_COLORS = {
        Color.rgb(181, 194, 202), Color.rgb(129, 216, 200), Color.rgb(241, 214, 145),
        Color.rgb(108, 176, 223), Color.rgb(195, 221, 155), Color.rgb(251, 215, 191),
        Color.rgb(237, 189, 189), Color.rgb(172, 217, 243)
};

-->模擬數(shù)據(jù)
HashMap dataMap = new HashMap();
    dataMap.put("A","300");
    dataMap.put("B","600");
    dataMap.put("C","500");
    dataMap.put("D","800");

    setPieChart(mp_pieChart,dataMap,"數(shù)據(jù)",true);

-->設(shè)置餅形圖屬性
public void setPieChart(PieChart pieChart, Map<String, Float> pieValues, String title, boolean showLegend) {
    pieChart.setUsePercentValues(true);//設(shè)置使用百分比(后續(xù)有詳細(xì)介紹)
    pieChart.getDescription().setEnabled(false);//設(shè)置描述
    pieChart.setExtraOffsets(25, 10, 25, 25); //設(shè)置邊距
    pieChart.setDragDecelerationFrictionCoef(0.95f);//設(shè)置摩擦系數(shù)(值越小摩擦系數(shù)越大)
    pieChart.setCenterText(title);//設(shè)置環(huán)中的文字
    pieChart.setRotationEnabled(true);//是否可以旋轉(zhuǎn)
    pieChart.setHighlightPerTapEnabled(true);//點(diǎn)擊是否放大
    pieChart.setCenterTextSize(22f);//設(shè)置環(huán)中文字的大小
    pieChart.setDrawCenterText(true);//設(shè)置繪制環(huán)中文字
    pieChart.setRotationAngle(120f);//設(shè)置旋轉(zhuǎn)角度
    pieChart.setTransparentCircleRadius(61f);//設(shè)置半透明圓環(huán)的半徑,看著就有一種立體的感覺
    //這個(gè)方法為true就是環(huán)形圖,為false就是餅圖
    pieChart.setDrawHoleEnabled(false);
    //設(shè)置環(huán)形中間空白顏色是白色
    pieChart.setHoleColor(Color.WHITE);
    //設(shè)置半透明圓環(huán)的顏色
    pieChart.setTransparentCircleColor(Color.WHITE);
    //設(shè)置半透明圓環(huán)的透明度
    pieChart.setTransparentCircleAlpha(110);

    //圖例設(shè)置
    Legend legend = pieChart.getLegend();
    if (showLegend) {
        legend.setEnabled(true);//是否顯示圖例
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);//圖例相對于圖表橫向的位置
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);//圖例相對于圖表縱向的位置
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//圖例顯示的方向
        legend.setDrawInside(false);
        legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);
    } else {
        legend.setEnabled(false);
    }

    //設(shè)置餅圖數(shù)據(jù)
    setPieChartData(pieChart, pieValues);

    pieChart.animateX(1500, Easing.EasingOption.EaseInOutQuad);//數(shù)據(jù)顯示動畫

}

-->設(shè)置餅圖數(shù)據(jù)
private void setPieChartData(PieChart pieChart, Map<String, Float> pieValues) {

    Set set = pieValues.entrySet();
    Iterator it = set.iterator();
    while (it.hasNext()) {
        Map.Entry entry = (Map.Entry) it.next();
        entries.add(new PieEntry(Float.valueOf(entry.getValue().toString()), entry.getKey().toString()));
    }

    PieDataSet dataSet = new PieDataSet(entries, "");
    dataSet.setSliceSpace(3f);//設(shè)置餅塊之間的間隔
    dataSet.setSelectionShift(5f);//設(shè)置餅塊選中時(shí)偏離餅圖中心的距離
    dataSet.setColors(PIE_COLORS);//設(shè)置餅塊的顏色

    //設(shè)置數(shù)據(jù)顯示方式有見圖
    dataSet.setValueLinePart1OffsetPercentage(80f);//數(shù)據(jù)連接線距圖形片內(nèi)部邊界的距離,為百分?jǐn)?shù)
    dataSet.setValueLinePart1Length(0.3f);
    dataSet.setValueLinePart2Length(0.4f);
    dataSet.setValueLineColor(Color.YELLOW);//設(shè)置連接線的顏色
    dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
    PieData pieData = new PieData(dataSet);
    pieData.setValueFormatter(new PercentFormatter());
    pieData.setValueTextSize(11f);
    pieData.setValueTextColor(Color.DKGRAY);

    pieChart.setData(pieData);
    pieChart.highlightValues(null);
    pieChart.invalidate();
}

如果想要有點(diǎn)擊效果則
implements OnChartValueSelectedListener
會自動實(shí)現(xiàn)兩個(gè)方法,一看就懂,這里就不贅述了
效果1.jpg

效果2.png

(今天先到這里,后續(xù)會持續(xù)更新)
—————————————————2018-01-12補(bǔ)充————————————————

有時(shí)候我們希望PieChart上顯示的是具體數(shù)據(jù)而不是百分比,雖然原裝庫給我們提供了一個(gè)方法 
mChart.setUsePercentValues(true) 但是效果并不是我們想象的那個(gè)樣子,雖然顯示出來了原始的數(shù)據(jù),但是后面有個(gè)%,什么鬼。于是自己又看了一下數(shù)據(jù)設(shè)置的方法
 PieData data = new PieData(dataSet);
 data.setValueFormatter(new PercentFormatter());//是否顯示百分號
 data.setValueFormatter(new DefaultValueFormatter(1,"元"));//自己修改的方法
那個(gè)new PercentFormatter()就是庫里原有的方法,我發(fā)現(xiàn)無法修改,又看了一下setValueFormatter方法,然后發(fā)現(xiàn)了最后一行這個(gè)方法,然后自己加了個(gè)參數(shù),如圖:
code1.png

然后就實(shí)現(xiàn)了你想要的效果(原庫.jpg是將mChart.setUsePercentValues(false)后的效果)


原庫.jpg
修改后.jpg

這就是我為什么會講導(dǎo)入library的方法,如果原生的庫足夠滿足需求還是直接用方法一直接添加依賴比較好。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容