如何在 Dash 应用程序中创建带有均线的条形图？

Posted 2023-02-18

【中文标题】如何在 Dash 应用程序中创建带有均线的条形图？

【英文标题】：How to create a bar chart with a mean line in the Dash app?

【发布时间】：2020-03-26 00:01:21

【问题描述】：

您好，有人可以提供一个代码示例，说明如何在 Dash 中创建带有均线的条形图。

我设法创建了一个条形图，但我不知道如何通过回调函数输出将跟踪添加到现有 dcc.Graph。

非常感谢。

这是图表外观的示例：

以下是我尝试过的一些代码 sn-ps：

    html.Div([
        dcc.Graph(id='surprice_pct_last_month1'),
    ],style='width': '48%', 'display': 'inline-block'),

和

@app.callback(
     dash.dependencies.Output('surprice_pct_last_month2', 'figure'),
    [dash.dependencies.Input('currency2', 'value')])

def update_surprise_last_month2(currency2):

    output = calendar[calendar.Currency == currency2]

    output = output.groupby('Event').last()
    output = output.dropna()
    output1 = output[(output.Surprise_Pct < 400) & (output.Surprise_Pct > -400)]
    output2 = output[(output.Surprise_Pct > 399) | (output.Surprise_Pct < -399)]


    output['Mean'] = output.Surprise_Pct.mean()
    output['Median'] = output.Surprise_Pct.median()
    #output2['Mean'] = output2.Surprise_Pct.mean()
    #output2['Median'] = output2.Surprise_Pct.median()

    data = []
    trace_data = go.Bar(x=list(output.index),
                        y=list(output.Surprise_Pct))
    data.append(trace_data)
    layout = 'title':'Monthly Surprises - '.format(currency2)

    return 
        'data':data,
        'layout': layout
    

【问题讨论】：

你尝试了什么？你有一些演示代码和测试数据吗？

我使用 pandas 创建了一个 DataFrame，用于格式化数据和破折号。就是这样。

【参考方案1】：

这是你需要的吗？

import plotly.graph_objects as go
import random

y = [random.randrange(-200,200) for _ in range(80)]
mean = sum(y) / len(y)
fig = go.Figure([go.Bar(x=list(range(len(y))), y=y)])
fig.add_shape(
        go.layout.Shape(
            type="line",
            x0=-.5,
            y0=mean,
            x1=len(y)-.5,
            y1=mean,
            line=dict(
                color="Orange",
                width=4,
                dash="dash",
            ),
    ))
fig.show()

PS：This online example 暗示 data 只是一个字典列表。因此，为了让 Dash 能够正常工作，我建议：

tracedata1 = go.Bar(x=x, y=y)
tracedata2 = go.layout.Shape(type="line", ...)
data.append(trace_data1)
data.append(trace_data2)

【讨论】：

对不起，我想在 Dash 应用程序中构建它。我更改了标题以更好地说明这一点。不过谢谢！

你不应该只在代码中使用trace_data = go.Bar(...) 和trace_data.add_shape(go.layout.Shape(type="line", .....)) 吗？

嗯有一个错误：酒吧没有属性add_shape。我是怎么理解的

我稍微调整了你的建议，效果很好。我没有意识到的是，在数据字典中我已经可以指定图表的类型。不知何故，我认为我必须在布局部分执行此操作。谢谢约翰！

【参考方案2】：

根据 JohanC 的建议，我想出了如何使用 Dash 和 Plotly。 我没有意识到可以简单地将另一个字典添加到数据列表中，并在字典中指定数据应显示为哪种类型的图表。

@app.callback(
     dash.dependencies.Output('surprice_pct_last_month1', 'figure'),
    [dash.dependencies.Input('currency1', 'value')])

def update_surprise_last_month1(currency1):

    output = calendar[calendar.Currency == currency1]

    output = output.groupby('Event').last()
    output = output.dropna()
    output1 = output[(output.Surprise_Pct < 400) & (output.Surprise_Pct > -400)]
    output2 = output[(output.Surprise_Pct > 399) | (output.Surprise_Pct < -399)]


    output['Mean'] = output.Surprise_Pct.mean()
    output['Median'] = output.Surprise_Pct.median()
    #output2['Mean'] = output2.Surprise_Pct.mean()
    #output2['Median'] = output2.Surprise_Pct.median()

    data = []
    trace_data = go.Bar(x=list(output.index), y=list(output.Surprise_Pct), name='Surprise in %')

    trace_data2 = 'x': output.index, 'y': output.Median, 'type': 'scatter', 'name': 'Median'
    trace_data3 = 'x': output.index, 'y': output.Mean, 'type': 'scatter', 'name': 'Mean'

    print(output.Median)
    print(output.Mean)

    data.append(trace_data)
    data.append(trace_data2)    
    data.append(trace_data3)

    layout = 'title':'Monthly Surprises - '.format(currency1)

    return 
        'data':data,
        'layout': layout