Android開發丶基於MPChart的餅狀圖統計實現

經過沒日沒夜的加班加點,項目終於如期上線了,在下個迭代即將來臨蹂躪之餘,將本次迭代遇到的一些問題進行彙總以便學習。

遇到一個需求,將統計數據以餅狀圖進行統計,這塊我們引用了一個第三方類庫,官方地址如下:

https://github.com/PhilJay/MPAndroidChart

該類庫可以提供豐富的各類圖表實現,如折線,餅狀,柱狀等,這裏我們看下餅狀圖的效果:

效果還行吧,左邊是餅狀圖,右邊則是顏色文字等描述。
下面具體說下實現方法。

首先打開app的build.gradle,添加上如下一行:

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

打開project的build.gradle,在allprojects的repositories節點裏添加

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

點擊sync now,等待加載即可集成。

接下來打開視圖界面或者XML文件,添加控件。

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

在視圖文件中引用完控件後,進行控件配置,主要方法如下

chart.setUsePercentValues(true); //是否顯示百分比(經測試沒什麼用)
Description description = chart.getDescription();
description.setText(""); //設置描述的文字,默認在右下角
chart.setHighlightPerTapEnabled(true); //設置piecahrt圖表點擊Item高亮是否可用
chart.animateX(0); 
chart.setDrawEntryLabels(false); // 設置entry中的描述label是否畫進餅狀圖中
chart.setEntryLabelColor(Color.WHITE);//設置該文字是的顏色
chart.setEntryLabelTextSize(10f);//設置該文字的字體大小
chart.setDrawHoleEnabled(true);//設置圓孔的顯隱,也就是內圓
chart.setHoleRadius(42f);//設置內圓的半徑。外圓的半徑好像是不能設置的,改變控件的寬度和高度,半徑會自適應。
chart.setHoleColor(Color.WHITE);//設置內圓的顏色
chart.setDrawCenterText(false);//設置是否顯示文字
chart.setCenterText("");//設置餅狀圖中心的文字
chart.setCenterTextSize(10f);//設置文字的消息
chart.setCenterTextColor(Color.RED);//設置文字的顏色
chart.setTransparentCircleRadius(31f);//設置內圓和外圓的一個交叉園的半徑,這樣會凸顯內外部的空間
chart.setTransparentCircleColor(Color.BLACK);//設置透明圓的顏色
chart.setTransparentCircleAlpha(50);//設置透明圓你的透明度
chart.setRotationAngle(20); //設置初始旋轉角度
chart.setRotationEnabled(false); //設置是否可以拖動旋轉
chart.setExtraOffsets(10, 10, 10, 15); //設置餅狀圖的初始位置偏移
Legend legend = chart.getLegend();//圖例
legend.setEnabled(false);//是否顯示(不顯示的話,圖例可以自己自定義控件)

以上都是官方提供的方法,值得一提的是最後的圖例,默認顯示,設置false的話不顯示,圖例則可以根據我們需求進行自定義。

1.先提一下默認顯示的配置

Legend legend = pieChart.getLegend();//獲取圖例
legend.setEnabled(true);//是否顯示圖例,false則以下配置不生效
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.CENTER);//設置圖例和餅狀圖豎向對齊
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);//設置圖例和餅狀圖橫線對齊
//以下偏移量設置可以多設幾次不同值,慢慢調試最終效果
legend.setYOffset(-30f); //圖例的Y軸偏移量
legend.setXOffset(15f); //圖例的X軸偏移量
pieChart.setExtraOffsets(10, 10, 20, 10); //餅狀圖的偏移量
legend.setYEntrySpace(10);//不同圖例的Y軸間距
legend.setOrientation(Legend.LegendOrientation.VERTICAL);//設置圖例的排列走向:vertacal相當於分行
legend.setForm(Legend.LegendForm.SQUARE);//設置圖例的圖形樣式,默認爲圓形
legend.setFormSize(15f);//設置圖例的大小
legend.setTextSize(15f);//設置圖注的字體大小
legend.setTextColor(getResources().getColor(R.color.black)); //圖例的文字顏色
legend.setFormToTextSpace(5f);//設置圖例到餅狀圖的距離
legend.setDrawInside(false); //設置圖例是否繪製在內部
legend.setWordWrapEnabled(false);//設置圖列換行(注意使用影響性能,僅適用legend位於圖表下面),我也不知道怎麼用的

2.如果設置false的話,我們只需要在視圖的xml文件中,給對應的位置畫上圖例即可,不過這種情況一般適用固定條目數量的情況,上者則可以根據返回的條目數量動態生成圖例。當然自定義時畫上一個列表控件也可動態生成,就是比較麻煩而已。

3.配置完成後,我們生成數據。

/**
 * 配置數據
 */
private void initData() {
    ArrayList<PieEntry> pieEntries = new ArrayList<>();
    String a = null;
    String b = null;
    String c = null;
    String d = null;
    a = "40%";
    b = "30%";
    c = "20%";
    d = "10%";
    //去除最後一位百分號
    a = a.substring(0, a.length() - 1);
    b = b.substring(0, b.length() - 1);
    c = c.substring(0, c.length() - 1);
    d = d.substring(0, d.length() - 1);
    pieEntries.add(new PieEntry(Float.parseFloat(a), "暗夜獵手"+ a));
    pieEntries.add(new PieEntry(Float.parseFloat(b), "暴走蘿莉"+ b));
    pieEntries.add(new PieEntry(Float.parseFloat(c), "寒冰射手"+ c));
    pieEntries.add(new PieEntry(Float.parseFloat(d), "諾克薩斯之手"+ d));
    PieDataSet pieDataSet = new PieDataSet(pieEntries, null);
    pieDataSet.setSliceSpace(0f);//設置每塊餅之間的空隙
    pieDataSet.setSelectionShift(0f);//點擊某個餅時拉長的寬度
    pieDataSet.setColors(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.color_348f79),
            getResources().getColor(R.color.color_4e738d), getResources().getColor(R.color.color_fd794b)); //設置餅狀圖不同數據的顏色
    PieData pieData = new PieData(pieDataSet);
    pieData.setDrawValues(true);            //設置是否顯示數據實體(百分比,true:以下屬性纔有意義)
    pieData.setValueTextColor(Color.WHITE);  //設置所有DataSet內數據實體(百分比)的文本顏色
    pieData.setValueTextSize(12f);          //設置所有DataSet內數據實體(百分比)的文本字體大小
    pieData.setValueFormatter(new ValueFormatter() { //格式化數據,並加上百分號
        @Override
        public String getFormattedValue(float value) {
            Log.d("fantasychong_value", value + "");
            if (value == 0) {
                return "";
            } else {
                BigDecimal b = new BigDecimal(String.valueOf(value));
                float num = b.setScale(2, BigDecimal.ROUND_HALF_UP).floatValue();
                return num + "%";
            }
        }
    });
    piechart.setData(pieData);
    piechart.highlightValues(null); //設置高亮
    piechart.invalidate(); //將圖表重繪以顯示設置的屬性和數據
}

4.配置完數據後,我們來啓動app

 

至此全部完成,demo附上!

下載地址

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章