經過沒日沒夜的加班加點,項目終於如期上線了,在下個迭代即將來臨蹂躪之餘,將本次迭代遇到的一些問題進行彙總以便學習。
遇到一個需求,將統計數據以餅狀圖進行統計,這塊我們引用了一個第三方類庫,官方地址如下:
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附上!