Android图表库MPAndroidChart(七)—饼状图可以再简单一点

接上文，今天实现的是用的很多的，作用在统计上的饼状图，我们看下今天的效果

这个效果，我们实现，和之前一样的套路，我先来说下这个的应用场景，假设，我是一名小学老师，现在教务处让我设置一个图表，说明下我带的班级期末考试有多少人优秀，多少人及格和不及格等等，而这些呢，我已经算出来百分比了，只剩下画图了，那好，我们就来实现以下吧

一.基本实现

首先是我们的布局

  1.  <com.github.mikephil.charting.charts.PieChart
  2.         android:id="@+id/mPieChart"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="0dp"
  5.         android:layout_weight="1"/>

我们的饼状图是PieChart，然后进行初始化

  1.         //饼状图
  2.         mPieChart = (PieChart) findViewById(R.id.mPieChart);
  3.         mPieChart.setUsePercentValues(true);
  4.         mPieChart.getDescription().setEnabled(false);
  5.         mPieChart.setExtraOffsets(5, 10, 5, 5);
  7.         mPieChart.setDragDecelerationFrictionCoef(0.95f);
  8.         //设置中间文件
  9.         mPieChart.setCenterText(generateCenterSpannableText());
  11.         mPieChart.setDrawHoleEnabled(true);
  12.         mPieChart.setHoleColor(Color.WHITE);
  14.         mPieChart.setTransparentCircleColor(Color.WHITE);
  15.         mPieChart.setTransparentCircleAlpha(110);
  17.         mPieChart.setHoleRadius(58f);
  18.         mPieChart.setTransparentCircleRadius(61f);
  20.         mPieChart.setDrawCenterText(true);
  22.         mPieChart.setRotationAngle(0);
  23.         // 触摸旋转
  24.         mPieChart.setRotationEnabled(true);
  25.         mPieChart.setHighlightPerTapEnabled(true);
  27.         //变化监听
  28.         mPieChart.setOnChartValueSelectedListener(this);

饼状图还是比较简单粗暴的，这里我们把数据写上去

  1.         //模拟数据
  2.         ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
  3.         entries.add(new PieEntry(40, "优秀"));
  4.         entries.add(new PieEntry(20, "满分"));
  5.         entries.add(new PieEntry(30, "及格"));
  6.         entries.add(new PieEntry(10, "不及格"));
  8.         //设置数据
  9.         setData(entries);
  11.         mPieChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
  13.         Legend l = mPieChart.getLegend();
  14.         l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
  15.         l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
  16.         l.setOrientation(Legend.LegendOrientation.VERTICAL);
  17.         l.setDrawInside(false);
  18.         l.setXEntrySpace(7f);
  19.         l.setYEntrySpace(0f);
  20.         l.setYOffset(0f);
  22.         // 输入标签样式
  23.         mPieChart.setEntryLabelColor(Color.WHITE);
  24.         mPieChart.setEntryLabelTextSize(12f);

这里有一点要注意，他中间也是有文字的，当然，你也是可以关闭的，我们就不给他设置更多的属性了，大家有兴趣自己去实现下，我注释掉的部分

  1.         //设置中间文字
  2.         private SpannableString generateCenterSpannableText() {
  3.         //原文：MPAndroidChart\ndeveloped by Philipp Jahoda
  4.         SpannableString s = new SpannableString("刘某人程序员\n我仿佛听到有人说我帅");
  5.         //s.setSpan(new RelativeSizeSpan(1.7f), 0, 14, 0);
  6.         //s.setSpan(new StyleSpan(Typeface.NORMAL), 14, s.length() - 15, 0);
  7.         // s.setSpan(new ForegroundColorSpan(Color.GRAY), 14, s.length() - 15, 0);
  8.         //s.setSpan(new RelativeSizeSpan(.8f), 14, s.length() - 15, 0);
  9.         // s.setSpan(new StyleSpan(Typeface.ITALIC), s.length() - 14, s.length(), 0);
  10.         // s.setSpan(new ForegroundColorSpan(ColorTemplate.getHoloBlue()), s.length() - 14, s.length(), 0);
  11.         return s;
  12.     }

