Plotly-Dash显示空白网页

Question

我对plotly-dash比较陌生。在chrome或firefox浏览器中尝试连接http://127.0.0.1:8050/时，会显示一个空白网页。

我已经在chrome和firefox浏览器中都尝试过了。我已经按照此网站https://dash.plot.ly/installation上提到的安装步骤进行了操作。

最初的回答：您连接的地址可能有误，请确保已正确安装plotly-dash并使用与示例相同的端口号。如果问题仍然存在，请检查网络连接和防火墙设置。

pip install dash==1.0.2  # The core dash backend
pip install dash-daq==0.1.0  # DAQ components (newly open-sourced!)

最初的回答：

我使用了这段代码。

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

空白网页 终端截图 空白网页 JS控制台 网络控制台 Javascript控制台中的错误信息

TypeError: dependencies.forEach is not a function
at graphs (dependencyGraph.js:14)
at combination (combineReducers.js:120)
at reducer.js:66
at reducer.js:102
at dispatch (createStore.js:165)
at index.js:11
at UnconnectedContainer.initialization (APIController.react.js:63)
at UnconnectedContainer.componentWillReceiveProps 
(APIController.react.js:33)
at Zf ([e-mail]?v=1.0.0&m=1564319210:67)
at qg ([e-mail]?v=1.0.0&m=1564319210:95)
Bg @ [e-mail]?v=1.0.0&m=1564319210:117  
c.callback @ [e-mail]?v=1.0.0&m=1564319210:126
Ag @ [e-mail]?v=1.0.0&m=1564319210:116
zg @ [e-mail]?v=1.0.0&m=1564319210:116
qi @ [e-mail]?v=1.0.0&m=1564319210:131
ui @ [e-mail]?v=1.0.0&m=1564319210:133
(anonymous) @ [e-mail]?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ [e-mail]? 
v=1.0.0&m=1564319210:27
Vc @ [e-mail]?v=1.0.0&m=1564319210:158
Sc @ [e-mail]?v=1.0.0&m=1564319210:158
Z @ [e-mail]?v=1.0.0&m=1564319210:156
Kc @ [e-mail]?v=1.0.0&m=1564319210:155
ya @ [e-mail]?v=1.0.0&m=1564319210:153
enqueueSetState @ [e-mail]?v=1.0.0&m=1564319210:202
t.setState @ [e-mail]?v=1.0.0&m=1564319210:20
handleChange @ connect.js:302
dispatch @ createStore.js:173
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ api.js:53
Promise.then (async)
(anonymous) @ api.js:52
Promise.then (async)
(anonymous) @ api.js:46
(anonymous) @ index.js:8
initialization @ APIController.react.js:58
componentDidMount @ APIController.react.js:29
qi @ [e-mail]?v=1.0.0&m=1564319210:130
ui @ [e-mail]?v=1.0.0&m=1564319210:133
(anonymous) @ [e-mail]?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ [e-mail]? 
v=1.0.0&m=1564319210:27
Vc @ [e-mail]?v=1.0.0&m=1564319210:158
Sc @ [e-mail]?v=1.0.0&m=1564319210:158
Z @ [e-mail]?v=1.0.0&m=1564319210:156
Kc @ [e-mail]?v=1.0.0&m=1564319210:155
ya @ [e-mail]?v=1.0.0&m=1564319210:153
bh @ [e-mail]?v=1.0.0&m=1564319210:160
xe @ [e-mail]?v=1.0.0&m=1564319210:160
nb.render @ [e-mail]?v=1.0.0&m=1564319210:215
(anonymous) @ [e-mail]?v=1.0.0&m=1564319210:164
$g @ [e-mail]?v=1.0.0&m=1564319210:159
Wc @ [e-mail]?v=1.0.0&m=1564319210:164
render @ [e-mail]?v=1.0.0&m=1564319210:217
DashRenderer @ DashRenderer.js:12
(anonymous) @ (index):28
api.js:73 Uncaught (in promise) TypeError: err.text is not a 
 function at api.js:73 (anonymous) @ api.js:73
 Promise.catch (async)
 (anonymous) @ api.js:45
 (anonymous) @ index.js:8
 initialization @ APIController.react.js:58
 componentDidMount @ APIController.react.js:29
 qi @ [e-mail]?v=1.0.0&m=1564319210:130
 ui @ [e-mail]?v=1.0.0&m=1564319210:133
 (anonymous) @ [e-mail]?v=1.0.0&m=1564319210:158
 unstable_runWithPriority @ [e-mail]? 
 v=1.0.0&m=1564319210:27
 Vc @ [e-mail]?v=1.0.0&m=1564319210:158
 Sc @ [e-mail]?v=1.0.0&m=1564319210:158
 Z @ [e-mail]?v=1.0.0&m=1564319210:156
 Kc @ [e-mail]?v=1.0.0&m=1564319210:155
 ya @ [e-mail]?v=1.0.0&m=1564319210:153
 bh @ [e-mail]?v=1.0.0&m=1564319210:160
 xe @ [e-mail]?v=1.0.0&m=1564319210:160
 nb.render @ [e-mail]?v=1.0.0&m=1564319210:215
 (anonymous) @ [e-mail]?v=1.0.0&m=1564319210:164
 $g @ [e-mail]?v=1.0.0&m=1564319210:159
 Wc @ [e-mail]?v=1.0.0&m=1564319210:164
 render @ [e-mail]?v=1.0.0&m=1564319210:217
 DashRenderer @ DashRenderer.js:12
 (anonymous) @ (index):28

操作系统：Ubuntu 16.04 LTS
浏览器：Google Chrome 版本 74.0.3729.169 (官方版本) (64 位)
版本 74.0.3729.169 (官方版本) (64 位)
dash-1.0.2、dash-core-components-1.0.0、dash-html-components-1.0.0、dash-renderer-1.0.0、dash-table-4.0.2

- b45 K4r

---

当你加载页面时，浏览器的Javascript控制台中是否出现任何内容？ - nicolaskruchten

@nicolaskruchten 请参考控制台截图 https://i.stack.imgur.com/00lKU.png - b45 K4r

没有广告拦截器在运行吗？ - Frayal

没有广告拦截器。你可以查看我的截图。 - b45 K4r

我已经添加了JavaScript控制台错误消息。 - b45 K4r

Answer 1

你可能已经发现了，但我曾经遇到过debug=True的问题。

我在Ubuntu 16.04上运行了你的示例，但我更改了：

app.run_server(debug=True)

to:

app.run_server(debug=False)

这个例子很好地运行了。（我只在 Mozilla 测试过。）

你也可以指定端口和主机来运行 Dash 应用：

app.run_server(host='127.0.0.1',port=8700)

希望这有所帮助。

- billybyte

Answer 2

我在Google Chrome中运行了您的代码，并且没有发现任何与显示问题有关的问题。请检查截图。

- Nimit Gupta