为什么通过Django传递数据调用Plotly绘制饼图时会显示空白区域

• 缺失Plotly.js依赖：现有HTML代码未引入Plotly的JavaScript库，浏览器无法识别Plotly相关方法，导致渲染失败。需在自定义脚本之前添加Plotly.js引入，可使用本地部署的库文件。
• 饼图数值非法：Plotly饼图仅支持正值计算占比，现有传入的数值均为负数，会被直接过滤导致无数据可渲染。需在后端对数值取绝对值，修改views.py代码如下：

labels = list(account_graph.keys()) # ['Food', 'Gas', 'Friends'] 
# 对支出类负数值取绝对值，适配饼图数值要求
data = [abs(v) for v in account_graph.values()]
return render(request, "finances/account.html", {'labels': labels, 'data': data})

• 模板传值格式风险：直接使用|safe过滤器传递列表，若数据包含特殊字符易出现JS语法错误，更稳妥的方案是在后端将数据序列化为JSON格式：

import json
labels = list(account_graph.keys())
data = [abs(v) for v in account_graph.values()]
context = {
    "labels": json.dumps(labels),
    "data": json.dumps(data)
}
return render(request, "finances/account.html", context)

对应修改account.html代码如下：

<!-- 引入Plotly.js依赖，此处可替换为本地部署的文件路径 -->
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
<div id='expenses'></div>
<script>
var data = [{
  values: {{data}},
  labels: {{labels}},
  type: 'pie'
}];
var layout = {
  height: 400, 
  width: 500
}
Plotly.newPlot('expenses', data, layout);
</script>

内容的提问来源于stack exchange，提问作者abhiramrp