Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >MPAndroidChart_动态柱状图

MPAndroidChart_动态柱状图

作者头像
Petterp
发布于 2022-02-09 03:15:11
发布于 2022-02-09 03:15:11
1.5K00
代码可运行
举报
文章被收录于专栏:JetPackJetPack
运行总次数:0
代码可运行

MPAndroidChart攻略——BarChart的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事

需求:显示最近20条的数据,而且500毫秒秒刷新一次,每次都要求数据最新。 解决办法: 使用List储存,每次存储在下标为0的位置,当list长度大于20时,删除第20位即可。需要注意的是(为了时刻展示最新数据,我们将数据存在下标为0的位置,但是要记得遍历list,同步x轴位置)

布局界面

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class MainActivity extends AppCompatActivity {
    private BarChart chart;
    private List<BarEntry> list = new ArrayList<>();
    private CountDownTimer count;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chart = findViewById(R.id.chart);
        info();
    }

    private void info() {
        XAxis xAxis = chart.getXAxis();
        //取消x轴网格线
        xAxis.setDrawGridLines(false);
        //设置x轴位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置x轴显示标签数
        xAxis.setLabelCount(25);
        //定义x轴最大值
        xAxis.setAxisMaximum(25f);
        //禁用图表右边Y轴
        chart.getAxisRight().setEnabled(false);
        //取消图表左边y轴网格线
        chart.getAxisLeft().setDrawGridLines(false);

        //x轴标签集合,i的大小与自定义的最大值关联。
        final List<String> list = new ArrayList<>();
        for (int i = 0; i < 20; i ++) {
            list.add("" + i);
        }
        //自定义x轴标签
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                Log.e("demo", String.valueOf(value));
                if (value > 19) {
                    return "";
                } else {
                    return list.get((int) value);
                }
            }
        });

        //取消图例显示
        chart.getLegend().setEnabled(false);

        //取消描述显示
        Description description = new Description();
        description.setEnabled(false);
        chart.setDescription(description);

        //开启定时器
        count = new CountDownTimer(Integer.MAX_VALUE, 500) {
            @Override
            public void onTick(long millisUntilFinished) {
                setData((int) (Math.random() * 80));
            }

            @Override
            public void onFinish() {

            }
        }.start();
    }

    private void setData(int k) {
        //每次存储在下标为0的位置
        list.add(0, new BarEntry(0, k));
        //更改x轴的下标
        for (int i = 0; i < list.size(); i++) {
            list.get(i).setX(i);
        }
        //条目大于20时,删除最后的条目
        if (list.size() > 20) {
            list.remove(20);
        }
        BarDataSet set = new BarDataSet(list, "");
        BarData data = new BarData(set);
        data.setBarWidth(0.6f);
        chart.setData(data);
        //刷新布局
        chart.invalidate();
    }

    @Override
    protected void onStop() {
        super.onStop();
        if(count!=null){
            count.cancel();
            count=null;
        }
    }
}

代码如上,相应的注释也在上面,注意上面的setData并没有优化,这里只是为了演示效果。 效果图