关于设置数据，就是调用我们的setdata方法

  1. //设置数据
  2.     private void setData(ArrayList<PieEntry> entries) {
  3.         PieDataSet dataSet = new PieDataSet(entries, "三年级一班");
  4.         dataSet.setSliceSpace(3f);
  5.         dataSet.setSelectionShift(5f);
  7.         //数据和颜色
  8.         ArrayList<Integer> colors = new ArrayList<Integer>();
  9.         for (int c : ColorTemplate.VORDIPLOM_COLORS)
  10.             colors.add(c);
  11.         for (int c : ColorTemplate.JOYFUL_COLORS)
  12.             colors.add(c);
  13.         for (int c : ColorTemplate.COLORFUL_COLORS)
  14.             colors.add(c);
  15.         for (int c : ColorTemplate.LIBERTY_COLORS)
  16.             colors.add(c);
  17.         for (int c : ColorTemplate.PASTEL_COLORS)
  18.             colors.add(c);
  19.         colors.add(ColorTemplate.getHoloBlue());
  20.         dataSet.setColors(colors);
  21.         PieData data = new PieData(dataSet);
  22.         data.setValueFormatter(new PercentFormatter());
  23.         data.setValueTextSize(11f);
  24.         data.setValueTextColor(Color.WHITE);
  25.         mPieChart.setData(data);
  26.         mPieChart.highlightValues(null);
  27.         //刷新
  28.         mPieChart.invalidate();
  29.     }

现在运行，就是实现的了，我们再来看下其他的效果

二.显示百分比

三.显示类型

四.x轴动画

五.y轴动画

六.xy轴动画

七.显示中间文字

八.旋转动画

这些细节都是一句话就能实现的，仔细看下嘛的代码

activity_piechart.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  8.     <com.github.mikephil.charting.charts.PieChart
  9.         android:id="@+id/mPieChart"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="0dp"
  12.         android:layout_weight="1"/>
  14.     <LinearLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:orientation="horizontal">
  19.         <Button
  20.             android:id="@+id/btn_show_percentage"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:text="显示百分比"/>
  25.         <Button
  26.             android:id="@+id/btn_show_type"
  27.             android:layout_width="wrap_content"
  28.             android:layout_height="wrap_content"
  29.             android:text="是否铺满"/>
  31.         <Button
  32.             android:id="@+id/btn_anim_x"
  33.             android:layout_width="wrap_content"
  34.             android:layout_height="wrap_content"
  35.             android:text="X轴动画"/>
  37.         <Button
  38.             android:id="@+id/btn_anim_y"
  39.             android:layout_width="wrap_content"
  40.             android:layout_height="wrap_content"
  41.             android:text="Y轴动画"/>
  43.     </LinearLayout>
  45.     <LinearLayout
  46.         android:layout_width="match_parent"
  47.         android:layout_height="wrap_content"
  48.         android:orientation="horizontal">
  50.         <Button
  51.             android:id="@+id/btn_anim_xy"
  52.             android:layout_width="wrap_content"
  53.             android:layout_height="wrap_content"
  54.             android:text="XY轴动画"/>
  56.         <Button
  57.             android:id="@+id/btn_show_center_text"
  58.             android:layout_width="wrap_content"
  59.             android:layout_height="wrap_content"
  60.             android:text="显示中间文字"/>
  62.         <Button
  63.             android:id="@+id/btn_save_pic"
  64.             android:layout_width="wrap_content"
  65.             android:layout_height="wrap_content"
  66.             android:text="保存画廊"/>
  68.         <Button
  69.             android:id="@+id/btn_anim_rotating"
  70.             android:layout_width="wrap_content"
  71.             android:layout_height="wrap_content"
  72.             android:text="旋转动画"/>
  74.     </LinearLayout>
  76. </LinearLayout>

