Python 列表无法在 django 中与 ChartJS 一起使用

Question

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

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

我已经使用谷歌和 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>

Answer 1

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

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

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

Answer 2

{{ graph_labels }} 和 {{ graph_values }} 是 Django 模板变量，您尝试在 javascript 中访问，这是行不通的。使用模板标签“json_script”Django 文档将数据从 django 模板传递到您的 javascript。

Answer 3

有人可以回答这个问题吗？我正在寻找同一问题的解决方案。 我们如何在 JavaScript 中访问这些列表？