天天看点

MPChart饼图自定义图例

参考:http://www.lai18.com/content/8360860.html

先来个需求图:

MPChart饼图自定义图例

该图是项目中需要的,饼图好实现,但MPChart的图例不能显示百分比,需通过自定义实现,二次封装。

Demo图:

MPChart饼图自定义图例

以下为实现代码:

MainActivity:

package com.example.pieview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

import com.github.mikephil.charting.charts.PieChart;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		PieChart pieChart = (PieChart) findViewById(R.id.pieView);
		LinearLayout legendLayout = (LinearLayout) findViewById(R.id.legend_layout);

		// 模拟数据
		float[] data = new float[] { 1.8f, 3, 5.5f, 10, 6, 5, 6, 4, 2, 1.3f,
				0.9f };
		String[] labels = new String[] { "A", "B", "C", "D", "E", "F", "G",
				"H", "J", "K", "L" };

		PieChartUtils.initPieChart(this, legendLayout, pieChart, data, labels);

	}
}
           

布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pieView"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_weight="1" />

    <!-- 使用ScrollView解决数据太多时的显示问题。注意:height一定要固定 -->

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_weight="1" >

        <LinearLayout
            android:id="@+id/legend_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    </ScrollView>

</LinearLayout>
           

重点:

package com.example.epnc.utils;

import android.content.Context;
import android.graphics.Color;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.formatter.PercentFormatter;
import com.github.mikephil.charting.interfaces.datasets.IDataSet;

import java.util.ArrayList;
import java.util.Random;

/**
 * Created by TCL on 2016/9/1.
 * 饼图自定义图例的二次封装
 */
public class PieChartUtils {

    /**
     * @param context      上下文
     * @param legendLayout 外层的Legend布局
     * @param pieChart     要初始化的饼图
     * @param data         饼图上的数据
     * @param labels       饼图上的数据描述
     */
    public static void initPieChart(Context context, LinearLayout legendLayout, PieChart pieChart, float[] data,
                                    String[] labels) {
        //设置描述
        pieChart.setDescription("");
        // 设置中心圆孔半径占整个饼状图半径的百分比(100f 是最大=整个图表的半径),默认的50%的百分比(即50f)。
        pieChart.setHoleRadius(55f);
        // 设置中间文字中大小
        pieChart.setCenterTextSize(12f);
        // 百分比显示
        pieChart.setUsePercentValues(true);
        // 禁用触摸
        pieChart.setTouchEnabled(false);
        //设置内置图例不显示
        pieChart.getLegend().setEnabled(false);
        // 设置隐藏饼图上文字,只显示百分比
        pieChart.setDrawSliceText(false);


        //数值
        ArrayList<Entry> values = new ArrayList<Entry>();
        //数值描述
        ArrayList<String> valuesLabels = new ArrayList<>();
        //颜色
        int[] colors = new int[data.length];

        //随机颜色需要随机
        Random random = new Random();
        for (int i = 0; i < data.length; i++) {
            //添加数值
            values.add(new Entry(data[i], i));
            //添加数值描述
            valuesLabels.add(labels[i]);

            //随机颜色
            int red = 30 + random.nextInt(200);
            int green = 30 + random.nextInt(200);
            int blue = 30 + random.nextInt(200);

            //添加颜色
            colors[i] = Color.rgb(red, green, blue);
        }


        PieDataSet pieDataSet = new PieDataSet(values, "");
        pieDataSet.setSliceSpace(2f);
        pieDataSet.setValueTextColor(Color.WHITE);
        pieDataSet.setValueTextSize(12f);
        //将随机的颜色设置进来
        pieDataSet.setColors(colors);


        PieData pieData = new PieData(valuesLabels, pieDataSet);
        //设置百分比显示
        pieData.setValueFormatter(new PercentFormatter());

        //自定义图例 该方法一定要在setData之前执行
        setCustomizeLegend(legendLayout, context, colors, data, labels);

        //set data...
        pieChart.setData(pieData);

        //设置是否显示区域百分比的值
        for (IDataSet<?> set : pieChart.getData().getDataSets()) {
            set.setDrawValues(false);
        }
    }

    private static void setCustomizeLegend(LinearLayout legendLayout, Context context, int[] colors, float[] data,
                                           String[] labels) {
        for (int i = 0; i < data.length; i++) {
            //单个图例的layoutParams
            LinearLayout.LayoutParams singleLegendLayoutParams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
            // 设置比重为1
            singleLegendLayoutParams.weight = 1;
            // 单个图例的布局
            LinearLayout singleLegendLayout = new LinearLayout(context);
            // 水平排列
            singleLegendLayout.setOrientation(LinearLayout.HORIZONTAL);
            // 垂直居中
            singleLegendLayout.setGravity(Gravity.CENTER_VERTICAL);
            singleLegendLayout.setLayoutParams(singleLegendLayoutParams);


            //添加颜色方块
            LinearLayout.LayoutParams colorLayoutParams = new LinearLayout.LayoutParams(
                    20, 20);
            colorLayoutParams.setMargins(0, 0, 20, 0);
            LinearLayout colorLayout = new LinearLayout(context);
            colorLayout.setLayoutParams(colorLayoutParams);
            colorLayout.setBackgroundColor(colors[i]);
            singleLegendLayout.addView(colorLayout);


            //Label部分和百分比数值部分
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.weight = 1;
            params.gravity = Gravity.CENTER;


            // 添加label
            TextView tvLabel = new TextView(context);
            tvLabel.setText(labels[i] + " ");
            tvLabel.setLayoutParams(params);
            singleLegendLayout.addView(tvLabel);


            // 添加data(百分比显示)
            TextView tvPercentData = new TextView(context);
            float total = 0;
            for (int j = 0; j < data.length; j++) {
                total += data[j];
            }
            tvPercentData.setText((data[i] / total * 100 + "").substring(0, 4) + "%");
            tvPercentData.setLayoutParams(params);
            singleLegendLayout.addView(tvPercentData);

            // legendLayout为外层布局即整个图例布局,是在xml文件中定义
            legendLayout.addView(singleLegendLayout);
        }
    }

}
           

继续阅读