Python 如何使网页Bokeh图以与show相同的分辨率显示（图）？_Python_Html_Flask_Bokeh

Python 如何使网页Bokeh图以与show相同的分辨率显示（图）？

python html flask

Python 如何使网页Bokeh图以与show相同的分辨率显示（图）？,python,html,flask,bokeh,Python,Html,Flask,Bokeh,我能够使用flask和html制作一个基于web的bokeh绘图，但是网页上的绘图与通过“bokeh中的显示（图）”绘制的绘图（屏幕截图2）相比，分辨率更低（屏幕截图1），清晰度更低。我曾尝试将html标记从bokeh 1.4.0更改为2.0.0，并为html div添加了类“bokeh”，但这不会改变web上的分辨率。如何使网页打印的分辨率与通过show（图）打印的分辨率相同？感谢任何线索 *更新：我编辑了代码，只绘制了一组，并在conda上将bokeh从1.2.0更新为2.0.2，这不允许我

我能够使用flask和html制作一个基于web的bokeh绘图，但是网页上的绘图与通过“bokeh中的显示（图）”绘制的绘图（屏幕截图2）相比，分辨率更低（屏幕截图1），清晰度更低。我曾尝试将html标记从bokeh 1.4.0更改为2.0.0，并为html div添加了类“bokeh”，但这不会改变web上的分辨率。如何使网页打印的分辨率与通过show（图）打印的分辨率相同？感谢任何线索

*更新：我编辑了代码，只绘制了一组，并在conda上将bokeh从1.2.0更新为2.0.2，这不允许我通过浏览器中的show（plot）查看图形。因此，您可能会看到下面的屏幕截图是以前运行的示例*

我使用谷歌浏览器：83.0.4103.61（官方版本）（64位）

python 3.7

博克2.0.2

app.py

import numpy as np
from bokeh.plotting import figure
import pandas as pd
from flask import Flask, render_template, request, redirect
from bokeh.embed import components
from scipy.optimize import curve_fit
from random import randint
from bokeh.io import show

f_12 = pd.Series(['f1', 'f2'])
f_12 = f_12.repeat(50)

sample_df = pd.DataFrame(data={'x': [randint(100, 1000) for p in range(0, 100)]
                          ,'y': np.random.random(100)
                          ,'filter_12': f_12
                          , 'group': [randint(1, 2) for p in range(0, 100)]
                         })

f12_list = sample_df['filter_12'].unique().tolist()
group_list = sample_df['group'].unique().tolist()

def compute( f_12, group_f):
        small_df = sample_df.loc[(sample_df['filter_12'] == f_12) & (sample_df['group'] == group_f) ]   
        x = small_df['x'].values
        y = small_df['y'].values
        fig=figure(x_axis_label="x",y_axis_label="y")

        popt, pcov = curve_fit(lambda fx,a,b: a+b*np.log(fx),  x,  y)
        #popt, pcov = curve_fit(func,  x,  y)
        y_cal = popt[1]*np.log(x) + popt[0]       
        fig.line(x, y_cal, color='green', legend_label="Green_Line_fit")
        fig.circle(x, y, color='green', legend_label='A')

        return fig

app = Flask(__name__, template_folder='templates')
# Index page
@app.route('/')
def main():
   return redirect('/index')

@app.route('/index', methods=['GET'])
def index():
    return render_template('index.html', f12_list=f12_list, group_list=group_list)


@app.route('/plot', methods=['POST'])
def results():
    if request.method == 'POST':
        f_12 = request.form.get('f_12')
        if f_12 == None:
            f_12 = "f1"
        group_f = request.form.get('selected_group')
        if group_f == None:
            group_f = 1        
        plot = compute(f_12, int(group_f))
        show(plot)
                # Embed plot into HTML via Flask Render
        script, div = components(plot)
        return render_template("index.html", script=script, div=div, f12_list=f12_list, group_list=group_list)

if __name__ == '__main__':
    app.run(debug=True)

index.html

<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.0.2.min.css" rel="stylesheet" type="text/css">

</head>
<body>
<H1>Chart</H1>

<form action="/plot" method="POST">
<select name="f_12" id="f_12">
    {% for f12 in f12_list %}
        {% if f12 == f_12 %}
            <option selected value="{{ f12 }}">{{ f12 }}</option> 
        {% else %} 
            <option value="{{ f12 }}">{{ f12 }}</option> 
        {% endif %}
    {% endfor %}
</select>
<select name="selected_group" id="selected_group">
    {% for group in group_list %}
        {% if group == selected_group %}
            <option selected value="{{ group }}">{{ group }}</option> 
        {% else %} 
            <option value="{{ group }}">{{ group }}</option> 
        {% endif %}
    {% endfor %}
</select>
<input type="submit">
</form>
<div class="bokeh">
{{ div|safe }}
</div>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.2.min.js"></script>

{{ script|safe }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>


图表
{f12中f12的%u列表%}
{%if f12==f_12%}
{{f12}}
{%else%}
{{f12}}
{%endif%}
{%endfor%}
{组中的组的%u列表%}
{%if group==selected_group%}
{{group}}
{%else%}
{{group}}
{%endif%}
{%endfor%}
{{div | safe}}
{{script | safe}}

截图1（网页-谷歌浏览器）

屏幕截图2（显示（图）谷歌chrome上的绘图，bokeh版本1.2.0）

Bokeh端真的不应该有任何区别，除了浏览器的不同，我当然想不出任何东西可以解释这一点。如果您可以提供一个完整的最小复制器，可以在同一浏览器上可靠地演示差异，那么您应该提交一个GitHub问题（），并提供完整的详细信息。@bigreddot谢谢，在GitHub上添加了我的问题。@user12229564对此有任何更新吗？我也在尝试做类似的事情。博基端真的不应该有任何不同，我当然想不出任何东西可以解释这一点，除了浏览器的不同。如果您可以提供一个完整的最小复制器，可以在同一浏览器上可靠地演示差异，那么您应该提交一个GitHub问题（），并提供完整的详细信息。@bigreddot谢谢，在GitHub上添加了我的问题。@user12229564对此有任何更新吗？我也在尝试做类似的事情。