Question

我希望对嵌入散景图的最佳方法进行全面检查。

堆栈是主要用于JSON API的Flask，前端是React.js单页应用（SPA）。因此，没有模板之类的东西。

在embedding plots文档中对Bokeh进行教育时，有很多选择。但大致上：

嵌入图
以客户端身份连接到Bokeh服务器

首先-我倾向于将Flask中的钻头推到前端，以便它们是独立的。也就是说，一种对我来说似乎有意义的方法是为Flask中的情节生成JS并将其作为远程脚本推送到React。

上述角度似乎比以下方法更可取：（a）导出HTML并烘焙到iFrame中，或（b）在前端运行Bokeh客户端。但是，我是从没有太多经验的地方讲话的。

任何指针将不胜感激！

干杯！

Answer 1

我认为最简单的方法是在前端使用BokehJS，在后端使用Bokeh.embed.json_item。典型的过程是：

在您的后端（以您的情况为烧瓶）：

像往常一样在python中生成散景图。在线阅读所有文档并获得您想要显示的可视化图像
将生成的散景图对象传递给json_item函数调用，该函数带有两个参数：实际的图对象和字符串唯一标识符。此唯一ID可以与前端中DIV的HTML ID相匹配，但这不是绝对必要的。
使用标准的python JSON库将结果作为JSON字符串转储

一个简单的示例如下：

@app.route('/plot1')
def plot1():
    # copy/pasted from Bokeh Getting Started Guide
    x = linspace(-6, 6, 100)
    y = cos(x)
    p = figure(width=500, height=500, toolbar_location="below",
                     title="Plot 1")
    p.circle(x, y, size=7, color="firebrick", alpha=0.5)

    # following above points:
    #  + pass plot object 'p' into json_item
    #  + wrap the result in json.dumps and return to frontend
    return json.dumps(bokeh.embed.json_item(p, "myplot"))

在前端，请确保您导入了必要的javascript和CSS文件（为此，我使用了CDN），然后只需为上述端点发出AJAX GET请求即可。解析对json对象的响应，并调用 Bokeh.embed.embed_item ，如下所示：

handlePlot1 = () => {
    Axios.get("http://localhost:5000/plot1")
          .then(resp =>
        window.Bokeh.embed.embed_item(resp.data, 'testPlot')
    )
  }

// in your render function
<Button
     variant="contained"
     style={{margin: 10}}
     color="primary"
     onClick={this.handlePlot1}
>
          Get Plot 1
</Button>

<div id='testPlot' className="bk-root"></div>

这应该足以让您入门。我写了more complete blog-post about this subject，其中还包含指向github repo containing sample code

的链接

在javascript前端中嵌入bokeh图表

1 个答案: