python - Plotly Dash：如何在绘图中添加脚注和源文本

问题描述

下面是我的代码：

app = dash.Dash(__name__, meta_tags=[{
      'name': 'viewport',
      'content': 'width=device-width, initial-scale=1.0'
    }])
server=app.server

tabs_styles = {'display': 'inlineBlock', 'height': 'auto', 'width': 'auto',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': '#A9A9A9',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "#A9A9A9",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', mobile_breakpoint=0, children=[
        dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Ahmedabad', value='tab-2',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Bengaluru', value='tab-3',style=tab_style, selected_style=tab_selected_style)
    ]),
    html.Div(id='tabs-example-content')
])

@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))

def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            dcc.Graph(id='g2', figure=india)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-2':
        return html.Div([
            dcc.Graph(id='g2', figure=ahm)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-3':
        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})


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

我想在每个绘图的每个选项卡下的此仪表板中包含脚注。

我应该如何修改以实现这一目标？

选项卡中绘图的预期输出如下所示：一个绘图，以及每个选项卡中绘图下方的一些脚注。

链接到我的代码的仪表板：https ://isb-quant-index.herokuapp.com/

eg3：https ://twitter.com/ShamikaRavi/status/1377893086810959872/photo/1

标签： pythonplotlydata-visualizationplotly-dashplotly-python

我编写代码的理解是，您的问题是关于如何注释绘图而不是如何去做。我在官方参考中自定义了示例并添加了带有链接的文本。

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = go.Figure(go.Scatter(x=df['Date'], y=df['AAPL.High']))

fig.update_xaxes(rangeslider_visible=True)

note = 'NYSE Trading Days After Announcement<br>Source:<a href="https://www.nytimes.com/"">The NY TIMES</a> Data: <a href="https://www.yahoofinance.com/">Yahoo! Finance</a>'
fig.add_annotation(
    showarrow=False,
    text=note,
    font=dict(size=10), 
    xref='x domain',
    x=0.5,
    yref='y domain',
    y=-0.5
    )

fig.show()

python - Plotly Dash：如何在绘图中添加脚注和源文本

问题描述

解决方案

推荐阅读