Question

我正在使用Plotly.js和AJAX迈出第一步。但是，在将新数据传递到绘图时，我感到很困惑。尽管已收到数据（由console.log（）确认），但使用“ Plotly.newPlot（）时，它会破坏绘图。我似乎无法弄清楚哪里出了问题。我尝试研究此问题，但是所有示例均不适用于我的情况。

预期的行为：

单击按钮（chartId =“ chart1”）后，priceplot.js应将请求发送到路由“ / updatepriceplot”，该路由将根据来自request.form [“ chartOption”]的选择返回JSON响应。

实际行为：

单击按钮（chartId =“ chart1”）后，该图为空

这是我的烧瓶路线：

@server_bp.route('/priceplot', methods=["GET"])
def priceplot():
    form_priceplot = pricePlot_options()

    plot = createPlot()
    return render_template("priceplot.html", plot=plot, form_priceplot=form_priceplot)

@server_bp.route('/updatepriceplot', methods=["POST"])
def update_priceplot():

    # a = request.form["chartId"]
    chartOption = request.form["chartOption"]
    plot = updateData(chartOption)

    return plot

这是PricePlot函数，返回一个新的JSON文件。

def createPlot():

    df =  pd.read_json('data_{}.json'.format("1"))
    df = df.dropna()
    data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

def updateData(chartOption=None):

    # load the json data
    df =  pd.read_json('data_{}.json'.format(chartOption))
    df = df.dropna()
    data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

HTML模板：

{% extends "base.html" %}

{% block content %}

<!DOCTYPE html>
<html>

<head lang="en">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/priceplot.js') }}"></script>
</head>

<body>

    <div id="chartSectionchart1" class="panel panel-default">
        <div class="panel-heading">
            <h3>Chart <span id="chartIdHead"></span>{{ chartOption }}</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="chart" id="graph">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p>
                <button type="button" class="btn btn-primary updateButton" chartId="chart1">Update</button>
            </p>
            <p>
                {{ form_priceplot.option_priceplot(size=1, class="form-control", id="chartOption") }}
            </p>
        </div>
    </div>
</body>

    <script>
        var graphs = {{ plot | safe}};
        Plotly.plot('graph', graphs, {});
    </script>
{% endblock %}

priceplot.js

    $(document).ready(function(){
    $(".updateButton").on("click", function(){
        var chartId = $(this).attr("chartId")
        var chartOption = $("#chartOption").val()
        console.log(chartId)
        console.log(chartOption)

        req = $.ajax({
            url : "/updatepriceplot",
            type : "POST",
            data : {chartId: chartId, chartOption : chartOption}
        });

        req.done(function(data) {
            $("#chartSectionchart1").fadeOut(300).fadeIn(300);
            var graphs = data;
            console.log(graphs)
            Plotly.newPlot('graph', graphs, {});     

        });


    });
});

Answer 1

由于聊天中人们的巧妙帮助，问题已得到解决：

在更新图之前，需要解析JSON数据：

修改后的priceplot.js

    $(document).ready(function(){
        $(".updateButton").on("click", function(){
            var chartId = $(this).attr("chartId")
            var chartOption = $("#chartOption").val()
            console.log(chartId)
            console.log(chartOption)

            req = $.ajax({
                url : "/updatepriceplot",
                type : "POST",
                data : {chartId: chartId, chartOption : chartOption}
            });

            req.done(function(data) {
                $("#chartSectionchart1").fadeOut(100).fadeIn(100);
                var graphs = JSON.parse(data);
                console.log(graphs)
                Plotly.react('graph', graphs, {});     
            });
        });
    });

使用新数据更新plotly.js图

1 个答案: