Chart.js-日期未在图表上正确显示,轴标签未显示

yx2lnoni  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(184)

我尝试在图表上标记坐标轴。我使用的是chart.js v3.9.1,我相信我已经按照文档说明操作了,但是没有显示标签(请参见下文):x1c 0d1x
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月9日,2022年10月9日,2022年10月5日,2022年10月5日,2022年10月5日】
所以它实际上是计算2022-10-09来给予2003等等。我在这里遗漏了什么?我想根据我在视图中得到的数据列表,将日期显示为字符串。
任何帮助都将不胜感激!

wtzytmuj

wtzytmuj1#

这里的问题似乎是日期周围缺少字符串分隔符。
在生成的HTML中,不带分隔符的labels属性最终会是这样的。

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

JS处理器,在看到2022-10-09时,假设您要计算2022减去10和9的结果。
你最后想要得到的是

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%}],
t1rydlwq

t1rydlwq2#

由于X轴包含日期,因此应在选项中指定日期:

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

因为X轴类型默认为category,要实现这一点,还应该包括一个时间适配器,如date-fns(此处提供更多信息),根据文档:
时间刻度要求同时存在***日期库***和相应的***适配器***。
这就是我个人使用date-fns的原因,因为它都捆绑在一个文件中,如果你需要日期格式(例如标签和工具提示),这里是format page

相关问题