如何更新完成的图表。JS页面瓶 - 过滤日期之间的图表？

Question

如何更新已经渲染的已建成的成品图表。模板页面上已经有Ready Chart.js。从烧瓶中获取的价值数据。在页面上采取了什么操作之后，烧瓶代码中的值更改了。我该如何做到这一点，以便在路线中采取一定操作后，烧瓶还会更新图表。

我一直在考虑如何制作它，以便将其更新为“图表”。JS。那我不知道如何更新Chart.js。

如果您提供任何帮助，您将拯救我，链接到某些东西。怎么办。

如何在路由烧瓶之间传输数据（值）？

这是HTML代码，

<div class="row">
        <div class="col-md-3">
            <input type="text" name="From" id="From" class="form-control" placeholder="From Date"/>
        </div>
        <div class="col-md-3">
            <input type="text" name="to" id="to" class="form-control" placeholder="To Date"/>
        </div>
        <div class="col-md-6">
            <input type="button" name="range" id="range" value="Range" class="btn btn-success"/>
        </div>
      </div>
      <div id="purchase_order"></div>
      <hr>
      <div class="row" style="align-content: center">
{#        <div class="col col-lg-0"></div>#}

            </div>
            <div class="outer-wrapper" style="align-content: center">
                <div class="table-wrapper" id="table-wrapper" style="align-content: center">
                    <table>
                        <thead>
                            {% for col in column_names %}
                            <th>{{col}}</th>
                            {% endfor %}
                        </thead>
                        <tbody>
                            {% for row in row_data %}
                            <tr>
                                {% for cell in row %}
                                <td>{{ cell }}</td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
{#        <div class="col col-lg-0"></div>#}
      </div>

      <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <div>
              <canvas id="myChart" width="800px" style="align-content: center"></canvas>
            </div>
        </div>
        <div class="col-md-1">
        </div>
      </div>
      <br>
    </div>

它的脚本

</script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function (){
            $.datepicker.setDefaults({
                dateFormat: 'yy-mm-dd'
            });
            $(function (){
                $("#From").datepicker();
                $("#to").datepicker();
            });
            $('#range').click(function (){
                var From = $('#From').val();
                var to = $('#to').val();
                if (From != '' && to != '')
                {
                    $.ajax({
                        url:"/range",
                        method:"POST",
                        data:{From:From, to:to},
                        success:function (data)
                        {
                            $('#table-wrapper').html(data);
                            $('#table-wrapper').append(data.htmlresponse);
                        }
                    });
                }
                else
                {
                    alert("Please Select the Date")
                }
            });
        });
    </script>


    <script>
      const labels = [{% for item in os_x %}
      "{{ item }}",
          {% endfor %}];

      const data = {
        labels: labels,
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [{% for item in os_y %}
              {{ item }},
              {% endfor %}],
        }]
      };

      const config = {
        type: 'line',
        data: data,
        options: {}
      };
    </script>
    <script>
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>

是烧瓶路由

@app.route('/', methods=['GET','POST'])
@app.route('/index')
def home_page():  # put application's code here
    df = pd.read_sql('select * from kotel', con=db.engine)
    df['date'] = df['date'].dt.round('2min')
    y_data = df['tnv'].tolist()
    x_data = df['date'].tolist()
    df_graph = df.copy()
    return render_template('index new.html', column_names=df.columns.values, row_data=list(df.values.tolist()), column_names_graph=df_graph.columns.values, os_y = y_data, os_x = x_data)


@app.route("/range", methods=["POST","GET"])
def range():
    if request.method == 'POST':
        From = request.form['From']
        to = request.form['to']
        df = pd.read_sql('select * from kotel', con=db.engine)
        df['date'] = pd.to_datetime(df['date'])
        df = df.loc[(df['date'] >= From) & (df['date'] <= to)]
        df['date'] = df['date'].dt.round('2min')
    return jsonify({'htmlresponse': render_template('response.html', column_names=df.columns.values, row_data=list(df.values.tolist()))})

Answer 1

您可以查看 this github页面，它将拥有更多详细信息的详细信息，但基本上，您必须在JS客户端的烧瓶服务器和事件侦听器上设置数据蒸汽。