如何将本地和外部 JS 文件合并到 Dash Plotly 框架中

Question

我的目标是将用 JS 编写的 GitHub 热图合并到我的 test.py Dash 框架中。

root-
    -assets–>google.js
           –>index.js
           –>main.css 
    -css–>main.css 
    -index.html 
    -test.py

我的heatmap(index.html)是这样写的，

<!DOCTYPE html>
<html>
  <head>
    <title>Github contribution graph</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-68576141-1', 'auto');
    ga('send', 'pageview');

    </script>
  </head>
  <body>

    <div class="results">
      <div class="js-heatmap"></div>
      <div class="js-months"></div>
      <div class="js-legend"></div>
      <div class="js-empty  hidden  center">
        <h4>Oops!</h4>
        <img src="assets/404.gif" style="width:400px;height:300px"></img>
      </div>
      <div class="js-spinner  loader  hidden"></div>
    </div>
  </body>
  </html>

我正在尝试将其转换为我的 dash 框架(test.py),

from datetime import date
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

# external JavaScript files
external_scripts = [
    {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
    {'src': 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'},
    {'src': 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js'},
    {'src': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'},
    {'src':'assets/index.js'},
    {'src':'assets/google.js'}


 
]

# external CSS stylesheets
external_stylesheets = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    {'rel':"stylesheet",'src':'assets/main.css'},
    {'rel':"stylesheet",'href':'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
    {'https://codepen.io/chriddyp/pen/bWLwgP.css'}

]


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

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

app.layout = html.Div([
    html.Div(
        'Plotly Dash5',
        className ="results",
        ),
    html.Div(
        className='js-heatmap'),
    html.Div(
        className='js-months'),
    html.Div(
        className='js-legend'),
    html.Div(
        className='js-spinner  loader  hidden'),
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=date(1995, 8, 5),
        max_date_allowed=date(2017, 9, 19),
        initial_visible_month=date(2017, 8, 5),
        end_date=date(2017, 8, 25)
    ),
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date_object = date.fromisoformat(start_date)
        start_date_string = start_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date_object = date.fromisoformat(end_date)
        end_date_string = end_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix

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

现在，没有错误显示，热图也没有。我不太确定如何将标准 HTML <div class="js-heatmap"></div> 转换为 plotly 格式。谢谢

Answer 1

不幸的是，您无法真正将 JavaScript 修改 DOM （正如您所做的那样）添加到 Plotly Dash 应用程序中并期望它能正常工作。这是因为 Dash 应用程序实际上是客户端的 React 应用程序，它使用自己的虚拟 DOM 来管理更新。请参阅 Dash FAQs.

中的问题 Can I use jQuery with Dash?

您的选择是：

通过 Graph 组件使用 Plotly 的图表库
找一个别人制作的热图 Dash 组件
将您的 JavaScript 应用包装为 React 和 Dash 组件
找到另一个 React 组件并将其转换为 Dash 组件

我建议查看选项 1，因为 Plotly 支持 generating heatmaps。

如何将本地和外部 JS 文件合并到 Dash Plotly 框架中

How to incorporate local and external JS files into Dash Plotly framework

python

plotly-dash