我尝试在图表上标记坐标轴。我使用的是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等等。我在这里遗漏了什么?我想根据我在视图中得到的数据列表,将日期显示为字符串。
任何帮助都将不胜感激!
2条答案
按热度按时间wtzytmuj1#
这里的问题似乎是日期周围缺少字符串分隔符。
在生成的HTML中,不带分隔符的labels属性最终会是这样的。
JS处理器,在看到
2022-10-09
时,假设您要计算2022减去10和9的结果。你最后想要得到的是
为此,你必须将标签迭代代码更改为类似这样的代码(我对Python或Django不是很熟悉,但你明白了;))
t1rydlwq2#
由于X轴包含日期,因此应在选项中指定日期:
因为X轴类型默认为
category
,要实现这一点,还应该包括一个时间适配器,如date-fns(此处提供更多信息),根据文档:时间刻度要求同时存在***日期库***和相应的***适配器***。
这就是我个人使用
date-fns
的原因,因为它都捆绑在一个文件中,如果你需要日期格式(例如标签和工具提示),这里是format page。