У меня такой же вопрос, как и этот .У меня есть веб-сайт, содержащий несколько элементов, таких как таблица и график боке, который я хочу обновить, как только пользователь даст определенный вклад.Хотя я могу сделать это для таблицы, я не знаю, как обновить график боке.
В приведенном ниже примере я использую минимальный пример, в котором пользовательский ввод определяет размеры таблицы.Таким образом, результат выглядит следующим образом:
Обновление таблицы работает отлично, и, как и ожидалось, я, однако, изо всех сил пытаюсь обновить график соответствующим образом.Я могу легко инициализировать его, используя (весь код можно найти в конце этого поста):
@app.route('/')
def index():
# just an initial figure
p = figure(plot_width=150, plot_height=100)
p.line([1, 2, 3], [1, 2, 3])
# save(p, 'testing.html')
script_bok, div_bok = components(p)
return render_template('index.html', div_bok=div_bok, script_bok=script_bok)
и затем можно выбрать выбор пользователя по
@app.route('/_get_table')
def get_table():
nrow = request.args.get('nrow', type=int)
ncol = request.args.get('ncol', type=int)
# the table we want to display
df = pd.DataFrame(np.random.randint(0, 10, size=(nrow, ncol)))
# the updated/new plot
p = figure(plot_width=150, plot_height=100)
p.line(list(range(nrow)), list(range(nrow)))
# save(p, 'testing.html')
script_bok, div_bok = components(p)
# how would I pass those now?
return jsonify(my_table=json.loads(df.to_json(orient="split"))["data"],
columns=[{"title": str(col)} for col in json.loads(df.to_json(orient="split"))["columns"]],
div_bok=div_bok,
script_bok=script_bok)
Вопрос: Как теперь передать новые компоненты в index.html, чтобы график обновлялся вместе с таблицей, но все остальные элементы на странице не затрагивались?
Теперь есть два ответачто решить проблему.Я все еще решил использовать награду, чтобы найти еще лучшие ответы.Вещи, которые можно улучшить:
1) В данный момент график всегда рисуется с нуля, в идеале обновляются только данные.
2) Есть ли способ избежать дополнительного шаблона (ниже он называется update_content.html)?
Если дополнительного ответа не появляется, я более чем рад предоставить баллы@Anthonydouc для его хороший ответ .
Это весь мой код:
from flask import Flask, render_template, request, jsonify
import pandas as pd
import numpy as np
import json
from bokeh.plotting import figure, show, save
from bokeh.embed import components
# Initialize the Flask application
app = Flask(__name__)
@app.route('/')
def index():
# just an initial figure
p = figure(plot_width=150, plot_height=100)
p.line([1, 2, 3], [1, 2, 3])
# save(p, 'testing.html')
script_bok, div_bok = components(p)
return render_template('index.html', div_bok=div_bok, script_bok=script_bok)
@app.route('/_get_table')
def get_table():
nrow = request.args.get('nrow', type=int)
ncol = request.args.get('ncol', type=int)
# the table we want to display
df = pd.DataFrame(np.random.randint(0, 10, size=(nrow, ncol)))
# the updated/new plot
p = figure(plot_width=150, plot_height=100)
p.line(list(range(nrow)), list(range(nrow)))
# save(p, 'testing.html')
script_bok, div_bok = components(p)
# how would I pass those now?
return jsonify(my_table=json.loads(df.to_json(orient="split"))["data"],
columns=[{"title": str(col)} for col in json.loads(df.to_json(orient="split"))["columns"]],
div_bok=div_bok,
script_bok=script_bok)
if __name__ == '__main__':
app.run(debug=True, threaded=True)
и мой index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.15.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.15.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">some stuff</h3>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-8">
<form id="input_data_form" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="nrow">rows</label>
<input type="number" class="form-control" id="nrow" min="0" step="1" placeholder="" value="2" required>
<div class="invalid-feedback">
please provide an integer
</div>
</div>
<div class="col-md-6 mb-3">
<label for="ncol">columns</label>
<input type="number" class="form-control" id="ncol" min="0" step="1" placeholder="" value="2" required>
<div class="invalid-feedback">
please provide an integer
</div>
</div>
</div>
<div class="form-row text-center">
<div class="col-12">
<button id="calculate" type="submit" class="btn btn-primary">Calculate!</button>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<div class="header">
<h5 class="text-muted">Plot results</h5>
</div>
{{div_bok|safe}}
{{script_bok|safe}}
</div>
</div>
<hr class="mb-4">
<table id="a_nice_table" class="table table-striped"></table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.15.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = null;
$('#input_data_form').submit(function (event) {
event.preventDefault();
if ($('#input_data_form')[0].checkValidity() === false) {
event.stopPropagation();
if (table !== null) {
table.destroy();
table = null;
$("#a_nice_table").empty();
}
} else {
$.getJSON('/_get_table', {
nrow: $("#nrow").val(),
ncol: $("#ncol").val()
}, function(data) {
//document.body.append($(data.script_bok)[0]);
//$("#bokeh_plot").html(data.div_bok);
if (table !== null) {
table.destroy();
table = null;
$("#a_nice_table").empty();
}
table = $("#a_nice_table").DataTable({
data: data.my_table,
columns: data.columns
});
});
return false;
}
$('#input_data_form').addClass('was-validated');
});
});
</script>
</body>