android mp柱状点击颜色,最牛逼Android图表库--MPChart（Piechart显示数据带%号 的问题）...

其实使用这个库好久了，网上也有各路大神的博客，参考了很多。但是感觉还是有些属性没有涉及到，没有达到高度自定义效果，于是自己亲自实践总结了一下。(如有雷同之处，没错，那就是我借鉴的-尴尬.png)

一、如何在项目中集成MPChart

项目中集成MpChart有两种方式(各有利弊)：

1.添加依赖

在Project即工程下的build.gradle文件里添加

maven { url "https://jitpack.io" }

添加下来是这个样子的：

allprojects {

repositories {

jcenter()

maven { url "https://jitpack.io" }

google()

}

}

然后在项目下的build.gradle文件里添加

compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'

是的，第一种方法就是这么简单

2.导入library

gitHub上的库请移步

导入1.png

导入2.png

导入完成之后再添加项目依赖

导入3.png

到此，第二种方式也介绍完了

然后简单介绍一下这两种方式的利弊：第一种方式不用导入library，可以减小你的项目大小，引用起来也非常方便。但是，这种方法我们无法修改库里的文件，有些不合适我们的属性我们也不能加以调整，有些地方就受限了(亲身体会)。 第二种方式相比就会增加项目的大小。BUT，你可以在你需要的情况下修改library的一些文件，以达到我们想要的效果。

二、如何使用

1.PieChart(饼形图)

这个库使用起来还是非常简单方便的，和普通的控件使用方式是一样的接下来以PieChart为例在布局文件中添加

android:id="@+id/chart1"

android:layout_width="match_parent"

android:layout_height="match_parent" />

在Activity中

-->设置各区块的颜色

public static final int[] PIE_COLORS = {

Color.rgb(181, 194, 202), Color.rgb(129, 216, 200), Color.rgb(241, 214, 145),

Color.rgb(108, 176, 223), Color.rgb(195, 221, 155), Color.rgb(251, 215, 191),

Color.rgb(237, 189, 189), Color.rgb(172, 217, 243)

};

-->模拟数据

HashMap dataMap = new HashMap();

dataMap.put("A","300");

dataMap.put("B","600");

dataMap.put("C","500");

dataMap.put("D","800");

setPieChart(mp_pieChart,dataMap,"数据",true);

-->设置饼形图属性

public void setPieChart(PieChart pieChart, Map pieValues, String title, boolean showLegend) {

pieChart.setUsePercentValues(true);//设置使用百分比(后续有详细介绍)

pieChart.getDescription().setEnabled(false);//设置描述

pieChart.setExtraOffsets(25, 10, 25, 25); //设置边距

pieChart.setDragDecelerationFrictionCoef(0.95f);//设置摩擦系数(值越小摩擦系数越大)

pieChart.setCenterText(title);//设置环中的文字

pieChart.setRotationEnabled(true);//是否可以旋转

pieChart.setHighlightPerTapEnabled(true);//点击是否放大

pieChart.setCenterTextSize(22f);//设置环中文字的大小

pieChart.setDrawCenterText(true);//设置绘制环中文字

pieChart.setRotationAngle(120f);//设置旋转角度

pieChart.setTransparentCircleRadius(61f);//设置半透明圆环的半径,看着就有一种立体的感觉

//这个方法为true就是环形图，为false就是饼图

pieChart.setDrawHoleEnabled(false);

//设置环形中间空白颜色是白色

pieChart.setHoleColor(Color.WHITE);

//设置半透明圆环的颜色

pieChart.setTransparentCircleColor(Color.WHITE);

//设置半透明圆环的透明度

pieChart.setTransparentCircleAlpha(110);

//图例设置

Legend legend = pieChart.getLegend();

if (showLegend) {

legend.setEnabled(true);//是否显示图例

legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);//图例相对于图表横向的位置

legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);//图例相对于图表纵向的位置

legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//图例显示的方向

legend.setDrawInside(false);

legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);

} else {

legend.setEnabled(false);

}

//设置饼图数据

setPieChartData(pieChart, pieValues);

pieChart.animateX(1500, Easing.EasingOption.EaseInOutQuad);//数据显示动画

}

-->设置饼图数据

private void setPieChartData(PieChart pieChart, Map pieValues) {

Set set = pieValues.entrySet();

Iterator it = set.iterator();

while (it.hasNext()) {

Map.Entry entry = (Map.Entry) it.next();

entries.add(new PieEntry(Float.valueOf(entry.getValue().toString()), entry.getKey().toString()));

}

PieDataSet dataSet = new PieDataSet(entries, "");

dataSet.setSliceSpace(3f);//设置饼块之间的间隔

dataSet.setSelectionShift(5f);//设置饼块选中时偏离饼图中心的距离

dataSet.setColors(PIE_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.setValueFormatter(new PercentFormatter());

pieData.setValueTextSize(11f);

pieData.setValueTextColor(Color.DKGRAY);

pieChart.setData(pieData);

pieChart.highlightValues(null);

pieChart.invalidate();

}

如果想要有点击效果则

implements OnChartValueSelectedListener

会自动实现两个方法，一看就懂，这里就不赘述了

效果1.jpg

效果2.png

(今天先到这里，后续会持续更新)

—————————————————2018-01-12补充————————————————

有时候我们希望PieChart上显示的是具体数据而不是百分比，虽然原装库给我们提供了一个方法

mChart.setUsePercentValues(true) 但是效果并不是我们想象的那个样子，虽然显示出来了原始的数据，但是后面有个%，什么鬼。于是自己又看了一下数据设置的方法

PieData data = new PieData(dataSet);

data.setValueFormatter(new PercentFormatter());//是否显示百分号

data.setValueFormatter(new DefaultValueFormatter(1,"元"));//自己修改的方法

那个new PercentFormatter()就是库里原有的方法，我发现无法修改，又看了一下setValueFormatter方法，然后发现了最后一行这个方法，然后自己加了个参数，如图：

code1.png

然后就实现了你想要的效果(原库.jpg是将mChart.setUsePercentValues(false)后的效果)

原库.jpg

修改后.jpg

这就是我为什么会讲导入library的方法，如果原生的库足够满足需求还是直接用方法一直接添加依赖比较好。