正文

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

 2023-02-24  90

关键词：

【中文标题】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 是我的比较帖。

【讨论】：

将链接列表传递给 Django 模板

】将链接列表传递给Django模板【英文标题】：PasslistoflinkstoDjangoTemplate【发布时间】：2014-08-1412:30:47【问题描述】：我有一个我在我的settings.py文件中通过以下方式导入的url列表：frommyproject.image_folders_linkimportLinks现在我的image_folde... 查看详情

将 Django 字符串列表作为数组传递给 JS

】将Django字符串列表作为数组传递给JS【英文标题】：PassDjangolistofstringstoJSasanarray【发布时间】：2018-05-3116:19:33【问题描述】：目标：我想将Django中的字符串列表作为字符串数组传递给模板JS，并获取数组中每个字符串的索引。... 查看详情

通过jQuery ajax调用将值列表传递给django视图

】通过jQueryajax调用将值列表传递给django视图【英文标题】：PassinglistofvaluestodjangoviewviajQueryajaxcall【发布时间】：2012-06-2522:57:17【问题描述】：我正在尝试使用jQueryajax调用将数值(id)列表从一个网页传递到另一个网页。我不知道如... 查看详情

如何将Django中列表的值传递给方法？

】如何将Django中列表的值传递给方法？【英文标题】：HowtopassthevalueofalistinDjangotoamethod?【发布时间】：2021-11-1220:54:29【问题描述】：我正在尝试做这样的事情。我有一个带有li项目的导航栏：**index.html**<ulclass="submenudropdown-menu"&... 查看详情

Django如何将外键传递给ModelForm字段

】Django如何将外键传递给ModelForm字段【英文标题】：DjangohowtopassforeignkeyintoModelFormfield【发布时间】：2014-09-0207:54:35【问题描述】：我是Django新手，作为一个学习项目，我正在构建一个待办事项列表应用程序。主页(lists.html)显示Li... 查看详情

Django：如何通过 AJAX 将 PKID 列表传递给下一个视图，然后重定向

】Django：如何通过AJAX将PKID列表传递给下一个视图，然后重定向【英文标题】：Django:HowtopassalistofPKIDstonextviewthroughAJAX,thenredirect【发布时间】：2018-08-2302:31:15【问题描述】：前提：向用户显示一个表格，其中包含带有复选框的对... 查看详情

如何根据 django 模板中的日期过滤列表

】如何根据django模板中的日期过滤列表【英文标题】：Howtofilteralistaccordingtodateintemplatesindjango【发布时间】：2015-03-0913:03:58【问题描述】：我有一个模型志愿者，其中有一个字段“registered_at=models.DateTimeField()”。我正在将志愿者... 查看详情

ASP.NET MVC 视图需要将选定的下拉列表和日历日期传递给模型

】ASP.NETMVC视图需要将选定的下拉列表和日历日期传递给模型【英文标题】：ASP.NETMVCviewneedstopassselecteddropdownandCalendardatetomodel【发布时间】：2020-06-0113:41:06【问题描述】：我正在尝试通过控制器中的存储过程将模型传回控制器以... 查看详情

Django - 将模型名称从 url 传递给视图

】Django-将模型名称从url传递给视图【英文标题】：Django-Passingthemodelnametoaviewfromurl【发布时间】：2014-07-0313:03:17【问题描述】：我将如何做到这一点，以便我可以将模型名称作为url中的参数传递给视图？我想重用这个视图，只传... 查看详情

在 Django 中将值传递给 Bootstrap 模式

】在Django中将值传递给Bootstrap模式【英文标题】：PassingvaluetoBootstrapmodalinDjango【发布时间】：2012-10-2112:58:18【问题描述】：我有一个很好的模式，每次用户想要删除数据时都会显示一个删除确认对话框。问题是我的许多视图在模... 查看详情

Django Rest 框架：将查询集传递给 Response()

】DjangoRest框架：将查询集传递给Response()【英文标题】：DjangoRestframework:passingquerysettoResponse()【发布时间】：2016-08-0606:02:58【问题描述】：我在我的应用程序中使用djangorest框架。鉴于，对于getquery，我以查询集的形式获取模型列... 查看详情

将HTML表单变量传递给Django中的python函数

】将HTML表单变量传递给Django中的python函数【英文标题】：PassingHTMLformvariabletopythonfunctioninDjango【发布时间】：2020-06-0504:29:33【问题描述】：我对Django非常陌生，但几个小时以来我一直在尝试找出解决方案。我想将一个变量从html... 查看详情

将对象从模板传递给 django 视图（控制器）

】将对象从模板传递给django视图（控制器）【英文标题】：Passobjecttodjangoview(controller)FROMtemplate【发布时间】：2014-03-2619:09:00【问题描述】：我对django还很陌生，但对于我想做的事情的最佳实践是什么感到有些困惑。在我的网络... 查看详情

有没有办法将变量传递给 Django 中的通用视图？

】有没有办法将变量传递给Django中的通用视图？【英文标题】：IsthereawaytopassavariabletoagenericviewinDjango?【发布时间】：2011-08-2901:43:39【问题描述】：我正在使用Django的通用视图并试图找到一种使用D.R.Y过滤文章列表的方法。我当前... 查看详情

如何将对象列表传递给控制器？

...钮提交所有这些包含的项目与其他参数，如账单号，账单日期等。控制器[HttpPost]publicActionResultProjectPurchasesMutiple(ProjectPu 查看详情

是否可以使用 Nest 将查询列表传递给 ElasticSearch？

...给Elasticsearch。在这个查询中会有很多范围条件，主要是日期范围。示例如下：query="module:(\'mod45\')ANDcode:(\'66 查看详情

使用 Django 和 Jquery 将选择选项值传递给命名的 url 模式

】使用Django和Jquery将选择选项值传递给命名的url模式【英文标题】：PassselectoptionvalueintonamedurlpatternusingDjangoandJquery【发布时间】：2011-05-1708:44:01【问题描述】：我的django模板中有一个下拉列表：<selectname="submit_new"id="submit_new">... 查看详情

以德国日期格式输入数据并结合 Chart Js

...要它来为我的网页创建一些漂亮的图表。在后台我有一个Django项目正在运行，它计算出一定数量的数字。由于我已将Django中的语言代码设置为“de-at”（要求，因为有一些输入变量需要由查看详情

正文