Highcharts实时动态数据展示

我们的结算系统，我也研究了很久了，开发了很久了。不过昨晚上我才看到我们的实时下单监控功能，觉得挺有意思的。其实几乎都是Highcharts以及前端实现的。这里就记录一下。

要想实现实时动态数据展示，那首先一点最重要的就是，肯定要不停地发ajax请求的，用来获取数据。先记录一些我在看文档和代码时学习到的。

1. 时间。如果你要向异步发送请求的api传递时间参数时，要注意时间参数。(我是用PHP开发），JS中获取当前时间，单位是毫秒。PHP时间戳是以秒为单位，所以要乘以1000. 

 var x = (new Date()).getTime(); // current time

x = x*1000

2.从服务器传递过来的数据必须是json字符串。比如从php开发服务器传入了数组，那么在使用时，你必须用json_encode转为json字符串。

看一下代码： 

      chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    var y = 0;
                    setInterval(function () {
                        var x = (new Date()).getTime(); // current time
                        x = x - 1000 * 4;
                        $.get("/ajax/timestamp/" + x, function (data, status) {
                            series.addPoint([x, data], true, true);
                        });


                    }, 1000);
                }
            }
        },

上面这段代码是实现动态发送ajax请求的关键。

后面的1000是1000毫秒，表示每间隔1s执行一次该函数。这样就实现了实时请求数据，打到动态展示的结果。当然，这也是JS中setInternal函数的作用。

具体的例子可以看highcharts的官方文档： 实时动态数据 .

--------EOF---------
微信分享/微信扫码阅读