时间戳

首页 > 解决方案 > 实时自动更新和持久化折线图到当前日期

javascript - 实时自动更新和持久化折线图到当前日期

问题描述

我正在尝试构建一个监控系统，它可以监控用户的活动和行为，并实时以折线图的形式表示数据。目前能够在从服务器接收到新数据时使用 Web 套接字实时更新图表。

挑战

  1. 即使没有从服务器接收到用户数据，我也希望能够将图表自动更新为当前日期/时间（下一天）。

  2. 持久化数据以避免将用户恢复到图表上的前一天

设想

上次用户活动是3 月 20 日，因此图表上的数据显示截至3 月 20 日，但是当当前日期更改为3 月 21 日时，我希望图表自动更新为 21 即{x: Mar 21 y: 0}并进一步更新{y}当在同一天从服务器收到数据并且由于这种情况的更新将在客户端进行，我想知道如何在客户端保存这些数据，即{ x: Mar 21 y: 0}避免在页面重新加载时恢复到前一天

示例代码（非持久性） 

let lastDate = current day;
let data = []

function getNextDay(baseval) {
  var newDate = baseval + 86400000;
  lastDate = newDate;
  data.push({
    x: newDate,
    y: 0
  })
}

// calling getNextday function

 updateToNextDay() {
      window.setInterval(() => {
        getNextDay(lastDate)
        this.$refs.realtimeChart.updateSeries([{
          data: data
        }])
      }, 86400000)

上面的代码自动将下一个日期x:newDate和y:0推送到数据，并且图表在 setTimeInterval 相应地更新。但可以看出，在用户重新加载页面后，这些数据会立即丢失。

我的想法

我正在考虑使用 localstorage 在浏览器中保存数据

最后

我想知道如何在我的实例中处理这种情况

谢谢。

标签： javascriptchartsreal-time

解决方案

推荐阅读