如何在html模板中显示plotly json对象

Question

我有一个django应用程序，它显示一些使用plotly生成的图表

这是my views.py文件

def home(request):
    const_list = pd.read_csv('./const.csv').Const.unique()
    party_list = pd.read_csv('./part_list.csv').abbr.unique()
    all_list = pd.read_csv('./all_list.csv').All.unique()

    chked=request.POST.get('chk', '')
    print(chked)

    if chked == 'true':
        part_bargraph = main_graph(all_list, len(const_list))
    else:
        part_bargraph = main_graph(part_list, len(const_list))

    context = {'main_graph': part_bargraph, 'const': const_list}
    print(context)
    
    return render(request, 'home.html', context)

main_graph是一个函数，它将列表和int值作为参数，并生成一个绘图图形。然后使用plotly.io.to_json方法将该图作为json object返回

我想在HTML模板中显示此图形。这就是我现在正在做的

<form method='post'>
    {% csrf_token %}
    <div class="switch">
        <input id='chk' type="checkbox" class="switch-input" />
        <label for="chk" class="switch-label">Switch</label>
    </div>
</form>

<div class="main_graph" id='main_graph'></div>

<script>
    Plotly.newPlot("main_graph", {{ main_graph | safe }})


    $(document).on('click', '#chk', function (e) {
        $.ajax({
            type: 'POST',
            url: '/home',
            data: {
                chk: $('#chk').prop('checked'),
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function (data) {
                Plotly.newPlot("main_graph", {{ main_graph | safe }})
            }
        });
    })
</script>

在切换按钮后打印上下文时，我可以看到图形已更改。但我无法在模板中显示它

我做错了什么

提前谢谢