Django:在Chart.js模板中将日期列表传递给JavaScript



我使用Django作为后端,并希望使用Chart.js绘制一个在x轴上显示日期的折线图。在我看来,我正试图将日期作为datetime.date传递:

def eval_time_series(request):
context = {
'dates': [datetime.date.today() + datetime.timedelta(days=i) for i in range(1, 8)]
}
return render(request, 'app/eval_time_series.html', context)

现在的问题是如何在生成折线图的JavaScript代码中处理和使用这些日期。这就是我目前拥有的:

div id="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
// trying to convert to JS dates here
var labels = [];
{% for d in dates %}
labels.push(new Date("{{ d.isoformat }}"));
{% endfor %}
var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: "Car Speed",
data: [0, 59, 75, 20, 20, 55, 40],
}]
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
}
</script>

因此,基本上,我试图将这里的建议应用于日期数组,方法是迭代所有日期,转换它们,并将它们添加到JS数组中。不幸的是,它不起作用:没有显示任何图表,控制台中充斥着错误。

我想你可能和我有同样的问题。试着删除

scales: {
xAxes: [{
type: 'time'
}]
}

从选项。如果我包含比例选项,我的图表将无法呈现。如果我忽略它,图表会呈现,但日期是完全格式化的日期和时间。这是我用来比较的帖子。

最新更新