PieChartActivity

  2. public class PieChartActivity extends BaseActivity implements OnChartValueSelectedListener, View.OnClickListener {
  4.     private PieChart mPieChart;
  6.     //显示百分比
  7.     private Button btn_show_percentage;
  8.     //显示类型
  9.     private Button btn_show_type;
  10.     //x轴动画
  11.     private Button btn_anim_x;
  12.     //y轴动画
  13.     private Button btn_anim_y;
  14.     //xy轴动画
  15.     private Button btn_anim_xy;
  16.     //保存到sd卡
  17.     private Button btn_save_pic;
  18.     //显示中间文字
  19.     private Button btn_show_center_text;
  20.     //旋转动画
  21.     private Button btn_anim_rotating;
  23.     @Override
  24.     protected void onCreate(Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_piechart);
  28.         initView();
  29.     }
  31.     //初始化View
  32.     private void initView() {
  34.         btn_show_percentage = (Button) findViewById(R.id.btn_show_percentage);
  35.         btn_show_percentage.setOnClickListener(this);
  36.         btn_show_type = (Button) findViewById(R.id.btn_show_type);
  37.         btn_show_type.setOnClickListener(this);
  38.         btn_anim_x = (Button) findViewById(R.id.btn_anim_x);
  39.         btn_anim_x.setOnClickListener(this);
  40.         btn_anim_y = (Button) findViewById(R.id.btn_anim_y);
  41.         btn_anim_y.setOnClickListener(this);
  42.         btn_anim_xy = (Button) findViewById(R.id.btn_anim_xy);
  43.         btn_anim_xy.setOnClickListener(this);
  44.         btn_save_pic = (Button) findViewById(R.id.btn_save_pic);
  45.         btn_save_pic.setOnClickListener(this);
  46.         btn_show_center_text = (Button) findViewById(R.id.btn_show_center_text);
  47.         btn_show_center_text.setOnClickListener(this);
  48.         btn_anim_rotating = (Button) findViewById(R.id.btn_anim_rotating);
  49.         btn_anim_rotating.setOnClickListener(this);
  51.         //饼状图
  52.         mPieChart = (PieChart) findViewById(R.id.mPieChart);
  53.         mPieChart.setUsePercentValues(true);
  54.         mPieChart.getDescription().setEnabled(false);
  55.         mPieChart.setExtraOffsets(5, 10, 5, 5);
  57.         mPieChart.setDragDecelerationFrictionCoef(0.95f);
  58.         //设置中间文件
  59.         mPieChart.setCenterText(generateCenterSpannableText());
  61.         mPieChart.setDrawHoleEnabled(true);
  62.         mPieChart.setHoleColor(Color.WHITE);
  64.         mPieChart.setTransparentCircleColor(Color.WHITE);
  65.         mPieChart.setTransparentCircleAlpha(110);
  67.         mPieChart.setHoleRadius(58f);
  68.         mPieChart.setTransparentCircleRadius(61f);
  70.         mPieChart.setDrawCenterText(true);
  72.         mPieChart.setRotationAngle(0);
  73.         // 触摸旋转
  74.         mPieChart.setRotationEnabled(true);
  75.         mPieChart.setHighlightPerTapEnabled(true);
  77.         //变化监听
  78.         mPieChart.setOnChartValueSelectedListener(this);
  80.         //模拟数据
  81.         ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
  82.         entries.add(new PieEntry(40, "优秀"));
  83.         entries.add(new PieEntry(20, "满分"));
  84.         entries.add(new PieEntry(30, "及格"));
  85.         entries.add(new PieEntry(10, "不及格"));
  87.         //设置数据
  88.         setData(entries);
  90.         mPieChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
  92.         Legend l = mPieChart.getLegend();
  93.         l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
  94.         l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
  95.         l.setOrientation(Legend.LegendOrientation.VERTICAL);
  96.         l.setDrawInside(false);
  97.         l.setXEntrySpace(7f);
  98.         l.setYEntrySpace(0f);
  99.         l.setYOffset(0f);
  101.         // 输入标签样式
  102.         mPieChart.setEntryLabelColor(Color.WHITE);
  103.         mPieChart.setEntryLabelTextSize(12f);
  104.     }
  106.     //设置中间文字
  107.     private SpannableString generateCenterSpannableText() {
  108.         //原文：MPAndroidChart\ndeveloped by Philipp Jahoda
  109.         SpannableString s = new SpannableString("刘某人程序员\n我仿佛听到有人说我帅");
  110.         //s.setSpan(new RelativeSizeSpan(1.7f), 0, 14, 0);
  111.         //s.setSpan(new StyleSpan(Typeface.NORMAL), 14, s.length() - 15, 0);
  112.         // s.setSpan(new ForegroundColorSpan(Color.GRAY), 14, s.length() - 15, 0);
  113.         //s.setSpan(new RelativeSizeSpan(.8f), 14, s.length() - 15, 0);
  114.         // s.setSpan(new StyleSpan(Typeface.ITALIC), s.length() - 14, s.length(), 0);
  115.         // s.setSpan(new ForegroundColorSpan(ColorTemplate.getHoloBlue()), s.length() - 14, s.length(), 0);
  116.         return s;
  117.     }
  119.     //设置数据
  120.     private void setData(ArrayList<PieEntry> entries) {
  121.         PieDataSet dataSet = new PieDataSet(entries, "三年级一班");
  122.         dataSet.setSliceSpace(3f);
  123.         dataSet.setSelectionShift(5f);
  125.         //数据和颜色
  126.         ArrayList<Integer> colors = new ArrayList<Integer>();
  127.         for (int c : ColorTemplate.VORDIPLOM_COLORS)
  128.             colors.add(c);
  129.         for (int c : ColorTemplate.JOYFUL_COLORS)
  130.             colors.add(c);
  131.         for (int c : ColorTemplate.COLORFUL_COLORS)
  132.             colors.add(c);
  133.         for (int c : ColorTemplate.LIBERTY_COLORS)
  134.             colors.add(c);
  135.         for (int c : ColorTemplate.PASTEL_COLORS)
  136.             colors.add(c);
  137.         colors.add(ColorTemplate.getHoloBlue());
  138.         dataSet.setColors(colors);
  139.         PieData data = new PieData(dataSet);
  140.         data.setValueFormatter(new PercentFormatter());
  141.         data.setValueTextSize(11f);
  142.         data.setValueTextColor(Color.WHITE);
  143.         mPieChart.setData(data);
  144.         mPieChart.highlightValues(null);
  145.         //刷新
  146.         mPieChart.invalidate();
  147.     }
  149.     @Override
  150.     public void onValueSelected(Entry e, Highlight h) {
  152.     }
  154.     @Override
  155.     public void onNothingSelected() {
  157.     }
  159.     @Override
  160.     public void onClick(View v) {
  161.         switch (v.getId()) {
  162.             //显示百分比
  163.             case R.id.btn_show_percentage:
  164.                 for (IDataSet<?> set : mPieChart.getData().getDataSets())
  165.                     set.setDrawValues(!set.isDrawValuesEnabled());
  167.                 mPieChart.invalidate();
  168.                 break;
  169.             //显示类型
  170.             case R.id.btn_show_type:
  171.                 if (mPieChart.isDrawHoleEnabled())
  172.                     mPieChart.setDrawHoleEnabled(false);
  173.                 else
  174.                     mPieChart.setDrawHoleEnabled(true);
  175.                 mPieChart.invalidate();
  176.                 break;
  177.             //x轴动画
  178.             case R.id.btn_anim_x:
  179.                 mPieChart.animateX(1400);
  180.                 break;
  181.             //y轴动画
  182.             case R.id.btn_anim_y:
  183.                 mPieChart.animateY(1400);
  184.                 break;
  185.             //xy轴动画
  186.             case R.id.btn_anim_xy:
  187.                 mPieChart.animateXY(1400, 1400);
  188.                 break;
  189.             //保存到sd卡
  190.             case R.id.btn_save_pic:
  191.                 mPieChart.saveToPath("title" + System.currentTimeMillis(), "");
  192.                 break;
  193.             //显示中间文字
  194.             case R.id.btn_show_center_text:
  195.                 if (mPieChart.isDrawCenterTextEnabled())
  196.                     mPieChart.setDrawCenterText(false);
  197.                 else
  198.                     mPieChart.setDrawCenterText(true);
  199.                 mPieChart.invalidate();
  200.                 break;
  201.             //旋转动画
  202.             case R.id.btn_anim_rotating:
  203.                 mPieChart.spin(1000, mPieChart.getRotationAngle(), mPieChart.getRotationAngle() + 360, Easing.EasingOption
  204.                         .EaseInCubic);
  205.                 break;
  206.         }
  207.     }
  208. }

