在Flask发送883276440288图为json从python到javascript

Question

I have this code that generates a figure as a json object:

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)

And here I want to display the figure inside a div in the html page:

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

But I get this error "identifier or string literal or numeric literal expected" in the javascript section. How can I solve this? I mention that this code worked at the beginning of summer and the plot was displayed correctly.

Answer 1

This is invalid JSON:

 var graphs = {
        {
            prediction_plot_py | safe
        }
        }

Additionally, you put an empty object as a parameter to Plotly.plot(), which I am not sure if you intended. Proper JSON looks like this:

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