当前位置: 首页 > news >正文

MpAndroidChart3最强实践攻略

    本篇主要总结下Android非常火爆的一个三方库MpAndroidChart的使用。可能在大多数情况下,我们很少会在Android端去开发图表。但如果说去做一些金融财经类、工厂类、大数据类等的app,那么绝对会用到MpAndroidChart。

一、前言

    2018年,那年的我还很单纯,还没进入互联网。当时开发一个大数据平台项目,因此调研了Android端主流的图表三方库。其中,包括功能强大的MpAndroidChart、使用简单且体积较小的HelloCharts,以及在web前端非常火的Echarts。

    回到2023年的今天,我们再次去github瞄一眼。以当前github的star数来看,Echarts仍然是最强大的图表库,支持的图表种类也是最丰富的。然而由于Echarts不是NA的,在Android端使用并不方便。当然这不代表无法使用,我们可以让前端同学做一个H5页面,在WebView中去加载h5页面间接使用它。

    作为Android端的开发同学,既然我们可以NA来实现,那就不要考虑h5这种方式了。 其实绝大多数情况下,客户端展示的图表不会太花里胡哨,MpAndroidChart完全可以满足我们的诉求。

一、柱形图

    什么是柱形图?简单来讲,就是那种一个柱一个柱组成的图。真是听君一席话,如听一席话。。。看下百度百科的官方解释:

柱形图,又称长条图、柱状统计图条图条状图棒形图,是一种以长方形的长度为变量的统计图表。

    从百度图片随便搜了个柱形图,长这样,应该是统计七大洲平均海拔高度的柱形图,那我们接下来基于MpAndroidChart的BarChart去实现一样的效果。

    首先,这是单柱的简单的柱形图,数据源比较简单,就是一组七大洲的海拔高度数据,那我们直接按照api设置一下就好了。

/*** 设置数据源*/private void setData() {List<BarEntry> barEntries = new ArrayList<>();barEntries.add(new BarEntry(0,1500));barEntries.add(new BarEntry(1,500));barEntries.add(new BarEntry(2,1500));barEntries.add(new BarEntry(3,2000));barEntries.add(new BarEntry(4,1000));barEntries.add(new BarEntry(5,500));barEntries.add(new BarEntry(6,1));BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");BarData ba = new BarData(barDataSet);mBarChart.setData(ba);}

    效果长这样,非常原始的风格,看上去乱糟糟的,非常糟糕: 

     如果我们不对柱形图去做一些UI的设置,那么默认的效果是比较粗犷且不美观的。因此,接下来我们一步步去美化这个柱形图。

1、为不同的柱设置不同的颜色

    /*** 设置数据源*/private void setData() {List<BarEntry> barEntries = new ArrayList<>();barEntries.add(new BarEntry(0,1500));barEntries.add(new BarEntry(1,500));barEntries.add(new BarEntry(2,1500));barEntries.add(new BarEntry(3,2000));barEntries.add(new BarEntry(4,1000));barEntries.add(new BarEntry(5,500));barEntries.add(new BarEntry(6,1));BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");// 设置颜色List<Integer> colors = new ArrayList<>();colors.add(Color.GRAY);colors.add(Color.GREEN);colors.add(Color.BLUE);colors.add(Color.RED);colors.add(Color.YELLOW);colors.add(Color.CYAN);colors.add(Color.BLACK);barDataSet.setColors(colors);BarData ba = new BarData(barDataSet);mBarChart.setData(ba);}

2、设置柱形图的样式

    private void initUI(){// 不显示图例mBarChart.getLegend().setEnabled(false);// 不显示描述mBarChart.getDescription().setEnabled(false);// 左右空出barWidth/2,更美观mBarChart.setFitBars(true);// 不绘制网格mBarChart.setDrawGridBackground(false);XAxis xAxis = mBarChart.getXAxis();// 设置x轴显示在下方xAxis.setPosition(XAxisPosition.BOTTOM);// 设置x轴不画线xAxis.setDrawGridLines(false);// 设置自定义的ValueFormatterString[] labels = {"北美洲","南美洲","欧洲","亚洲","大洋洲","非洲","南极洲"};xAxis.setValueFormatter(new ValueFormatter() {@Overridepublic String getFormattedValue(float value) {int index = (int) value;return labels[index];}});// 设置左y轴YAxis yAxis = mBarChart.getAxisLeft();// 设置y-label显示在图表外yAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);// Y轴从0开始,不然会上移一点yAxis.setAxisMinimum(0f);// 设置y轴不画线yAxis.setDrawGridLines(false);// 不显示右y轴YAxis rightAxis = mBarChart.getAxisRight();rightAxis.setEnabled(false);}

     优化后,新的柱形图长这样:

http://www.lryc.cn/news/34221.html

相关文章:

  • Spring笔记(9):事务管理ACID
  • io流 知识点+代码实例
  • 【MySQL】P8 多表查询(2) - 连接查询 联合查询
  • QML动画(Animator)
  • Git 分支操作【解决分支冲突问题】
  • 盘点全球10大女性技术先驱
  • C++之dynamic_cast
  • JavaScript 箭头函数、函数参数
  • JavaScript_Object.keys() Object.values()
  • 扬帆优配|高送转+高分红+高增长潜力股揭秘
  • 基于transformer的多帧自监督深度估计 Multi-Frame Self-Supervised Depth with Transformers
  • 设计模式: 单例模式
  • idea编辑XML文件出现:Tag name expected报错
  • 第十三届蓝桥杯省赛C++ A组 爬树的甲壳虫(简单概率DP)
  • 手动集成Tencent SDK遇到的坑!!!
  • 三天吃透mybatis面试八股文
  • SpringBoot整合Quartz以及异步调用
  • Golang 中 Slice的分析与使用(含源码)
  • 瀑布开发与敏捷开发的区别,以及从瀑布转型敏捷项目管理的5大注意事项
  • “华为杯”研究生数学建模竞赛2007年-【华为杯】A题:建立食品卫生安全保障体系数学模型及改进模型的若干理论问题(附获奖论文)
  • 基于JavaWeb学生选课系统开发与设计(附源码资料)
  • centos7 oracle19c安装||新建用户|| ORA-01012: not logged on
  • 【算法设计-分治】递归与尾递归
  • HTML 编辑器
  • css盒模型详解
  • 函数模板(template关键字的应用)
  • 嵌入式学习笔记——使用寄存器编程操作GPIO
  • 图像的读取与保存
  • 【蓝桥杯集训·每日一题】AcWing 4074. 铁路与公路
  • 网络:TCP与UDP相关知识(详细)