使用 Django，将 Python 字典发送到 HTML 页面并将其转换为 Javascript 脚本中的 Javascript 数组

我一直在try 将Python字典发送到HTML页面，并在Javascript中使用该字典，使用Django在我的网站上添加一个图形

表单需要上传图像，代码如下:，

 <div class=" mx-5 font-weight-bold">
    Uplaod Image
  </div>
  <input class=" " type="file" name="filePath">
  <input type="submit" class="btn btn-success" value="Submit">

然后将该图像发送到views.py，在那里对其进行处理，并从该图像生成结果图像以及字典.然后再次呈现一个HTML页面，其中字典以及生成的图像在上下文变量中发送.代码如下:，

def predictImage(request):
    fileObj = request.FILES['filePath']
    fs = FileSystemStorage()
    filePathName = fs.save(fileObj.name, fileObj)
    filePathName = fs.url(filePathName)
    testimage = '.'+filePathName
    img_result, resultant_array, total_objects = detect_image(testimage)
    cv2.imwrite("media/results/" + fileObj.name, img=img_result)

    context = {'filePathName':"media/results/"+fileObj.name, 'predictedLabel': dict(resultant_array), 'total_objects': total_objects}
    #context = {}
    return render(request, 'index.html', context)

现在，我想将字典项和键转换成两个不同的Javascript数组，然后用它们在HTML页面上绘制一个图形.Javascript的模板代码如下:，

          <script>
            // const value = JSON.parse(document.getElementById('data_values').textContent);
            // alert(value);
            var xArray = [];
            var yArray = []; 
            
            var xArray = ["Italy", "France", "Spain", "USA", "Argentina"]; // xArray needs to have Python Dictionary's keys
            var yArray = [55, 49, 44, 24, 15]; // yArray needs to have Python Dictionary's values

            var layout = { title: "Distribution of Labels" };

            var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }];

            Plotly.newPlot("myPlot", data, layout);
          </script>

我try 了很多不同的方法来访问Javascript脚本中的Python字典，然后将其转换为Javascript数组，但我仍然没有做到这一点.我还try 了不同的Stackoverflow帖子等，但没有什么能真正正确地指导我.我也是Django的新手，所以我对语法也不太了解.