Использование эпохи в качестве временного ряда на оси х на реактивной диаграмме js -2 не показывает правильную дату

Question

Я пытаюсь создать панель с графиком временного ряда со временем на оси x. У меня есть своя дата в формате эпохи, таком как:

return {
      labels: [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253, .......]

Затем я упорядочил параметры своей диаграммы следующим образом:

  xAxes: [
        {
          barPercentage: 1.6,
          gridLines: {
            drawBorder: false,
            color: "rgba(29,140,248,0.1)",
            zeroLineColor: "transparent"
          },
          ticks: {
            padding: 20,
            fontColor: "#9a9a9a"
          },
          type: 'time',
          distrubution: 'linear',
          time: {
          displayFormats: {
          'millisecond': 'h:mm a',
          'second': 'h:mm a',
          'minute': 'h:mm a',
          'hour': 'h:mm a',
          'day': 'h:mm a',
          'week': 'h:mm a',
          'month': 'h:mm a',
          'quarter': 'h:mm a',
          'year': 'h:mm a'
        },
        }
        }
      ]

Я прочитал эту js эпоху парсинг потребует, чтобы эпоха была в миллисекундах, я попытался умножить эпоху на 1000, чтобы получить миллисекунды, но мой выходной результат в моем графике все еще неверен. При использовании веб-конвертера эпох, моя дата выглядит как «Среда, 11 сентября 2019 00: 11: 23.544», что является правильным значением, но на графике она отображает дату как январь 1970, как показано ниже:

Что бы я ни пытался, дата выходит как 1970. Есть ли простое исправление, которое я пропускаю?

Answer 1

Как вы писали, "умножение эпохи на 1000 для получения миллисекунд" должно помочь.

Я сделал исполняемый фрагмент из нескольких предоставленных вами значений эпох. Соответствующая строка выглядит следующим образом:

labels: epochs.map(e => e * 1000),

Для меня результат выглядит хорошо.

const epochs = [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253];
const values = [2, 3, 1, 2];

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'line',
    data: {
        labels: epochs.map(e => e * 1000),
        datasets: [{
            label: 'My Dataset',
            data: values,
            fill: false,
            borderColor: 'red',
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute'
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>