python - 破折号情节相同的代码不同的浏览器可视化

Question

我正在开发一个绘图仪表板，这是我的代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import numpy as np


n = 7
d_min = 0.2
d_max = 0.8
d_step = 0.1
N_min = 2000
N_max = 8000
N_step = 1000
D = 40
h = 20
cp = 900
sigma = 2700
k = 0.0039
rho_0 = 2.75e-8
T_0 = 20
T_a = 70
alpha = 31


green = '#4daf4a'
blue = '#377eb8'
grey = '#e0e1f5'
black = '#212121'
fontsize = 18
fontfamily = 'Arial, sans-serif'


V_min = 0
V_max = 300
V_step = 1
V_0 = 230

f_min = 0
f_max = 300
f_step = 1
f_0 = 50


w_min = 0
w_max = 200
w_step = 5
w_fmt = '.0f'
w_hoverfmt = '.0f'
w_label = 'width'
w_unit = 'mm'
w_color = green
w_visibility = True

t_min = 0
t_max = 300
t_step = 10
t_fmt = 'd'
t_hoverfmt = '.1f'
t_label = 'temperature'
t_unit = '°C'
t_color = blue
t_visibility = True


d_min = d_min*10**-3
d_max = d_max*10**-3
d_step = d_step*10**-3
D = D*10**-3
h = h*10**-3


def width(NN, dd):
    return NN*dd**2/h


def heat_transfer_area(ww):
    return 2*np.pi*(D + ww)*(h + ww)


def temperature(NN, dd, V, ww):
    AA = heat_transfer_area(ww)

    return (k*(T_0 + T_a) - 1 + np.sqrt((1 - k*(T_0 + T_a))**2 + 4*k*((V/np.sqrt(2))**2/(4*rho_0*alpha*NN*AA*(D/dd**2 + NN/h)) + (1 - k*T_0)*T_a)))/(2*k)


app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])

app.layout = html.Div([html.Div([html.Div([html.P(id = 'voltage-label',
                                                  children = 'Supply voltage xxxxxxxxxx V = ',
                                                  style = {'font-family': fontfamily,
                                                           'float': 'left'}),

                                           dcc.Input(id = 'voltage-input',
                                                     type = 'number',
                                                     debounce = True,
                                                     min = V_min,
                                                     max = V_max,
                                                     step = V_step,
                                                     value = V_0,
                                                     style = {'font-family': fontfamily,
                                                              'float': 'left'}),

                                           html.P(id = 'voltage-unit',
                                                  children = ' V RMS',
                                                  style = {'font-family': fontfamily}),

                                           html.P(id = 'frequency-label',
                                                  children = 'Supply voltage frequency f = ',
                                                  style = {'font-family': fontfamily,
                                                           'float': 'left'}),

                                           dcc.Input(id = 'frequency-input',
                                                     type = 'number',
                                                     debounce = True,
                                                     min = f_min,
                                                     max = f_max,
                                                     step = f_step,
                                                     value = f_0,
                                                     style = {'font-family': fontfamily,
                                                              'float': 'left'}),

                                           html.P(id = 'frequency-unit',
                                                  children = ' Hz',
                                                  style = {'font-family': fontfamily})],

                                          style = {'display': 'inline-block',
                                                   'vertical-align': 'top',
                                                   'margin-left': '3vw',
                                                   'margin-top': '3vw',
                                                   'width': 400}),

                                 html.Div([dcc.Graph(id = 'main-graph',
                                                     figure = {'data': [],
                                                               'layout': go.Layout(plot_bgcolor = black)},
                                                     style = {'height': 800,
                                                              'width': 1400})],
                                          style = {'display': 'inline-block',
                                                   'vertical-align': 'top',
                                                   'margin-left': '1vw',
                                                   'margin-top': '1vw'})],

                                className = 'row')])


@app.callback(Output('main-graph', 'figure'),
              [Input('voltage-input', 'value')])
def update(V_rms):
    d = np.linspace(d_min, d_max, n)
    N = np.linspace(N_min, N_max, n)
    NN, dd = np.meshgrid(N, d)

    V = np.sqrt(2)*V_rms
    ww = width(NN, dd)
    tt = temperature(NN, dd, V, ww)

    data = [go.Contour(x = N,
                       y = d*10**3,
                       z = ZZ,
                       name = f'{label}  ({unit})',
                       zmin = z_min,
                       zmax = z_max + z_step,
                       contours_coloring = 'lines',
                       line_width = 2,
                       hovertemplate = f'{label} = ' + '%{z: ' + hoverfmt + '}' + f' {unit}' + '<extra></extra>',
                       showscale = False,
                       showlegend = True,
                       visible = visibility,
                       colorscale = [[0, color], [1, color]],
                       ncontours = int(2*(z_max - z_min)/z_step),
                       contours = {'showlabels': True,
                                   'labelformat': fmt,
                                   'labelfont': {'size': fontsize,
                                                 'family': fontfamily}})

            for ZZ, z_min, z_max, z_step, label, unit, color, fmt, hoverfmt, visibility in

            zip([ww*10**3, tt],
                [w_min, t_min],
                [w_max, t_max],
                [w_step, t_step],
                [w_label, t_label],
                [w_unit, t_unit],
                [w_color, t_color],
                [w_fmt, t_fmt],
                [w_hoverfmt, t_hoverfmt],
                [w_visibility, t_visibility])]

    layout = go.Layout(plot_bgcolor = black,
                       hovermode = 'x unified',
                       uirevision = 'value')

    figure = go.Figure(data = data, layout = layout)

    return figure


if __name__ == "__main__":
    app.run_server()

版本信息：

Python                       3.7.0
dash                         1.12.0
dash-bootstrap-components    0.10.1
dash-core-components         1.10.0
dash-html-components         1.0.3
matplotlib                   3.0.2
numpy                        1.15.4
plotly                       4.7.0

---

当我运行脚本时，我得到一个本地地址（通常是http://127.0.0.1:8050/），我的仪表板在本地运行。如果我在谷歌浏览器中打开这个地址，一切都很好：左边的标签和右边的图例的可视化是正确的：

---

但是，如果我在Mozilla Firefox中打开相同的地址，标签V RMS会被保留，并且图例中的痕迹颜色不可见。

---

相反，在Internet Explorer中，图例中的痕迹颜色再次可见，但左侧的标签完全错误。

---

代码相同，但三个浏览器呈现仪表板的方式不同。我该如何解决？
我也想在其他浏览器中获得相同的 Google Chrome 可视化效果。

标签： pythonhtmlbrowserplotlyplotly-dash