是不是觉得很欢快呢？就是这样，我都有考虑是不是要二次封装一个MP了，因为基本的套路都是一模一样的，好了，接下来，我们最后看下运行效果

有兴趣的加群：555974449

Sample:http://download.csdn.net/detail/qq_26787115/9685567

Android图表库MPAndroidChart(七)—饼状图可以再简单一点的更多相关文章

  1. Android图表库MPAndroidChart(八)——饼状图的扩展：折线饼状图

    Android图表库MPAndroidChart(八)--饼状图的扩展:折线饼状图 我们接着上文,饼状图的扩展,增加折现的说明,来看下我们要实现的效果 因为之前对MPAndroidChart的熟悉,所 ...

  2. Android图表库MPAndroidChart(三)——双重轴线形图的实现，这次就so easy了

    Android图表库MPAndroidChart(三)--双重轴线形图的实现,这次就so easy了 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库 ...

  3. Android图表库MPAndroidChart(二)——线形图的方方面面，看完你会回来感谢我的

    Android图表库MPAndroidChart(二)--线形图的方方面面,看完你会回来感谢我的 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...

  4. Android图表库MPAndroidChart(十三)——简约的底部柱状图

    Android图表库MPAndroidChart(十三)--简约的底部柱状图 我们继续上一讲,今天还是说下柱状图,这个图的话应该是用的比较多的,所有拿出来溜溜,先看下效果 我们还是来看下基本实现 一. ...

  5. Android图表库MPAndroidChart(十)——散点图的孪生兄弟气泡图

    Android图表库MPAndroidChart(十)--散点图的孪生兄弟气泡图 起泡图和散点图如出一辙,但是个人认为要比散点图好看一点,我们来看下实际的演示效果 这个和散点图的实现很相似,我们一起来 ...

  6. Android图表库MPAndroidChart(六)——换一种思考方式，水平条形图的实现过程

    Android图表库MPAndroidChart(六)--换一种思考方式,水平条形图的实现过程 一.基本实现 我们之前实现了条形图,现在来看下水平条形图是怎么实现的,说白了就是横起来,看下效果: 说起 ...

  7. Android图表库MPAndroidChart(五)——自定义MarkerView实现选中高亮

    Android图表库MPAndroidChart(五)--自定义MarkerView实现选中高亮 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...

  8. Android图表库MPAndroidChart(四)——条形图的绘制过程过程,隐隐约约我看到了套路

    Android图表库MPAndroidChart(四)--条形图的绘制过程过程,隐隐约约我看到了套路 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库 ...

  9. Android图表库MPAndroidChart(一)——了解他的本质，方能得心应手

    Android图表库MPAndroidChart(一)--了解他的本质,方能得心应手 我们项目中经常会遇到一些统计图,比如折线图,线形图等,在一些运动健康类的App中尤其的常见,这画起来要命,我以前就 ...

