将Plotly figure作为json从python发送到Flask中的javascript

Question

我有以下代码生成一个图形作为json对象：

linear_regression_fig = go.Figure()
    # plot predicted values
    linear_regression_fig.add_trace(go.Scatter(
        x=group_by_df['day'].map(dt.datetime.fromordinal),
        y=group_by_df['predicted']))
    # plot actual values
    linear_regression_fig.add_trace(go.Scatter(
        x=group_by_df['day'].map(dt.datetime.fromordinal),
        y=group_by_df[sensor_name],
        name=('Actual values'),
        mode='lines+markers'))

    linear_regression_fig.update_layout(
        height=700,
        font=dict(color="grey"),
        paper_bgcolor='rgba(0,0,0,0)',
        title=('Linear Regression for ') + (sensor_name),
        yaxis_title=(sensor_name),
        xaxis_title=('Day'),
        showlegend=True)
    linear_regression_json = json.dumps(linear_regression_fig, cls=plotly.utils.PlotlyJSONEncoder)

在这里，我想在html页面的div中显示该图：

<div class="chart" id="pred_plot">
    <script>
        var graphs = {
        {
            prediction_plot_py | safe
        }
        }
        ;
        Plotly.plot('pred_plot', graphs, {});
    </script>
</div>

但我在javascript部分得到了这个错误“标识符或字符串文字或数字文字预期”。我怎样才能解决这个问题？我提到这段代码在夏初起作用，并且绘图显示正确

Answer 1

这是无效的JSON:

 var graphs = {
        {
            prediction_plot_py | safe
        }
        }

此外，您将一个空对象作为参数放入Plotly.plot（），我不确定您是否有意这样做。 正确的JSON如下所示：

var graphs = {
    {
        prediction_plot_py: "safe",
        example: "test"
    }
}