ChartJS缺少时间序列数据

irtuqstp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(190)

我正在尝试使用ChartJS来显示来自远程传感器的一些数据。传感器定期(例如,每小时)将数据上传(即推送)到数据库,但有时由于网络问题连接不可用,它们会错过一次轮询。有时由于电源问题,它们可能会错过几天的轮询。
数据存储在具有2个主列的简单表中:

  • Unix时间戳(以秒为单位)(传感器单元的时间戳,与轮询数据一起发送)
  • 数据值

问题:

  • 就数据库服务器而言,它不知道传感器是否错过了轮询(因此不添加“零”值)。
  • 当我使用ChartJS绘制数据时,我想将缺少的值绘制为零。

换句话说,我试图显示一个固定的分笔成交点视图,并且只填充有数据的“Y”值。
我摆弄了几个小时都没用
我的代码如下(您可以看到缺少23:00、01:00和08:00-14:00的数据)。我想在图表上将这些值显示为“零”,即使没有对应的“值”。
任何帮助都是感激不尽的。

timestamp =['15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','0:00','2:00','3:00','4:00','5:00','6:00','7:00','14:00',];
target = [17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,];

var ctx = document.getElementById('chart').getContext("2d");

var data = {
  labels: timestamp,
  datasets: [{
      data: target,
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0)",
      borderWidth: 1,
      spanGaps: false,
      tooltips: {
        enabled: false
      }
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
        type: 'time',
                time: {
            unit: 'day'
        },
        ticks: {
      count: 24,
          stepSize: 1,
          autoSkip: false,
        }
    }]
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 5,
      hoverRadius: 5
    },
    line: {
      tension: 0
    }
  },
  legend: {
    display: false
  },
  pan: {
    enabled: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
};

var chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
6ioyuze2

6ioyuze21#

您可以设置distribution: 'series'

xAxes: [{
  type: 'time',
  distribution: 'series'
}]

相关问题