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

Posted 2023-02-24

【中文标题】Django：将日期列表传递给 Chart.js 模板中的 JavaScript

【英文标题】：Django: Pass a list of dates to JavaScript in template for Chart.js

【发布时间】：2021-02-11 08:23:27

【问题描述】：

我使用 Django 作为后端，并想使用 Chart.js 绘制一个线图，日期在 x 轴上。 从我的角度来看，我正在尝试将日期传递为datetime.dates：

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 数组中来将建议 here 应用于日期数组。 不幸的是，它不起作用：没有图表显示，控制台充满了错误。

【参考方案1】：

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

scales: 
    xAxes: [
        type: 'time'
    ]

来自选项。如果我包含 scales 选项，我的图表将无法呈现。如果我忽略它，图表会呈现，但日期是完全格式化的日期和时间。 This 是我的比较帖。