Android实现图表实时更新

项目里需要App端不断地从服务器获取数据,实时生成图表。图表控件使用的是MPAndroidChart。自己写了些实时更新折线图的demo,数据是线程随机生成的,不是后台数据。

1、Message配合Handler实现

效果如下


Message配合Handler实现.gif

在MainActivity中创建一个产生随机数据的线程,每产生一个数据发送一个Message,Handler收到Message之后更新折线图。

MainActivity代码如下:

public class MainActivity extends AppCompatActivity {
    private static final int TAG = 1;//Message的what标识
    private TextView mTextView;
    private Button mStartButton;

    private LineChart mLineChart;
    private Data[] mDatas;
    private List<Entry> mEntries = new ArrayList<>();

    private Thread mThread;
    private Handler mHandler;
    private Random mRandom;

    private StringBuilder mStringBuilder;
    private int mEndIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = findViewById(R.id.test_txt);
        mStartButton = findViewById(R.id.start_button);
        mLineChart = findViewById(R.id.line_chart);

        mRandom = new Random();
        mStringBuilder = new StringBuilder("现在Y轴数字是0哦");
        mEndIndex = 1;

        //先创建5个Data数据
        mDatas = new Data[]{new Data(1,5),new Data(2,8),
               new Data(3,10),new Data(4,13),new Data(5,16)};
        for (Data data :mDatas){
            mEntries.add(new Entry(data.getValueX(),data.getValueY()));
        }
        LineDataSet dataSet = new LineDataSet(mEntries,"number");
        LineData lineData = new LineData(dataSet);
        mLineChart.setData(lineData);
        mLineChart.invalidate();


        mHandler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (msg.what==TAG){
                    updateTxt(msg);
                    updateChart(msg);
                }
            }
        };

        mThread = new Thread(new Runnable() {
            @Override
            public void run() {
                int corrX = 6;//已经有了五个数据,下一个数据的x坐标从6开始
                while (true){
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    int corrY = mRandom.nextInt(20) + 5;
                    Message message = Message.obtain();
                    message.arg1 = corrY;
                    message.arg2 = corrX;
                    message.what = TAG;
                    mHandler.sendMessage(message);
                    corrX += 1;
                }
            }
        });

        mStartButton.setOnClickListener((View v) -> mThread.start());

    }

    //更新SpannableString类型的文本需要用该函数判断更新数字的位数
    private int endIndex(int i){
        int index = 0;
        while (i!=0){
            i = i/10;
            index += 1;
        }
        return index;
    }

    //更新显示当前值的TextView
    private void updateTxt(Message msg){
        mStringBuilder.replace(7,7 + mEndIndex, msg.arg1 + "");//将原来的数字替换

        SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(mStringBuilder);
        ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.BLUE);
        RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(1.5f);

        mEndIndex = endIndex(msg.arg1);//新的y值的位数

        spannableStringBuilder.setSpan(foregroundColorSpan,7,7 + mEndIndex, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableStringBuilder.setSpan(relativeSizeSpan,7,7 + mEndIndex, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        mTextView.setText(spannableStringBuilder);

    }

    //刷新折线图
    private void updateChart(Message msg){
        mEntries.add(new Entry(msg.arg2,msg.arg1));
        LineDataSet dataSet = new LineDataSet(mEntries,"number");
        LineData lineData = new LineData(dataSet);
        mLineChart.setData(lineData);
        mLineChart.invalidate();
    }

}

Data类如下

public class Data {
    private int valueX;
    private int valueY;

    public Data(int x,int y){
        this.valueX = x;
        this.valueY = y;
    }

    public int getValueX() {
        return valueX;
    }

    public void setValueX(int valueX) {
        this.valueX = valueX;
    }

    public int getValueY() {
        return valueY;
    }

    public void setValueY(int valueY) {
        this.valueY = valueY;
    }
}
2、RxJava实现

Rxjava在处理复杂的多线程事件逻辑时比Handler/Async等要简单易用可靠。用来写这个demo算是大炮打蚊子,纯当练手了。

MainActivity

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private LineChart mLineChart;
    private TextView mTextView;
    private Button mStartButton;
    private List<Entry> mEntryList = new ArrayList<>();

    private Random mRandom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLineChart = findViewById(R.id.line_chart);
        mStartButton = findViewById(R.id.start_button);
        mTextView = findViewById(R.id.value_txt);

        mStartButton.setOnClickListener((View v) -> intervalObservable());
    }

    private void intervalObservable() {
        mRandom = new Random();
        Observable.interval(1000, 1000, TimeUnit.MILLISECONDS)
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Consumer<Long>() {
                    @Override
                    public void accept(Long aLong) throws Exception {
                        Log.e("intervalObservable", Thread.currentThread().getName());
                        Long x = aLong;
                        int y = mRandom.nextInt(10);
                        Data data = new Data(x, y);
                        x++;

                        mEntryList.add(new Entry(data.getX(), data.getY()));
                        LineDataSet dataSet = new LineDataSet(mEntryList, "label");
                        LineData lineData = new LineData(dataSet);
                        mLineChart.setData(lineData);
                        mLineChart.invalidate();
                        mTextView.setText("当前y值为" + y);
                    }
                });
    }
}

写的时候发现如果直接用Observable.create()生成数据的话,速度太快,MPAndroidChart刷新不过来,一片空白。所以改用Observable.interval(),每个1秒生成一个,但是这个函数只能返回一个Observable<Long>的对象,每次发射的都是Long类型的数据,所以把Data类型中的x值改成了Long类型。
还要注意的是,Observable.interval()默认订阅Schedulers.computation这个线程,如果有UI更新的话,需要在主线程中进行观察,即调用observeOn(AndroidSchedulers.mainThread())。

但是我发现一个很神奇的事,MPAndroidChart可以在非UI线程中进行刷新。

难道只能用Observal.interval()吗?其实不是的,我发现只要使被观察者线程休眠一小段时间,就能让折线图刷新出来,代码如下

Observable.create(new ObservableOnSubscribe<Data>() {
            @Override
            public void subscribe(@NonNull ObservableEmitter<Data> e) throws Exception {
                Long x = 0l;
                Random random = new Random();
                while(x < 1000) {
                    int y = random.nextInt(10);
                    Data data = new Data(x, y);
                    e.onNext(data);
                    x++;
                    Thread.sleep(1000);//休眠1秒
                }
                Log.e(TAG, "Observable thread is : " + Thread.currentThread().getName());
            }
        }).subscribeOn(Schedulers.newThread())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(data -> {
                Log.i("onNext(Data data)", data.toString());
                Log.e(TAG, "Observer thread is :" + Thread.currentThread().getName());
                mEntryList.add(new Entry(data.getX(), data.getY()));
                LineDataSet dataSet = new LineDataSet(mEntryList, "label");
                LineData lineData = new LineData(dataSet);
                mLineChart.setData(lineData);
                mLineChart.invalidate();
                mTextView.setText("当前值为" + data.getY());
            });

其实在订阅者线程中休眠也可以正常接收到数据,但订阅者线程一般是UI线程,休眠的话,UI就不会更新了。
另外,被观察者的线程没有休眠的话,即使被观察者数据发送的很快,订阅者在onNext()即使进行了线程休眠,数据也能全部接收到,不会出现事件丢失的情况,这一点让我比较疑惑。
如果被观察者的线程调用了Thread.sleep(1),而观察者在onNext()中调用了Thread.sleep(1000),那么会出现上下游事件处理速率不匹配,事件丢失,OOM等情况。
这个时候就要用支持背压的Flowable了。
其实用Flowable同样可以实现折线图更新,代码如下:

Flowable.create(new FlowableOnSubscribe<Data>() {
            @Override
            public void subscribe(FlowableEmitter<Data> e) throws Exception{
                Long x = 0l;
                Random random = new Random();
                while(x < 1000) {
                    int y = random.nextInt(10);
                    Data data = new Data(x, y);
                    e.onNext(data);
                    x++;
                    Thread.sleep(1000);
                }
                Log.e(TAG, "Observable thread is : " + Thread.currentThread().getName());
            }
        }, BackpressureStrategy.BUFFER).subscribeOn(Schedulers.newThread())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Subscriber<Data>() {
                    Subscription mSubscription;
                    @Override
                    public void onSubscribe(Subscription s) {
                        mSubscription = s;
                        s.request(1);
                    }

                    @Override
                    public void onNext(Data data) {
                        Log.i("onNext(Data data)", data.toString());
                        Log.e(TAG, "Observer thread is :" + Thread.currentThread().getName());
                        mEntryList.add(new Entry(data.getX(), data.getY()));
                        LineDataSet dataSet = new LineDataSet(mEntryList, "label");
                        LineData lineData = new LineData(dataSet);
                        mLineChart.setData(lineData);
                        mLineChart.invalidate();
                        mTextView.setText("当前值为" + data.getY());

                        mSubscription.request(1);
                    }

                    @Override
                    public void onError(Throwable t) {

                    }

                    @Override
                    public void onComplete() {

                    }
                });
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 响应式编程简介 响应式编程是一种基于异步数据流概念的编程模式。数据流就像一条河:它可以被观测,被过滤,被操作,或者...
    说码解字阅读 3,052评论 0 5
  • http://blog.csdn.net/yyh352091626/article/details/5330472...
    奈何心善阅读 3,544评论 0 0
  • 一、RxJava操作符概述 RxJava中的操作符就是为了提供函数式的特性,函数式最大的好处就是使得数据处理简洁易...
    BrotherChen阅读 1,592评论 0 10
  • 一、RxJava操作符概述 RxJava中的操作符就是为了提供函数式的特性,函数式最大的好处就是使得数据处理简洁易...
    无求_95dd阅读 2,979评论 0 21
  • 一、RxJava操作符概述 RxJava中的操作符就是为了提供函数式的特性,函数式最大的好处就是使得数据处理简洁易...
    测天测地测空气阅读 626评论 0 1