MPAndroidChart_动态柱状图

MPAndroidChart攻略第一步——LineChart的点点滴滴。

带你入门折线图的基本使用，各种属性的设置，自定义轴上的标签，及去除边框线与轴线，和MarkView提示的使用。

MPAndroidChart_折线图的那些事

MPAndroidChart_饼图的那些事

MPAndroidChart_动态柱状图

MPAndroidChart_水平条形图的那些事

MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。

需求:显示最近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并没有优化，这里只是为了演示效果。

效果图

最后，写一下自定义x轴的一些注意事项

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

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

MPAndroidChart_动态柱状图

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

猜你喜欢