MPAndroidChart3使用详解5：PieChart（饼状图）_mpandroidchart piechart

1 方法总览

1.1 百分值角度

1.2 条目标签

1.3 半透明圆

1.4 空洞

1.5 中间文本

1.6 ComponentBase（抽象类）

1.7 Description（描述，继承抽象类ComponentBase）

        注：基类的字体默认值为10dp，而这里的默认值为8dp

2 使用说明

        这里我只单独讲解Description的应用，因此，除了设置模拟数据外，其他属性默认，以免混淆。同时为了让读者更加清晰，我会详细说明整个实现过程。

2.1 添加PieChart控件

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

2.2 声明控件

private PieChart pc;

2.3 获取控件

pc = (PieChart) findViewById(R.id.pc);

2.4 设置模拟数据

List<PieEntry> yVals = new ArrayList<>();
yVals.add(new PieEntry(28.6f, "有违章"));
yVals.add(new PieEntry(71.3f, "无违章"));
 
List<Integer> colors = new ArrayList<>();
colors.add(Color.parseColor("#4A92FC"));
colors.add(Color.parseColor("#ee6e55"));
 
PieDataSet pieDataSet = new PieDataSet(yVals, "");
pieDataSet.setColors(colors);
PieData pieData = new PieData(pieDataSet);
 
pc.setData(pieData);

>> 效果图：

2.5 设置描述内容

String descriptionStr = "平台上有违章车辆和没违章车辆的占比统计";
Description description = new Description();
description.setText(descriptionStr);
pc.setDescription(description);

>> 效果图：

2.6 更改字体和颜色

description.setTextSize(18f);
description.setTextColor(Color.parseColor("#4A92FC"));

>> 效果图：

问题：

        如果觉得这里描述文本盖到饼状图上显得有点丑，这时希望把饼图的大小弄小点怎么办，但是我找来找去好像也没有发现有什么直接的方法可以设置饼图大小，那这就没其他办法了吗？

解答：

        当然不是，我们还可以通过设置饼图的外边距来控制饼图的大小。

2.7 更改饼图大小

pc.setExtraOffsets(0f,32f,0f,32f);

    当然，这里还可以单独设置某一方位的外边距。我们可以看一下setExtraOffsets方法的实现步骤。

public void setExtraOffsets(float left, float top, float right, float bottom) {
    setExtraLeftOffset(left);
    setExtraTopOffset(top);
    setExtraRightOffset(right);
    setExtraBottomOffset(bottom);
}

    因此，刚才的方法也等价于：

pc.setExtraLeftOffset(0f);
pc.setExtraTopOffset(32f);
pc.setExtraRightOffset(0f);
pc.setExtraBottomOffset(32f);

>> 效果图：
 

问题：

    描述的文本仍然盖在了饼图上怎么办？

解答：

    那我们只能改变描述文本的位置了。

2.8 更改描述文本的位置

         这里我举个有代表性的栗子，把描述文本放在饼图的正上方。

// 获取屏幕中间x 轴的像素坐标
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
float x = dm.widthPixels / 2;
// y轴像素坐标，获取文本高度（dp）+上方间隔12dp 转换为像素
Paint paint = new Paint();
paint.setTextSize(18f);
Rect rect = new Rect();
paint.getTextBounds(descriptionStr, 0, descriptionStr.length(), rect);
float y = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 
        rect.height() + 12, getResources().getDisplayMetrics());
// 设置饼状图的位置
description.setPosition(x, y);

        当然，如果你不知道或者一时想不起来文本的高度如何计算，也不知道如何将dp转换为px，那你也可以借助一下MPAndroidChart里面的Utils工具类，可以图个方便。

        计算Y轴像素坐标的等价写法如下：

// y轴像素坐标，获取文本高度（dp）+上方间隔12dp 转换为像素
Paint paint = new Paint();
paint.setTextSize(18f); 
float height = Utils.calcTextHeight(paint, descriptionStr);
float y = Utils.convertDpToPixel(height + 12);

>> 效果图：

问题：

        细心地话你就会发现，我在上面是说把描述的位置放在饼图的正上方，然而出来的效果却是在饼图的左上方。是我的计算方法出现问题？

解答：

        可以说不是，也可以说是。说不是是因为这是文本的对齐方式造成的，因为默认是右对齐的。说是是因为默认对齐方式是右对齐，那我们在计算x上的坐标应该加上文本宽度的二分之一才能居中。

2.9 对齐方式

         更改对齐方式为居中对齐。

description.setTextAlign(Paint.Align.CENTER);

        上面说到的使文本位于正上方也可以在计算x轴的坐标时加上文本宽度的二分之一：
 

float x = ((dm.widthPixels) 
        + Utils.convertDpToPixel(Utils.calcTextWidth(paint, descriptionStr))) / 2;

>> 效果图：

2.10 设置偏移量

    这里我举个有代表性的栗子，把描述文本放在饼图的正下方。

// 对齐方式：居中对齐
description.setTextAlign(Paint.Align.CENTER);
// 获取屏幕中间x 轴dp值坐标
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
Paint paint = new Paint();
paint.setTextSize(18f);
float x = Utils.convertPixelsToDp(dm.widthPixels / 2);
// 设置y的dp值为文本高度+12
float y = Utils.calcTextHeight(paint, descriptionStr) + 12;
// 设置x和y的偏移量
description.setXOffset(x);
description.setYOffset(-y); // 反方向偏移为负值

>> 效果图：

注：如果和setPosition方法同时使用，setXOffset和setYOffset方法会失效。