- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有一个与 this one 类似的问题.我有一个包含多个元素的网站,例如表格和 Bokeh 图,我想在用户提供特定输入后更新它们。虽然我可以为表格完成此操作,但我不知道如何更新 Bokeh 图。
在下面的示例中,我使用了一个最小的示例,其中用户输入决定了表格的尺寸。所以输出看起来像这样:
表格的更新效果很好,正如预期的那样,但是,我很难相应地更新绘图。我可以使用以下方法轻松初始化它(完整代码可以在本文末尾找到):
@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 提供 his nice answer 的分数。 .
这是我的全部代码:
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.bokeh.org/bokeh/release/bokeh-0.12.15.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bokeh.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.bokeh.org/bokeh/release/bokeh-0.12.15.min.js"></script>
<script src="http://cdn.bokeh.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>
最佳答案
我已经从你的例子中删除了表格,只专注于更新 Bokeh 图。在此示例中需要注意的重要一点是,每次按下计算时都会重新创建绘图。
现在有三个文件 - 服务器代码 (app.py)、基本模板 (index.html) 和一个只渲染 Bokeh 图的模板 (update_content.html)。这两个模板都需要像往常一样位于模板文件夹中。
“_get_table”端点现在返回包含 Bokeh 图的渲染 html。单击计算按钮将触发回调,进而向此端点提交发布请求。应用程序.py:
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', methods=['GET','POST'])
def get_table():
# extract nrow, ncol via ajax post - contained in request.form
nrow = request.form.get('nrow', type=int)
ncol = request.form.get('ncol', type=int)
# the updated/new plot
p = figure(plot_width=150, plot_height=100)
p.line(list(range(nrow)), list(range(nrow)))
script_bok, div_bok = components(p)
#return rendered html to the browser
return render_template('update_content.html', div_bok=div_bok, script_bok=script_bok)
if __name__ == '__main__':
app.run(debug=True, threaded=True)
索引.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.bokeh.org/bokeh/release/bokeh-0.12.15.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bokeh.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 id="plot-content">
{{div_bok|safe}}
{{script_bok|safe}}
</div>
</div>
</div>
</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.bokeh.org/bokeh/release/bokeh-0.12.15.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#calculate').on('click', function(e){
// prevent page being reset, we are going to update only
// one part of the page.
e.preventDefault()
$.ajax({
url:'./_get_table',
type:'post',
data:{'nrow':$("#nrow").val(),
'ncol':$("#ncol").val()},
success : function(data){
// server returns rendered "update_content.html"
// which is just pure html, use this to replace the existing
// html within the "plot content" div
$('#plot-content').html(data)
}
})
});
});
</script>
</body>
更新内容.html
{{div_bok|safe}}
{{script_bok|safe}}
关于javascript - 使用 ajax 更新 Bokeh 图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50297490/
我用 bokeh.plotting.Figure.line 画了下面的图。我如何添加垂直引用线来强调 Feb/14 的一个点? 这是另一个情节。这是 bokeh.charts.Bar。我想添加水平指南
我使用 python 在 Bokeh 中创建了一个散点图。我想创建一个小部件,允许用户更改散点图中点的颜色。有没有简单的方法可以做到这一点?我找到了一个基于 JQuery 的颜色选择器小部件 ( ht
我有一个 bokeh 应用程序,我可以在其中读取各种文件(6 到 12 个)并生成 DataTable 来比较几个不同的变量。 所以我有一个生成 DataTable 的循环,将它们添加到列表中,然后最
典型的 Bokeh 散点图可能如下所示: 其中 x 和 y 限制均为 [0,1]。如何删除轴上 0 之前并延伸到 1 之外的额外空间?这样最终图的左角为坐标 (0,0),左上角和右下角分别为 (0,1
我正在尝试创建一个 Bokeh 图,它允许我通过单击复选框来切换图中线条的可见性。 我开始尝试对复选框组使用 js 回调,但不幸的是,实际上并没有为复选框组实现 js 回调。 任何人都可以提出另一种方
例如,我有 button = Button(label="0", type="success") 选择此按钮后,我想将标签更改为“1”,反之亦然。有没有简单的方法来实现这一目标? 编辑: RadioB
我团队中的一些人,包括我自己,发现在 Bokeh 散点图中使用 circle 非常令人迷惑。方法,对于图中数据的初始自动缩放拟合,我们可以为我们的数据拨入合理的大小,例如使用 plot.circle(
所以我想做的是一个带有线条和圆圈的简单图形 http://docs.bokeh.org/en/latest/docs/quickstart.html#getting-started 但带有在鼠标悬停在
考虑一个垂直堆积条形图,其中每一列都由多个条形(段)组成。是否可以在每个段上添加工具提示?目前,相同的工具提示附加到组成该列的所有段。 from bokeh.core.properties impor
In[21]: from bokeh.charts import Bar, output_file, show In[22]: dict = {'sec': {u'A': 10, u'B': 20}}
在 Bokeh 中实现树形图需要什么?类似于这个 DS 示例的东西会很好—— http://bl.ocks.org/robschmuecker/7880033 我只是想可视化一个数据结构,所以只需要平
我了解如何指定在 Bokeh 中显示的特定刻度,但我的问题是是否有一种方法可以分配特定的标签来显示与位置。例如 plot.xaxis[0].ticker=FixedTicker(ticks=[0,1]
有什么方法可以为图例添加标题,例如左侧为当前图例,右侧为带有标题的图例。这个特殊的图例被放置在情节之外,所以我不知道是否可以用文本字形来伪造它。 最佳答案 从最新版本的 Bokeh (1.2) 开始,
问题:我的 python 应用程序启动了一个 Bokeh 服务器,如本文所述: http://matthewrocklin.com/blog/work/2017/06/28/simple-bokeh-
我正在使用 Bokeh 图制作折线图,我想标记实际的点(用线穿过它们),而不是仅仅标记线本身。我怎样才能做到这一点?我浏览了文档和用户指南,但似乎找不到答案。谢谢! 最佳答案 假设您正在使用 boke
我将一个 Bokeh Figure 实例作为输入传递给另一个函数,我需要在那里修改它的源代码。 不知道该怎么做! 这就是我创建图形实例的方式: source = ColumnDataSource({'
据我所知,我可以通过设置 responsive=True 来使 Bokeh 图响应 div 的宽度。然而,我感兴趣的是让 Bokeh 图只在一定程度上做出响应。有没有一种方法可以让我设置 Bokeh
我有一个 Bokeh 服务器应用程序。我想在命令行上传递自定义选项: bokeh serve /path/to/script.py --my-option foo 这可能吗? Bokeh 会以某种方式
我有一个图,它使用来自一些原始数据的值(在 0-20 的 x/y 范围内),以及一些导致一些相当大的 x/y 值(例如 -1000 到 1000+)的最小化数据。因此,我所做的绘图需要我手动单击缩放以
在Web应用程序中,我想让用户使用bokeh的漂亮的框/套索选择工具来选择绘制图像中的感兴趣区域。我想接收选定的像素,以便在python中进行进一步的操作。 对于散点图,这类似于gallery,很容易
我是一名优秀的程序员,十分优秀!