Android-MPChart：PieChart使用小記

安卓開發 · 發表 2018-12-01 21:36:29

摘要：最近Android開發中需要用到統計圖來展示資料，於是我選擇使用了MPChart庫。上網搜了一通怎麼使用，網上文章講得都挺全面的，不過網上大部分都是一些配置引數的說明，我這裡還有開發時遇到的一點點小坑，所以就記錄一下，省得以後要用了又到處翻文章。 1、新增依賴在build.gradl...

最近Android開發中需要用到統計圖來展示資料，於是我選擇使用了MPChart庫。上網搜了一通怎麼使用，網上文章講得都挺全面的，不過網上大部分都是一些配置引數的說明，我這裡還有開發時遇到的一點點小坑，所以就記錄一下，省得以後要用了又到處翻文章。

1、新增依賴

在build.gradle中寫上下面這句依賴。

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

2、layout中的使用

其實和普通控制元件一樣，只用隨便設定一下位置，大小和id就行。

<com.github.mikephil.charting.charts.PieChart
android:id="@+id/pie_chart"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"/>

3、為統計圖準備資料

統計圖當然需要資料啊，先寫獲得資料的方法。（此程式碼複製後 不能直接執行 ，需要你根據自己專案的情況改動）

private List<PieEntry> getPieChartData() {
List<String> dataList = "資料庫或網路獲取資料"
List<PieEntry> mPie = new ArrayList<>();

for (String data : dataList ) {
// 引數1為 value，引數2為 data。
// 如 PieEntry(0.15F, "90分以上");表示90分以上的人佔比15%。
PieEntry pieEntry = new PieEntry("計算佔比", data);
pieEntry.setX("float型別數字");
mPie.add(pieEntry);
}
return mPie;
}

4、配置PieChart並顯示

關鍵方法，各句程式碼的用途我都用註釋寫出來了，認真看哦。（此程式碼複製後 可直接執行 ）

private void showPieChart(PieChart pieChart, List<PieEntry> pieList) {
PieDataSet dataSet = new PieDataSet(pieList,"Label");

// 設定顏色list，讓不同的塊顯示不同顏色，下面是我覺得不錯的顏色集合，比較亮
ArrayList<Integer> colors = new ArrayList<Integer>();
int[] MATERIAL_COLORS = {
Color.rgb(200, 172, 255)
};
for (int c : MATERIAL_COLORS) {
colors.add(c);
}
for (int c : ColorTemplate.VORDIPLOM_COLORS) {
colors.add(c);
}
dataSet.setColors(colors);
PieData pieData = new PieData(dataSet);

// 設定描述，我設定了不顯示，因為不好看，你也可以試試讓它顯示，真的不好看
Description description = new Description();
description.setEnabled(false);
pieChart.setDescription(description);
//設定半透明圓環的半徑, 0為透明
pieChart.setTransparentCircleRadius(0f);

//設定初始旋轉角度
pieChart.setRotationAngle(-15);

//資料連線線距圖形片內部邊界的距離，為百分數
dataSet.setValueLinePart1OffsetPercentage(80f);

//設定連線線的顏色
dataSet.setValueLineColor(Color.LTGRAY);
// 連線線在餅狀圖外面
dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

// 設定餅塊之間的間隔
dataSet.setSliceSpace(1f);
dataSet.setHighlightEnabled(true);
// 不顯示圖例
Legend legend = pieChart.getLegend();
legend.setEnabled(false);

// 和四周相隔一段距離,顯示資料
pieChart.setExtraOffsets(26, 5, 26, 5);

// 設定pieChart圖表是否可以手動旋轉
pieChart.setRotationEnabled(false);
// 設定piecahrt圖表點選Item高亮是否可用
pieChart.setHighlightPerTapEnabled(true);
// 設定pieChart圖表展示動畫效果，動畫執行1.4秒結束
pieChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
//設定pieChart是否只顯示餅圖上百分比不顯示文字
pieChart.setDrawEntryLabels(true);
//是否繪製PieChart內部中心文字
pieChart.setDrawCenterText(false);
// 繪製內容value，設定字型顏色大小
pieData.setDrawValues(true);
pieData.setValueFormatter(new PercentFormatter());
pieData.setValueTextSize(10f);
pieData.setValueTextColor(Color.DKGRAY);

pieChart.setData(pieData);
// 更新 piechart 檢視
pieChart.postInvalidate();
}

這裡也有一個坑，那就是設定四周相隔距離屬性這一句。

pieChart.setExtraOffsets(26, 5, 26, 5);

一開始我不知道還有這個屬性，導致做出來的效果是這樣的，如下圖，四周的字超出控制元件大小顯示不全。當時用了各種padding，margin屬性都沒用，這個地方要注意哦。

加上這句話之後，可以明顯看出來餅狀圖變小了，因為要為周圍的字騰出那26的空間，如下圖。

5、Activity中呼叫上面的方法

private PieChart mPieChart;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_xxxx );
mPieChart = findViewById(R.id.pie_chart);
showPieChart(mPieChart, getPieChartData());
}

ok，現在我們的餅狀圖成功顯示了。

6、為PieChart設定點選事件

注意設定點選事件只能用 setOnChartValueSelectedListener 這個方法，其他方法都是扯淡的。開發的時候試了好多方法都不行，網上也搜了好多方法，都沒用，可被坑慘了，最後才發現只能用這個。

mPieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, Highlight h) {
// e.getX()方法得到x資料
PieEntry pieEntry = (PieEntry) e;
Log.d(TAG, "-->value" + pieEntry.getValue() + "->x" + pieEntry.getX() + "->y" + pieEntry.getY());
}

@Override
public void onNothingSelected() {}
} );

由於Entry沒有各種get方法，所以這裡我們讓Entry向下轉型為PieEntry，於是對於PieEntry我們就能呼叫各種get方法了。之後你就可以拿著獲得的這些資料去處理你的點選事件了。