如何在Python Dash-Bootstrap-Components中渲染HTML？图表显示异常

问题原因 #

Dash的html.Div组件默认会将传入的字符串视为纯文本转义，不会解析为HTML结构；同时直接嵌入在HTML字符串中的<script>标签也无法被Dash正确执行，导致TradingView图表仅以原始字符串形式展示。

解决方案 #

方案1：使用dangerously_allow_html属性 + 单独Script组件

通过开启dangerously_allow_html=True让Dash渲染HTML结构，同时用html.Script组件单独加载TradingView的库和初始化代码，确保脚本正常执行。

修改后的完整代码：

import dash
from dash import html
import dash_bootstrap_components as dbc

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

# 仅保留TradingView的HTML结构部分
tradingview_html = '''
<div class="tradingview-widget-container">
  <div id="tradingview_8906e"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL stock chart</span></a> by TradingView</div>
</div>
'''

# 单独创建Script组件加载外部库和初始化图表
tradingview_script = html.Script(
    '''
    new TradingView.widget({
        "autosize": true,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_8906e"
    });
    ''',
    src="https://s3.tradingview.com/tv.js"
)

container = html.Div([
    html.Div(tradingview_html, dangerously_allow_html=True),
    tradingview_script
])

column = dbc.Col([container])

app.layout = html.Div([
    dbc.Container([
        dbc.Row([column])
    ])
])

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

方案2：分离脚本到assets文件夹（更易维护）

将TradingView的初始化脚本放在项目的assets目录下，Dash会自动加载该目录的静态资源，实现代码分离。

1. 在项目根目录创建assets文件夹，新建tradingview.js文件：

document.addEventListener('DOMContentLoaded', function() {
    new TradingView.widget({
        "autosize": true,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_8906e"
    });
});

2. 修改Python代码：

import dash
from dash import html
import dash_bootstrap_components as dbc

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

tradingview_html = '''
<div class="tradingview-widget-container">
  <div id="tradingview_8906e"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL stock chart</span></a> by TradingView</div>
</div>
'''

container = html.Div([
    html.Div(tradingview_html, dangerously_allow_html=True),
    html.Script(src="https://s3.tradingview.com/tv.js")
])

column = dbc.Col([container])

app.layout = html.Div([
    dbc.Container([
        dbc.Row([column])
    ])
])

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

关键说明 #

• dangerously_allow_html=True：必须开启该属性才能让Dash渲染传入的HTML字符串，注意仅对可信的HTML内容使用，避免XSS安全风险。
• 脚本单独处理：直接嵌入HTML字符串的<script>标签无法被Dash正确执行，通过html.Script组件或assets文件夹加载脚本，能确保代码在页面加载时正常运行。

内容的提问来源于stack exchange，提问作者Chris0815