我很好奇是否可以在dash中的children属性中设置某些单词的样式。
我的文本是children属性的一部分,因为我有一个更新文本的回调。但是,我只想在冒号之前加粗,而不是整篇文章。我似乎无法在Dash中找到一种优雅的方法。
我看起来像是带回家支付总额:500我希望它看起来像Take Home Pay Total: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
谢谢!
这是一种方法:
totalpay = html.P(children=[
html.Strong('Take Home Pay Total: '),
html.Span(str(round(df['CheckTotal'].sum(),2)))
])
return totalpay
如果你想使用降价造型,你也可以使用dcc.Markdown
。
你可以使用python中的dash_dangerously_set_inner_html
包轻松实现这一点,可能还有其他更好的方法来渲染内部反应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)