使用Jinja / Flask將python詞典鍵/值插入到javascript列表中

Question

我正在使用ChartJs來顯示一些數據，我的圖表定義如下：

var myChart = new Chart(ctx1, {
       type: 'pie',
       data: {
           labels: ['label1', 'label2', 'label3', 'label4'],
           datasets: [{
               label: 'Chart 1',
               data: [12, 19, 100, 5],
               backgroundColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)',
                   'rgba(75, 192, 192, 1)',
               ],
               borderColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)',
                   'rgba(75, 192, 192, 1)',
               ],
               borderWidth: 1
           }]
       },
       options: {
       }
   });

我想用python字典中的鍵填充變量label

chart_data = {'A':10, 'B':5, 'C':7, 'D':15}

並且data變量填充了字典值，所以我在javascript中最終得到的是

           labels: ['A', 'B', 'C', 'D'],
           datasets: [{
               label: 'Chart 1',
               data: [10, 5, 7, 15],

我只是不確定如何使用Jinja迭代字典只返回鍵，並且只返回值到JavaScript列表中。

我可以使用Jinja for / loop在javascript列表中進行迭代嗎？ 它似乎沒有用

some_js_var = [{% for x in y %} {{ x }} {% endfor %}]

Answer 1

我將我的python字典分配給JS變量，如下所示：

var data_from_python = {{ python_dict|tojson }}

然后只需將鍵作為列表分配給變量：

labels: Object.keys(data_from_python),

和數據中的值相同

data: Object.values(data_from_python)

我最終得到的是

labels: ['A', 'B', 'C', 'D']
data: [10, 5, 7, 15]