饼图不显示百分比(%),显示原始数据的处理

需求:做一个饼图,在显示数据的时候不显示百分比样式,而是要显示原来的数据,UI如下:
在这里插入图片描述

拿到需求后时看到 MPAndroidChart 这个开源框架,然后就下载了 demo 看着和需求是高度吻合(此时还不知道需求要显示原始数字数据),然后就拿过来直接做了,等做完了需求说要在饼图上显示原始数据,从提供的 api 里找了半天也没找到怎么修改,后来在网上找到一种方法挺好用的,就整理了一下。


处理方法:不使用 Pie Chart 原始的数据格式 PercentFormatter,根据 [PercentFormatter] 的样式重新写一个,使用

pieData.setValueFormatter(new DefaultValueFormate("万"))

替换 :

pieData.setValueFormatter(new PercentFormatter());

就正常了,示例图可以看上面的UI。




部分代码如下:

自定义数据格式类 PercentFormatter(可根据需要自行修改):


import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.formatter.IValueFormatter;
import com.github.mikephil.charting.utils.ViewPortHandler;
import java.text.DecimalFormat;

public class DefaultValueFormate implements IValueFormatter {

    /**
     * DecimalFormat for formatting
     */
    protected DecimalFormat mFormat;
    public DefaultValueFormate() {
        setup("");
    }

    /**
     * @param endDes 数字后添加的 单位
     */
    public DefaultValueFormate(String endDes) {
        setup(endDes);
    }
    
    private void setup(String endDes) {
        if (TextUtils.isEmpty(endDes)) {
            // ###.## 表示可以精确到小数点后两位,即 double 类型
            mFormat = new DecimalFormat("###.##");
        } else {
            mFormat = new DecimalFormat("###.##" + endDes);
        }
    }

    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
        return mFormat.format(value);
    }

    /**
     * Returns the number of decimal digits this formatter uses.
     * @return
     */
    public int getDecimalDigits() {
        return 1;
    }
}

使用代码如下:

// 设置 pie chart
 public void setPieChart() {
        pieChart.getDescription().setEnabled(false);//设置描述
        pieChart.setExtraOffsets(25, 10, 25, 25); //设置边距
        pieChart.setDragDecelerationFrictionCoef(0.1f);//设置摩擦系数(值越小摩擦系数越大)
        pieChart.setRotationEnabled(true);//是否可以旋转
        pieChart.setDrawCenterText(false);//设置绘制环中文字
        //这个方法为true就是环形图,为false就是饼图
        pieChart.setDrawHoleEnabled(false);

        pieChart.animateY(1200, Easing.EaseInOutQuad);

//TODO 设置 legend
        Legend l = pieChart.getLegend();
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        l.setOrientation(Legend.LegendOrientation.VERTICAL);
        l.setDrawInside(false);
        l.setXEntrySpace(0f);
        l.setYEntrySpace(0f);
        l.setYOffset(0f);
        l.setTextSize(15f);
        l.setTextColor(Color.parseColor("#e3d321"));

        //设置饼图数据
        setPieChartData();
    }
    
//TODO 设置 数据
    private void setPieChartData() {

        List<PieEntry> entries = new ArrayList<>();
        entries.add(new PieEntry(300f,"金融"));
        entries.add(new PieEntry(600f,"基金"));
        entries.add(new PieEntry(1200f,"黄金"));
        entries.add(new PieEntry(150,"收支"));
        PieDataSet dataSet = new PieDataSet(entries, "");

        ArrayList<Integer> colors = new ArrayList<>();

        colors.add(Color.rgb(221,131,241));
        colors.add(Color.rgb(242,173,173));
        colors.add(Color.rgb(53,186,232));
        colors.add(Color.rgb(0,205,131));

        dataSet.setColors(colors);//设置饼块的颜色

        //设置数据显示方式有见图
        dataSet.setValueLinePart1OffsetPercentage(80f);//数据连接线距图形片内部边界的距离,为百分数
        dataSet.setValueLinePart1Length(0.3f);
        dataSet.setValueLinePart2Length(0.4f);
        dataSet.setValueLineColor(Color.YELLOW);//设置连接线的颜色
        dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
        PieData pieData = new PieData(dataSet);
        pieData.setValueTextSize(11f);
        pieData.setValueTextColor(Color.DKGRAY);

//TODO 设置不显示百分比时,如果是数字会在数字后面自动添加了一个%,这个是在源码中写的,有兴趣可以看看
        pieChart.setUsePercentValues(false); 
        //使用下面的格式替换 PercentFormatter
//        pieData.setValueFormatter(new PercentFormatter());
        pieData.setValueFormatter(new DefaultValueFormate("万"));//自己修改的方法

        pieChart.setData(pieData);
        pieChart.highlightValues(null);
        pieChart.invalidate();
    }

到此处显示原始数据的问题就圆满解决了。



本以为这样就结束了,然而并没有。。。。。。

需求又说了,还要给饼图中的每一个扇形添加点击页面跳转事件,然后就找到了下面这个方法:

pieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, Highlight h) {
            }

            @Override
            public void onNothingSelected() {
            }
        });

测试的时候发现这个点击事件是有效的,并且还能让该点击的扇形区域有一个放大效果,但是,回到饼图页面的时候发现再次点击饼图,执行了 OnChartValueSelectedListeneronNothingSelected() 方法,没有执行 onValueSelected(Entry e, Highlight h)方法,要再点击一次才能执行 onValueSelected(Entry e, Highlight h) 方法,一开始以为是因为这个 Highlighting(github 官网有说明) 这个属性导致的,然后就把这个东西使用下面方式给关闭:

        pieChart.setHighlightPerTapEnabled(false);

关掉之后,这个“放大”的效果确实没有了,但是扇形区域的点击事件也没有了。
通过 pieChart 的 setOnChartValueSelectedListener 这个方法找到 chart 类中的源码:


    /**
     * Highlights the value selected by touch gesture. Unlike
     * highlightValues(...), this generates a callback to the
     * OnChartValueSelectedListener.
     *
     * @param high         - the highlight object
     * @param callListener - call the listener
     */
    public void highlightValue(Highlight high, boolean callListener) {

        Entry e = null;

        if (high == null)
            mIndicesToHighlight = null;
        else {

            if (mLogEnabled)
                Log.i(LOG_TAG, "Highlighted: " + high.toString());

            e = mData.getEntryForHighlight(high);
            if (e == null) {
                mIndicesToHighlight = null;
                high = null;
            } else {

                // set the indices to highlight
                mIndicesToHighlight = new Highlight[]{
                        high
                };
            }
        }

        setLastHighlighted(mIndicesToHighlight);

        if (callListener && mSelectionListener != null) {

            if (!valuesToHighlight())
                mSelectionListener.onNothingSelected();
            else {
                // notify the listener
                mSelectionListener.onValueSelected(e, high);
            }
        }

        // redraw the chart
        invalidate();
    }

接着就对这个方法在进行设置,发现没有起作用,目前还没解决这个问题,看到这是不是很郁闷,没解决还写这么长[顺着网线来找我吧],好吧,就是记录一下,以后要是找到解决方法的话再来完善,或者有好的方法的话可以提供一下。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值