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

Posted

技术标签:

【中文标题】使用新数据更新 plotly.js 绘图【英文标题】:Update a plotly.js Plot with new data 【发布时间】:2019-08-06 08:46:34 【问题描述】:

我正在使用 Plotly.js 和 AJAX 迈出第一步。但是,在将新数据传递给绘图时,我被卡住了。虽然收到了数据(由console.log()确认),但在使用“Plotly.newPlot()时会破坏情节。我似乎无法弄清楚我哪里出错了。我尝试研究这个问题,但是所有示例都不适用于我的情况。

预期行为:

点击按钮 (chartId="chart1") 后,priceplot.js 应该向路由 '/updatepriceplot' 发送请求,该路由会根据 request.form["chartOption"] 中的选择返回 JSON 响应。

实际行为:

点击按钮后图为空(chartId="chart1")

这是我的 Flask 路线:

@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, );     

        );


    );
);

【问题讨论】:

【参考方案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 绘图的主要内容,如果未能解决你的问题,请参考以下文章

如何获取 Plotly.js 默认颜色列表?

Plotly.js:锁定 y 轴以避免负值

我应该如何更新 Matlab 中的绘图数据?

更改绘图的背景颜色

为实时数据绘图实现 pyqtgraph

以固定的时间间隔更新图形/绘图