饼图不显示百分比（%），显示原始数据的处理 |
您所在的位置：网站首页 › 三维饼图怎么显示数值 › 饼图不显示百分比（%），显示原始数据的处理 |
饼图不显示百分比（%），显示原始数据的处理
|
需求：做一个饼图，在显示数据的时候不显示百分比样式，而是要显示原来的数据，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 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 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() { } });测试的时候发现这个点击事件是有效的，并且还能让该点击的扇形区域有一个放大效果，但是，回到饼图页面的时候发现再次点击饼图，执行了 OnChartValueSelectedListener 的 onNothingSelected() 方法，没有执行 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(); }接着就对这个方法在进行设置，发现没有起作用，目前还没解决这个问题，看到这是不是很郁闷，没解决还写这么长[顺着网线来找我吧]，好吧，就是记录一下，以后要是找到解决方法的话再来完善，或者有好的方法的话可以提供一下。 |
【本文地址】
今日新闻 |
推荐新闻 |