chartsjs的Labels属性未采用字符串类型的上下文变量

Question

我在django网站上有一个chartsJS图表。我使用上下文变量通过views.py将值从main.py文件传递到showdata.html，以填充图形。过程如下：

• Main.py

   myList = [T1_sum, T2_sum, T3_sum, T4_sum, T5_sum, T6_sum, T7_sum, T8_sum, T9_sum, T10_sum] 
   mylables = ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8", "T9", "T10"]
   sortedlist, sortedlables = zip(*sorted(zip(myList, mylables), reverse=True))
   sortedlist = list(sortedlist)
   sortedlables = list(sortedlables)
  

视图.py

def showdata(request):
import json
numbers_in_sModel = sModel.objects.all()
numbers_in_sortedList = MyModel.objects.all()
labels_in_sortedList = myModelSortedLabels.objects.all()

if request.session.get('stats',False):
    js_object = json.loads(request.session.get('stats'))


return render(request, "showdata.html", context={
'numbers_in_sModel':numbers_in_sModel,
'numbers_in_sortedList':numbers_in_sortedList,
'labels_in_sortedList':labels_in_sortedList
})

Showdata.html

var myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: {
                        labels: [
                                        {% for number in numbers_in_sortedList %}
                                        {% for value in number.jsonM %}
                                            {{ value }},
                                        {% endfor %}
                                    {% endfor %}
                        ],
                        datasets: [{
                            axis: 'y',
                            label: false,
                            data: [
                                    {% for number in numbers_in_sortedList %}
                                        {% for value in number.jsonM %}
                                            {{ value }},
                                        {% endfor %}
                                    {% endfor %}
                            ],
                            backgroundColor: ['#36CAAB', '#36CAAB', '#36CAAB', '#36CAAB', '#36CAAB','#36CAAB', '#36CAAB', '#36CAAB', '#36CAAB', '#36CAAB'],
                            borderWidth: 1
                        }]
                    },

好的，上面的代码使用上下文变量填充chartsjs图形。所产生的是一个图表，如下图所示。这个图表的标签是数字。如图所示。然而，我试图做的是用排序标签列表替换标签。 现在，如果我将showdata.html页面上的数据放在诸如etc之类的标记中，那么下面的代码将在该页面上显示该数据。因此，我知道正在传递上下文变量。但是，当我将以下代码放在chartsjs的labels部分时，它不会在图中显示标签值

{% for number in labels_in_sortedList %}
 {% for value in number.jsonSortedLabels %}
   {{ value }},
   {% endfor %}
   {% endfor %}

有趣的是，当我查看页面时，我看到标签部分中的值，除了第一个标签条目上有一个错误外，该部分中的值表示：

Uncaught ReferenceError: T9 is not defined

Answer 1

我确实遇到了这个问题。Javascript将T1, T2, T3等视为变量。改用这个：

var label_lst = [];
{% for number in labels_in_sortedList %}
{% for value in number.jsonSortedLabels %}
label_lst.push("{{ value }}");
{% endfor %}
{% endfor %}

然后，将labels键作为label_lst：

type: 'horizontalBar',
                    data: {
                        labels: label_lst;
...

Answer 2

您应该添加if语句来检查它是否为null

{% if len(numbers_in_sortedList) != 0 %}
  {% for number in numbers_in_sortedList %}
    {% if len(number.jsonM) != 0 %}
      {% for value in number.jsonM %}
        {{ value }},
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endif %}

Answer 3

它将标签作为变量进行评估，并使用

{% for number in labels_in_sortedList %}
 {% for value in number.jsonSortedLabels %}
   {{ `${value}` }},
 {% endfor %}
{% endfor %}