Python 列表在 django 和 ChartJS 中不起作用答案

【问题标题】：Python list does not work in django with ChartJSPython 列表在 django 和 ChartJS 中不起作用
【发布时间】：2021-04-16 16:46:55
【问题描述】：

我正在创建一个需要创建一些图表的 Web 应用程序。我正在使用 django 3 和 ChartJS。我为标签创建了一个列表，为要插入 ChartJS 的数据创建了一个列表。我遇到的问题是，无论我尝试或做什么，数据都不会显示在图表中。当我尝试通过在页面上写入数据来访问数据时，它确实可以工作，但由于某种原因将其插入 ChartJS 时它根本不起作用。

根据 ChartJS 文档，数据字段可以接收值列表，所以我不明白为什么这不起作用。

我使用 google 和 stackoverflow 搜索了很多解决方案，虽然我在 stackoverflow 上找到了一些类似的线程，但这些解决方案对我不起作用。我尝试转换为 json、其他插入数据的方式、使用 for 循环等，但无论我做什么似乎都不起作用。

在 Web 应用程序中，标签和值是动态创建的，但此时为了更轻松地解决问题，我刚刚手动创建了两个列表并尝试将它们发送到模板并将它们插入到 ChartJS 中，但这不起作用要么。

这是我目前使用的代码：

views.py：

def check_spending(request):
    graph_labels = ["Test1", "Test2", "Test3"]
    graph_values = ["100", "50", "20"]

    return render(request, 'spending/view_spending.html',
        {'graph_labels': graph_labels,
         'graph_values': graph_values})

HTML：

<!-- Values are printed out here -->
{{ graph_labels }}
{{ graph_values }}
for loop
{% for key in graph_labels %}
  {{ key }}
{% endfor %}

<!-- Values does not work here -->
<canvas id="spending_overview_detailed" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('spending_overview_detailed');
var spending_overview_detailed = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{{ graph_labels }}],
        datasets: [{
            label: 'Spending',
            data: [{{ graph_values }}],
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

【问题讨论】：

标签： python django chart.js

【解决方案1】：

我最终将标签和数据字段更改为以下内容：

[{% for label in graph_labels %} {{ label }}, {% endfor %}]
[{% for value in graph_values %} {{ value }}, {% endfor %}]

注意 for 循环中的逗号，没有它，值将无法正确处理。

【讨论】：

感谢您分享您的知识。现在我有了新方法。

【解决方案2】：

{{ graph_labels }} 和 {{ graph_values }} 是 Django 模板变量，您尝试在 javascript 内部访问，这将不起作用。使用模板标签“json_script”Django Documentation 将数据从 django 模板传递到您的 javascript。

【讨论】：

你错了。在这种情况下，当我不使用列表而只使用变量中的数字时，我在 javascript 中使用了 django 模板变量，这确实有效。感谢您的回答。
它可能适用于数字，但无法在 javascript 中直接访问 python 列表。甚至您问题的另一个答案也表明相同。如果您能找到更简单的方法，请更新我们。
您写的是“{{ graph_labels }} 和 {{ graph_values }} 是 Django 模板变量，您尝试在 javascript 中访问，这将不起作用”。您没有说明案例是列表还是变量。列表不起作用，但我的答案有效。