Невозможно отобразить даты и значения на графике. js

Question

В массиве хранятся следующие данные:

var labelItems= ["3/27/20", "3/28/20", "3/29/20", "3/30/20", "3/31/20", "4/1/20", "4/2/20", "4/3/20", "4/4/20", "4/5/20", "4/6/20", "4/7/20", "4/8/20", "4/9/20", "4/10/20"]

var dataSets= [27198, 30652, 33925, 37582, 42107, 46809, 52983, 58787, 64606, 69374, 74565, 81865, 88338, 95455, 102525]

Я инициализировал свой линейный график следующим образом:

 var ctx = document.getElementById('lineChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: labelItems,
                datasets: [{
                    label: 'Deaths',
                    borderColor: 'rgb(255, 99, 132)',
                    data: dataSets
                }]
            },

            // Configuration options go here
            options: {}
        });

Моя проблема в том, что даты, то есть метки не отображаются на оси X, ни наборы данных на оси Y. Может кто-нибудь помочь с этим?

Answer 1

Как говорится в документации , для отображения значения необходимо добавить свойства parser и tooltipFormat к оси (x или y).

    var ctx = document.getElementById('lineChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: labels,
            datasets: [{
                label: 'Deaths',
                borderColor: 'rgb(255, 99, 132)',
                data: dataSets
            }]
        },

        // Configuration options go here
        options: {
          scales: {
            xAxis: [
              display: true,
              type: 'time'
              time: {
                parser: 'MM/DD/YYYY HH:mm',
                tooltipFormat: 'll HH:mm',
                unit: 'day',
                unitStepSize: 1,
                displayFormats: {
                  'day': 'MM/DD/YYYY'
                }
              }
            ]
          }
        }
    });