Метка даты в графике JavaScript отображается неправильно

Я делаю проект на Django. В моем файле chart.html я создал гистограмму javascript. Данные и метка диаграммы были определены в моем views.py файле.

Это моя гистограмма JavaScript: (Я строю эту диаграмму для отображения номеров заказов за последние 7 дней)

var ctx = document.getElementById("BarChart7d");
var BarChart7d = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [{{date7}}, {{date6}}, {{date5}}, {{date4}}, {{date3}}, {{date2}}, {{date1}}],
    datasets: [{
      label: "orders: ",
      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', "#e74a3b", "#f6c23e", "#9B59B6", "#D68910"],
      hoverBackgroundColor: ['#353F8C ', '#17a673', '#2c9faf', "#9C4545", "#9C8545", "#4A235A", "#784212"],
      borderColor: "#4e73df",
      data: {{value7day}},
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      
      xAxes: [{
        
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 6
        },
        maxBarThickness: 80,
      }],
      yAxes: [{
        ticks: {

          callback: function(value, index, values) {
            return  number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + number_format(tooltipItem.yLabel);
        }
      }
    },
  }
});

{{value7day}} и метки {{date7}} - {{date1}} были определены в views.py:

rnow =  {'date': '2022-01-15', 'value': 34},
  ...
 {'date': '2022-03-16', 'value': 26},
 {'date': '2022-03-17', 'value': 15},
 {'date': '2022-03-18', 'value': 13},
 {'date': '2022-03-21', 'value': 29},
 {'date': '2022-03-22', 'value': 22},
 {'date': '2022-03-23', 'value': 22},
 {'date': '2022-03-24', 'value': 25},
 {'date': '2022-03-25', 'value': 15}]

day1 = list(rnow)[-1]
day2 = list(rnow)[-2]
day3 = list(rnow)[-3]
day4 = list(rnow)[-4]
day5 = list(rnow)[-5]
day6 = list(rnow)[-6]
day7 = list(rnow)[-7]     
value7day = [ day7['value'], day6['value'], day5['value'] , day4['value'], day3['value'], day2['value'], day1['value']]  
 
date7 = day7['date']
date6 = day6['date']
date5 = day5['date']
date4 = day4['date']
date3 = day3['date']
date2 = day2['date']
date1 = day1['date']

Данные даты уже имеют строковый тип. Однако метки отображаются неправильно. Вместо того, чтобы отображаться как 2022-03-17, 2022-03-18, 2022-03-21, они отображаются как 2002, 2001, 1998 ? Я думаю, что мне следует изменить формат метки на дату. Как мне это сделать?

Я представляю, что ваш javascript в итоге выглядит как

data: {
  labels: [2022-03-16, 2022-03-17, ...]

Метки рассматриваются как числа, и выполняется некоторое вычитание, так что в итоге получаются значения типа 1998 и т.д.

Эти значения должны быть строками:

labels: ["2022-03-16", "2022-03-17", ...]

другими словами

labels: ["{{date7}}", "{{date6}}", ...]
Вернуться на верх