美文网首页Android自定义控件Android UI控件优秀文章搜集
最牛逼Android图表库--MPChart(Piechart显

最牛逼Android图表库--MPChart(Piechart显

作者: 影子快飞 | 来源:发表于2018-01-11 17:11 被阅读3887次

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

    https://github.com/PhilJay/MPAndroidChart
    下载下来工程,然后导入如图2的MPChartLib

    导入1.png
    导入2.png
    导入完成之后再添加项目依赖 导入3.png
    到此,第二种方式也介绍完了

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

    二、如何使用

    1.PieChart(饼形图)

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

    <com.github.mikephil.charting.charts.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<String, Float> 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<String, Float> 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的方法,如果原生的库足够满足需求还是直接用方法一直接添加依赖比较好。

    相关文章

      网友评论

      • 天空中的球:哈哈哈哈,居然开始写了
        bd227397c456:大佬你好,这个代码中,将数据设置到饼状图的扇区中是那几句代码
        影子快飞:@天空中的球 :joy: 希望我能坚持下来

      本文标题:最牛逼Android图表库--MPChart(Piechart显

      本文链接:https://www.haomeiwen.com/subject/onftoxtx.html