在 Dash 中执行回调时，如何在 children 属性中设置某些单词的样式？

Question

我很好奇是否可以在 dash 的 children 属性中设置某些单词的样式。

我的文本是 children 属性的一部分，因为我有一个更新文本的回调。但是，我只想将冒号前的单词加粗，而不是整个文本。我似乎无法想出在 Dash 中执行此操作的优雅方法。

我看到的是这样的带回家的工资总额：500 我希望它看起来像什么 带回家的工资总额： 500

当前代码

html.Div([
    html.Div([
        html.Div(id='total-pay',
                children='',
                style={'font-weight': 'bold'}
        ),
    ], className='six columns'),
], className='row'),

@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
    def dataview_text(start_date, end_date):
        df = df_paystub
        df = df[(df['Date'] >= start_date) & (df['Date'] <= end_date)]
        totalpay = 'Take Home Pay Total: ' + str(round(df['CheckTotal'].sum(),2))
        return totalpay

谢谢！

Answer 1

您可以使用 python 中的 dash_dangerously_set_inner_html 包轻松实现此目的，可能还有其他更好的方法来渲染内部 React HTML 组件，例如 this，但我到目前为止 python 还没有找到。

这里是使用 `dash_dangerously_set_inner_html``` 包的示例代码。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from datetime import datetime as dt
import dash_dangerously_set_inner_html

import pandas as pd
import plotly.graph_objs as go


app = dash.Dash(__name__)

#main div
app.layout = html.Div([
    dcc.DatePickerRange(
        id='date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2019, 9, 19),
        initial_visible_month=dt(2017, 8, 5),
        end_date=dt(2017, 8, 25)
    ),
    html.Div([
        html.Div([
            html.Div(id='total-pay',
                children='',
                #style={'font-weight': 'bold'}
            ),
        ], className='six columns'),
    ], className='row'),

])


@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
def dataview_text(start_date, end_date):
    return dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
         <b>Take Home Pay Total: </b>
    ''' + str(round(1000,2)))

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

Answer 2

这是一种方法：

totalpay = html.P(children=[
        html.Strong('Take Home Pay Total: '),
        html.Span(str(round(df['CheckTotal'].sum(),2)))
    ])
return totalpay

如果你想使用降价样式，你也可以使用 dcc.Markdown。

在 Dash 中执行回调时，如何在 children 属性中设置某些单词的样式？

How do I style certain words in the children attribute when a callback is performed in Dash?

python

plotly

plotly-dash