Chart.js 时间序列图表 - 格式化和缺失数据值

Question

我正在尝试使用 charts.js 绘制时间序列图表。目前我的输出看起来像这样，这是非常错误的：

我有两个问题想解决：

1. 如何将缺失的数据值绘制为零，以便在定义的时间段内获得一个漂亮的平滑折线图？
2. 如何整理图表的格式以使其正确显示？

我传递到图表中的数据如下：

{2019-08-10T06:27: 12, 2019-08-10T06:26: 10, 2019-08-10T06:25: 8, 2019-08-10T06:24: 2, 2019-08-10T06:28: 1}

我将键作为标签，将值作为数据。

我的图表脚本如下：

<script type="text/javascript">
var ctx = document.getElementById('chartFive').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: timeLabels,
        datasets: [{
            label: '# of Messages',
            data: timeData,
            backgroundColor: chartSingleColor,
            borderColor: chartBorderSingleColor,
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Messages Received'
    },
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                displayFormats: {
                    minute: 'HH:mm'
                },
                unit: 'minute',
                min: '2019-08-10T06:00',
                max: '2019-08-10T07:00'
            }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        }
    }
});

在我在时间配置选项中添加min和max值之前，图表确实看起来更接近我所追求的：

但是，我不确定为什么这条线会在 06:27 和 06:28 之间逐渐下降到 1 的值时下降。

Answer 1

您需要先对值进行排序，然后再将它们传递给labels/ data。

例子：

let timeData ={
  "2019-08-10T06:27": 12,
  "2019-08-10T06:26": 10,
  "2019-08-10T06:25": 8,
  "2019-08-10T06:24": 2,
  "2019-08-10T06:28": 1
};

let entries = Object.entries(timeData);
entries.sort((a,b) => {
  let aDate = moment(a[0]);
  let bDate = moment(b[0]);
  return aDate.toDate() - bDate.toDate();
});

let labels = entries.map(e => e[0]);
let data = entries.map(e => e[1]);
console.log(labels);
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

有关工作示例，请参阅JSFiddle。

如果在没有数据时想要零线，则需要将零添加到data. 例子：

let timeData ={
  "2019-08-10T06:27": 12,
  "2019-08-10T06:26": 10,
  "2019-08-10T06:25": 8,
  "2019-08-10T06:24": 2,
  "2019-08-10T06:28": 1
};

let labels = [];
let data = [];

let date = moment('2019-08-10T06:00');
let endDate = moment('2019-08-10T07:00');
do {
  let dateStr = date.format("YYYY-MM-DDTHH:mm");
  labels.push(dateStr);

  if(timeData.hasOwnProperty(dateStr))
    data.push(timeData[dateStr]);
  else
    data.push(0);

  date.add(1, 'minute');
} while(date.isBefore(endDate));

console.log(labels);
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">

有关零线的示例，请参阅带有零线的 JSFiddle