随机推荐

  1. SpringBoot开发案例之多任务并行+线程池处理

    前言 前几篇文章着重介绍了后端服务数据库和多线程并行处理优化,并示例了改造前后的伪代码逻辑.当然了,优化是无止境的,前人栽树后人乘凉.作为我们开发者来说,既然站在了巨人的肩膀上,就要写出更加优化的程序 ...

  2. webstorm中github的配置

    1.申请一个github账号,我这里的操作是已经有了账号的情况之下进行的. 打开webstorm,File-->settings,弹出settings框,输入git,得到以下界面,输入githu ...

  3. java中的内部类概念

    内部类和外部类可以互相访问私有属性 1.普通内部类实例化方式 外部类.内部类 对象 = new 外部类().new 内部类(); class Outer{//外部类 private String ms ...

  4. java面试3-对于java中值传递的理解(Hollis)

    这是根据Hollis的直面java内容习得(有兴趣的可以加他微信公众号) 对于初学者来说,要理解java中的值传递很难理解,为什么说java只有值传递?那引用传递呢? java中的错误理解: 错误理解 ...

  5. Joomla!3.7.0 Core SQL注入漏洞动态调试草稿

    参考joolma的mvc框架讲解:http://www.360doc.com/content/11/1219/18/1372409_173441270.shtml 从这个页面开始下断点:Joomla_ ...

  6. PHPCMS v9.6.0 任意文件上传漏洞分析

    引用源:http://paper.seebug.org/273/ 配置了php debug的环境,并且根据这篇文章把流程走了一遍,对phpstorm的debug熟练度+1(跟pycharm一样) 用户 ...

  7. 《C++ Primer》学习笔记：3.3.3其他vector操作

    <C++ Primer>(第五版)中计算vector对象中的索引这一小节中,举例要求计算各个分数段各有多少个成绩. 代码如下: #include <iostream> #inc ...

  8. [HNOI2011]任务调度

    题目描述 有 N 个任务和两台机器 A 与 B.每个任务都需要既在机器 A 上执行,又在机器 B 上执行, 第 i 个任务需要在机器 A 上执行时间 Ai,且需要在机器 B 上执行时间 Bi.最终的目 ...

  9. 【BZOJ1026】【SCOI2009】windy数

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...

  10. Codeforces Round #452 F. Letters Removing

    Description Petya has a string of length n consisting of small and large English letters and digits. ...