最后,写一下自定义x轴的一些注意事项 1. x轴标签的位置与自定义x轴最大值相关,比如上面代码里设置了最大长度为25f,但是在给List<Entry>里面添加数据时,我们的 i 最大也就是19,所以产生了x轴有一部分是空白的原因。 2. 标签数的定义,利用 xAxis.setLabelCount(25) 设置了显示25个标签,但是这个数字并不是固定,这里 注意一下上面代码里 打印的 Log,它会执行你设置的标签数次(不一定),如果一定要准确,需要加上 true,精准计数。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
安卓MPAndroidChart绘制柱状图
首先是添加Jar包 进入Gradle Scripts的目录,添加Jar包都在这里 首先是Project这个的allprojects里面加上一行 allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } } 在app这个里面denpendencies中弄成这样子的 dependencies { implementat
SingYi
2022/07/14
9790
安卓MPAndroidChart绘制柱状图
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
MPAndroidChart攻略——BarChart并列柱状图的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事及自定义标签颜色 昨天在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。 先看简
Petterp
2022/02/09
1.6K0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
MPAndroidChart_水平条形图的那些事
水平条形图?也就是倒起来的柱状图,简单理解可以为,将正常的图表顺时针旋转90度,其x轴,y轴对应关系如下。
Petterp
2022/02/09
1.9K0
MPAndroidChart_水平条形图的那些事
MPchart使用详解及详细属性(一)
项目源代码:https://github.com/libin7278/MpChart
先知先觉
2019/01/21
7.1K0
安卓MPAndroidChart绘制多层级的堆叠条形图
这次是在上一篇的基础上增加的,所以导包这些啥的就跳过了研究了一下代码,发现主要的区别就在于增加data的时候,第二个参数传递的是一个数组,然后就变成了堆叠条形图。
SingYi
2022/07/14
1.3K0
安卓MPAndroidChart绘制多层级的堆叠条形图
MPAndroidChart_RadarChart雷达图的那些事
重写这两个类 RadarChart和 XAxisRendererRadarChart。其实也就是更改一个方法,别觉得有什么太困难。
Petterp
2022/02/09
2K0
MPAndroidChart_RadarChart雷达图的那些事
MPAndroidChart_折线图的那些事
看效果还挺不错吧,但是我们实际开发时,往往需求没这么简单,下面,我们来对折线图各种方法进行一个总结。
Petterp
2022/02/09
4K0
MPAndroidChart_折线图的那些事
Android 图表开发开源库MPAndroidChart
图1的效果不是用这个实现的,如果感兴趣可以参考我这篇文章  Android渐变圆环
再见孙悟空_
2023/02/10
2.1K0
Android 图表开发开源库MPAndroidChart
安卓MPAndroidChart绘制水平柱状图
这个和垂直柱状图一模一样,只不过把控件名换了一下从barchart换成了HorizontalBarChart
SingYi
2022/07/14
7410
安卓MPAndroidChart绘制水平柱状图
android详解_MPAndroidChart
首先依赖 1. implementation ‘com.github.PhilJay:MPAndroidChart:v3.0.3’
全栈程序员站长
2022/09/20
1.3K0
android详解_MPAndroidChart
MPAndroidChart 之实现底部显示的自定义MarkerView
接到一个需求需要折线图显示数据,权衡利弊后没有自己手绘哦,毕竟怕耽搁时间(或许也是怕写一半写不出来 哈哈哈),所以首选当然是之前接触过的MPAndroidChart,毕竟它很强很强很强。。。
木溪bo
2020/06/22
3.9K0
Android——MPAndroidChart折线图/柱状图/饼形图的使用
【背景】:项目中需要使用到图表,于是找了目前非常热门的开源图表,折线图/柱状图/饼图等应有尽有,各种效果实现都很给力,附上github链接,有原DEMO,github是最好的老师,看DEMO例程源码,相比在网上泛泛的查资料要高效的多。https://github.com/PhilJay/MPAndroidChart
Winter_world
2020/09/25
3.6K0
Android——MPAndroidChart折线图/柱状图/饼形图的使用
Ohos-MPChart——支持多种图表绘制的组件
Ohos-MPChart是OpenAtom OpenHarmony(简称“OpenHarmony”)系统显示各种图表视图的三方组件,用于声明式应用开发,提供了多种多样的图表视图,包括折线图、曲线图、柱形图、饼状图、K线图、雷达图、气泡图。适用于各种统计后的数据以视觉直观的方式呈现。
小帅聊鸿蒙
2025/04/21
1300
Ohos-MPChart——支持多种图表绘制的组件
MPAndroidChart_饼图的那些事
MPAndroidChart攻略——PieChartt的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事及自定义标签颜色 目录 从简易Demo开始 1. 百分比的设置 2. 标签的设置(标签就是扇形图里的文字) 3. 饼心的设
Petterp
2022/02/09
2.4K0
MPAndroidChart_饼图的那些事
MPAndroidChart总结
第一天 LineChart的常用属性 lineChart.setDrawBorders(false);//设置绘制边界 lineChart.setDescription("最大值是: "+ max+",最小值是:"+min);// 数据描述 lineChart.setDescriptionTextSize(16f);//数据描述字体大小, 最小值6f, 最大值16f. lineChart.setDescriptionPosition(2500f,50f);//数据描述字体的位置 lineCha
对话、
2022/02/22
1.1K0
Highcharts-6-柱状图汇总
本文重点介绍的是可视化库Highcharts的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要内容包含:
皮大大
2021/03/01
3.3K0
Highcharts-6-柱状图汇总
MPchart 使用详解及详细属性( 二)----pieChart(饼状图)
项目源代码:https://github.com/libin7278/MpChart
先知先觉
2019/01/21
3.2K0
Highcharts快速入门及绘制柱状图
本文重点介绍的是可视化库Highcharts的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要内容包含:
皮大大
2021/02/21
3.5K0
Highcharts快速入门及绘制柱状图
相关推荐
安卓MPAndroidChart绘制柱状图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验