时间戳

首页 > 解决方案 > 使用新数据更新 plotly.js 绘图

ajax - 使用新数据更新 plotly.js 绘图

问题描述

我正在使用 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

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

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, {});     

        });


    });
});

标签： ajaxflaskplotly.js

解决方案

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

在更新绘图之前需要解析 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, {});     
            });
        });
    });

推荐阅读