Highcharts之动态数据实时折线图(时间折线图)

一、前言

想要实现的效果是，每秒钟动态获取后台数据，进行显示，在网上找了下，先看了下Echarts的效果：http://echarts.baidu.com/examples/editor.html?c=dynamic-data2

这种效果，还行，我想显示的有3条数据，然后又看下了Highcharts，发现了他也有这种效果：

https://www.highcharts.com/demo/dynamic-update

然后我在他的示例上修改成了如下：

两个Y轴显示文字。

 

二、源码

代码如下：

后台模拟了一个简单的数据：

    @GetMapping("vintage")
    @ResponseBody
    public List>> vintage(){
        List>> resultList = Lists.newArrayList();
        List> oneList = Lists.newArrayList();
        List> twoList = Lists.newArrayList();
        List> shoList = Lists.newArrayList();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Date now = new Date();
        for (int i = 0; i < 20; i++) {
            Calendar nowTime = Calendar.getInstance();
            nowTime.add(Calendar.MINUTE, i);
            List ss = Lists.newArrayList();
            ss.add(nowTime.getTimeInMillis());
            ss.add(new Long((long)getRandom(100,i)));
            oneList.add(ss);
            System.out.println(sdf.format(nowTime.getTime()));
        }
        resultList.add(oneList);
        for (int i = 0; i < 20; i++) {
            Calendar nowTime = Calendar.getInstance();
            nowTime.add(Calendar.MINUTE, i+2);
            List ss = Lists.newArrayList();
            ss.add(nowTime.getTimeInMillis());
            ss.add(new Long((long)getRandom(100,i)));
            twoList.add(ss);
            System.out.println(sdf.format(nowTime.getTime()));
        }
        resultList.add(twoList);

        for (int i = 0; i < 20; i++) {
            Calendar nowTime = Calendar.getInstance();
            nowTime.add(Calendar.MINUTE, i+3);
            List ss = Lists.newArrayList();
            ss.add(nowTime.getTimeInMillis());
            ss.add(new Long((long)getRandom(100,i)));
            shoList.add(ss);
            System.out.println(sdf.format(nowTime.getTime()));
        }
        resultList.add(shoList);

        return resultList;
    }

    public int getRandom(int max,int min){
        Random random = new Random();
        int s = random.nextInt(max)%(max-min+1) + min;
        System.out.println(s);
        return s;
    }

这个有个问题是数据初始化：

    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]

如果series为空的话，在load: function ()中如果有数据的话，好像不能正常显示，所以需要在series也要初始化下数据，最终修改成如下：