经过没日没夜的加班加点,项目终于如期上线了,在下个迭代即将来临蹂躏之余,将本次迭代遇到的一些问题进行汇总以便学习。
遇到一个需求,将统计数据以饼状图进行统计,这块我们引用了一个第三方类库,官方地址如下:
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附上!