如何完全离线使用 Plotly/Dash (Python)？答案

【问题标题】：How to use Plotly/Dash (Python) completely offline?如何完全离线使用 Plotly/Dash (Python)？
【发布时间】：2019-01-04 13:43:48
【问题描述】：

使用 Dash 0.22.0 和 Python 2.7.12。 Plotly 是 3.1.0 但未在以下示例中使用。

我正在尝试创建一个应该完全离线工作的最小应用程序。

我没有从远程dash_html_components/bundle.js、dash_renderer/bundle.js、react.min.js 和react-dom.min.js 加载，而是将它们的本地副本放在/assets/js 中。我想告诉 Dash 只使用这些文件的本地副本。

我阅读了Assets files & index customizations #286，如果我理解得很好，下面的例子应该可以工作：

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

app = dash.Dash()

# default values
app.config.assets_folder = 'assets'     # The path to the assets folder.
app.config.include_asset_files = True   # Include the files in the asset folder
app.config.assets_external_path = ""    # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets'  # the local url prefix ie `/assets/*.js`

app.layout = html.Div(
    [html.H1("this is a test")]
)

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

HTML 源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Dash</title>

        <link rel="stylesheet" href="/assets/css/materialize.css">
        <link rel="stylesheet" href="/assets/css/materialize.min.css">
        <link rel="stylesheet" href="/assets/material-icons/material-icons.css">
    </head>
    <body>

    <div id="react-entry-point">
        <div class="_dash-loading">
            Loading...
        </div>
    </div>

    <footer>
         <script id="_dash-config" type="application/json"<{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
         <script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
         <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
         <script src="https://unpkg.com/dash-html-components@0.11.0/dash_html_components/bundle.js"></script>
         <script src="/assets/js/dash_html_components_0.11.0/bundle.js"></script>
         <script src="/assets/js/react_15.4.2/react-dom.min.js"></script>
         <script src="/assets/js/react_15.4.2/react.min.js"></script>
         <script src="/assets/js/dash_renderer_0.13.0/bundle.js"></script>
         <script src="/assets/js/materialize_1.0.0.rc2/materialize.js"></script>
         <script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
         <script src="/assets/material-icons/iconjar-map.js"></script>
         <script src="https://unpkg.com/dash-renderer@0.13.0/dash_renderer/bundle.js"></script>
        </footer>
    </body>
</html>

如您所见，我的本地 js 文件是从 /assets 加载的，但它一直从 https://unpkg.com/... 加载相同的文件

有没有办法避免这种情况？

【问题讨论】：

也许是硬编码的？如果是这样，您可以提交问题或拉取请求。

标签： python plotly plotly-dash

【解决方案1】：

看来我错过了一个更简单的解决方案。如果有人想这样做，我就把它放在这里。

不要在 /assets 中包含破折号库（dash_html_components/bundle.js、dash_renderer/bundle.js、react.min.js 和 react-dom.min.js）的本地副本。

/assets 仅用于与 Dash 和 React 无关的 js 和 css 文件。就我而言，materialize.js、iconjar-map.js 和它们各自的 CSS。

改为添加：

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

会成功的。

代码现在是：

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

app = dash.Dash()

# default values
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.config.assets_folder = 'assets'     # The path to the assets folder.
app.config.include_asset_files = True   # Include the files in the asset folder
app.config.assets_external_path = ""    # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets'  # the local url prefix ie `/assets/*.js`

app.layout = html.Div(
    [ html.H1("This is a test")]
)

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

以及生成的 html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Dash</title>

        <link rel="stylesheet" href="/assets/css/materialize.min.css">
        <link rel="stylesheet" href="/assets/material-icons/material-icons.css">
    </head>
    <body>

        <div id="react-entry-point">
            <div class="_dash-loading">
                Loading...
            </div>
        </div>

        <footer>
            <script id="_dash-config" type="application/json">{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
            <script src="/_dash-component-suites/dash_renderer/react@15.4.2.min.js?v=0.13.0"></script>
            <script src="/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.13.0"></script>
            <script src="/_dash-component-suites/dash_html_components/bundle.js?v=0.11.0"></script>
            <script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
            <script src="/assets/material-icons/iconjar-map.js"></script>
            <script src="/_dash-component-suites/dash_renderer/bundle.js?v=0.13.0"></script>
        </footer>
    </body>
</html>

【讨论】：

嗨，亚历克斯。我正在使用本教程，这里提供的破折号模板：view-source:https://dash-gallery.plotly.host/dash-vanguard-report 正在加载一堆 3rd 方 CCS 和 JS。您对我应该将哪个 CCS 和 JS 下载到我的/assets 目录有任何想法吗？
嗨@weefwefwqg3。唉，我已经有几个月没有在这个项目上工作了，我无法帮助你。对不起。