MPAndroidChart_动态柱状图

简介: 需求:显示最近20条的数据,而且500毫秒秒刷新一次,每次都要求数据最新。

需求:显示最近20条的数据,而且500毫秒秒刷新一次,每次都要求数据最新。

解决办法:

使用List储存,每次存储在下标为0的位置,当list长度大于20时,删除第20位即可。需要注意的是(为了时刻展示最新数据,我们将数据存在下标为0的位置,但是要记得遍历list,同步x轴位置)

布局界面

<?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>
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并没有优化,这里只是为了演示效果。

效果图

20190123174516468.gif最后,写一下自定义x轴的一些注意事项

1. x轴标签的位置与自定义x轴最大值相关,比如上面代码里设置了最大长度为25f,但是在给List<Entry>里面添加数据时,我们的 i 最大也就是19,所以产生了x轴有一部分是空白的原因。

2. 标签数的定义,利用 xAxis.setLabelCount(25) 设置了显示25个标签,但是这个数字并不是固定,这里 注意一下上面代码里 打印的 Log,它会执行你设置的标签数次(不一定),如果一定要准确,需要加上  true,精准计数。

目录
相关文章
|
5月前
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
57 0
|
机器学习/深度学习 人工智能 并行计算
|
2月前
|
SQL
Grafana如何展示柱状图-将折线图调整为柱状图
Grafana如何展示柱状图-将折线图调整为柱状图
|
3月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
4月前
|
数据可视化 数据处理
灯芯柱状图代码解读
灯芯柱状图代码解读
36 0
|
4月前
|
监控 C#
C# | 使用Chart动态展示实时折线图数据
实时折线图是展示数据变化趋势的有效方式,可以用于监控系统性能、物理实验、股票走势等多个领域。 在C#中,我们可以使用Chart控件来实现实时折线图的展示,其动态性和可交互性可以帮助用户更好地理解数据。 本文将介绍如何使用Chart控件展示实时折线图数据,希望能帮助读者快速掌握这个技能,应用于实际场景中。
204 0
C# | 使用Chart动态展示实时折线图数据
|
9月前
|
JavaScript 数据格式 容器
echarts图表-饼图、柱状图、折线图、散点图之间相互切换
echarts图表-饼图、柱状图、折线图、散点图之间相互切换
210 0
|
5月前
|
JSON 数据格式
Echarts折线图分段用不同颜色显示
Echarts折线图分段用不同颜色显示
39 0
|
5月前
Echarts饼状图大小及其位置调整
Echarts饼状图大小及其位置调整
63 1
|
数据挖掘
图表解析系列之柱状图
作为人们最常用的图表之一,柱状图也衍生出多种多样的图表形式。例如,将多个并列的类别聚类、形成一组,再在组与组之间进行比较,这种图表叫做“分组柱状图”或“簇状柱形图”。将类别拆分称多个子类别,形成“堆叠柱状图”。再如将柱形图与折线图结合起来,共同绘制在一张图上,俗称“双轴图”,等等。