Chart.js - Даты неправильно отображаются на графике, а метки осей не отображаются

Я пытаюсь нанести метки на оси моего графика. Я использую chart.js v3.9.1 и полагаю, что следовал документации, однако метки не отображаются (см. ниже):enter image description here

health_hub_tracker.html:

{% extends 'base.html' %}
{% load static %}

{% block content %}
<h1>Weight Tracker</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{%for stat in date%}{{stat}},{%endfor%}],
        datasets: [{
            label: 'Weight (lbs)',
            data: [{%for stat in weight%}{{stat}},{%endfor%}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                title: {
                    display: true,
                    Text: 'Date'
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    Text: 'Weight (lbs)'
                }
            }
        }
    }
});
</script>
{% endblock content %}

views.py:

def health_hub_tracker(request):
    serialized_weight = []
    serialized_date = []
    for stats in HealthStats.objects.filter(user=request.user):
        serialized_weight.append(int(
            stats.weight,
        ))
        date_only = stats.date.date()
        serialized_date.append(str(
            date_only
        ))
    print(serialized_weight)
    print(serialized_date)
    context = {
        "weight": serialized_weight,
        "date": serialized_date
        }
    return render(request, "health_hub_tracker.html", context)

Вы также увидите, что на моей оси x - даты отображаются в виде суммы.

Данные, которыми я располагаю, следующие: ['2022-10-09', '2022-10-09', '2022-10-05', '2022-10-05', '2022-10-05']

так что он буквально вычисляет 2022-10-09, чтобы дать 2003 и так далее. Что я здесь упускаю? Я хотел бы отобразить дату в виде строки, как в списке данных, который я получаю в моем представлении.

Любая помощь будет очень признательна!

Проблема здесь, похоже, заключается в отсутствии разделителей строк вокруг ваших дат.

Свойство labels без разделителей в итоге будет выглядеть в сгенерированном вами HTML примерно так.

labels: [2022-10-09, 2022-10-09, 2022-10-05, 2022-10-05, 2022-10-05],

Процессор JS, увидев 2022-10-09 предполагает, что вы хотите вычислить результат вычитания 10 и 9 из 2022.

Что вы хотите получить в итоге: 

labels: ['2022-10-09', '2022-10-09', '2022-10-05', '2022-10-05', '2022-10-05'],

и для этого вы должны изменить код итерации меток на что-то вроде этого (я не очень хорошо знаком с Python или Django, но вы поняли идею ;) )

) 
labels: [{%for stat in date%}'{{stat}}',{%endfor%}],

Поскольку ваша ось X содержит даты, вы должны указать их в опциях :

options: {
    scales: {
        x: {
            type : 'time', ...
        }
    }
}

Поскольку тип оси X по умолчанию category, и чтобы это работало, вы должны также включить адаптер времени, такой как date-fns (более подробная информация здесь), и согласно docs :

Шкала времени требует наличия как библиотеки date, так и соответствующего адаптера.

Поэтому лично я использую date-fns, потому что все собрано в одном файле, и если вам нужно форматирование даты (например, для меток и всплывающих подсказок), вот страница формата .

Вернуться на верх