作者:陈公子 | 来源:互联网 | 2023-05-31 17:30
Android饼状图的绘制在Github上看到一个不错的Android图标绘制的开源项目MPAndroidChart[https:github.comPhilJayMPAndroid
Android饼状图的绘制
在Github上看到一个不错的Android图标绘制的开源项目MPAndroidChart[https://github.com/PhilJay/MPAndroidChart],今天在这里介绍一下里面饼状图的使用,很少写博客,写得不好,同行见谅,勿喷。
先来看看官网的效果:
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE0MTM0ODQ5MjY1)
MPAndroidChart的使用
第一步,当然是引用这个库
- 在AndroidStudio的project的build.gradle添加下面的内容:
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
- 在要使用的module的build.gradle添加:
dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
}
第二步,在布局文件里面添加饼状图控件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/consume_pie_chart"
android:layout_width="match_parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:layout_height="320dip" />
LinearLayout>
第三步,在Activity或者Fragment里面使用
pieChart.setUsePercentValues(true);
pieChart.setDescription("全年消费情况");
pieChart.setDescriptionTextSize(20);
pieChart.setExtraOffsets(5, 5, 5, 5);
pieChart.setDragDecelerationFrictionCoef(0.95f);
pieChart.setDrawCenterText(true);
pieChart.setCenterTextColor(Color.RED);
pieChart.setCenterTextSize(24);
pieChart.setDrawHoleEnabled(true);
pieChart.setHoleColor(Color.WHITE);
pieChart.setHoleRadius(58f);
pieChart.setTransparentCircleColor(Color.BLACK);
pieChart.setTransparentCircleAlpha(110);
mChart.setTransparentCircleRadius(60f);
pieChart.setRotationEnabled(true);
pieChart.setRotationAngle(10);
pieChart.setHighlightPerTapEnabled(true);
Legend l = mChart.getLegend();
l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_CENTER);
l.setXEntrySpace(0f);
l.setYEntrySpace(0f);
l.setYOffset(0f);
pieChart.setDrawEntryLabels(true);
pieChart.setEntryLabelColor(Color.BLACK);
pieChart.setEntryLabelTextSize(10f);
pieChart.setOnChartValueSelectedListener(this);
pieChart.animateY(3400, Easing.EasingOption.EaseInQuad);
ArrayList pieEntries = new ArrayList<>();
for(ConsumeTypeMoneyPo typeMoneyVo : consumeTypeMoneyVoList){
PieEntry pieEntry = new PieEntry((float)typeMoneyVo.getTotalMoney(), typeMoneyVo.getConsumeTypeName());
pieEntries.add(pieEntry);
totalMoney += typeMoneyVo.getTotalMoney();
}
String centerText = mQueryYear+"年消费\n¥"+totalMoney;
pieChart.setCenterText(centerText);
PieDataSet pieDataSet = new PieDataSet(pieEntries, "");
pieDataSet.setColors(getPieChartColors());
pieDataSet.setSliceSpace(3f);
pieDataSet.setSelectionShift(5f);
PieData pieData = new PieData();
pieData.setDataSet(pieDataSet);
pieData.setValueFormatter(new PercentFormatter());
pieData.setValueTextSize(12f);
pieData.setValueTextColor(Color.BLUE);
pieChart.setData(pieData);
pieChart.highlightValues(null);
pieChart.invalidate();
运行起来效果就是如下所示:
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE0MTQyMTI3MTU0)
几个可能没有表述清楚的地方:
pieChart.setHighlightPerTapEnabled(true);//设置旋转的时候点中的tab是否高亮(默认为true)
看下图红色部分,选中的一块与相邻两边有一块白色的距离,并且选中的这一块变长了,如果设置为false将没有这种效果。
pieDataSet.setSliceSpace(3f);//设置选中的Tab离两边的距离,这个白色的部分的宽度就是通过setSliceSpace这个方法设置。
pieDataSet.setSelectionShift(5f);//设置选中的tab的多出来的
如下图,Quarter 1凸出来长度就是通过setSelectionShift方法设置
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE0MTQzMzU4MjM4)
Legend l = mChart.getLegend();
l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_CENTER);//设置每个tab的显示位置(这个位置是指下图右边红色方框框起来部分的位置 )
l.setXEntrySpace(0f);
l.setYEntrySpace(0f);//设置tab之间Y轴方向上的空白间距值
l.setYOffset(0f);
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODE0MTQ0NzI4OTM3)