首页 > 解决方案 > 如何添加按钮以更改分组条形图

问题描述

我用 plotly.express 库编写了一个按图分组的条形图。我想向条形图本身添加一个按钮,以便能够更改“y”数据。因此,用户可以按下按钮,根据选择,条形图中只有“y”数据会改变其他所有内容(yaxes_layout、traces_layout、...)保持不变。

在图片中您可以看到正常图表(忽略德语文本没有时间将其全部更改为英语)

正常条形图首次加载

现在,在我按下“Unter 28 Jahren”按钮后,完整的布局应该保持不变,只有条形的高度应该改变。但是当我按下按钮时会发生这种情况

按下按钮后的图表

条形的高度会发生变化,但其他一切也会发生变化。有没有办法只更改 y 数据并保持其他所有内容不变?

我知道我可以在 Dash 中实现它并使用 app.callbacks 但我想在 Plot 本身中实现它。我已经花了几个小时,我正处于放弃的边缘。

一个简单的例子就足够了。

谢谢帮助我:)

代码:

y = "TOTAL_COST_WITH_ONE_TIME_WITH_CREDIT
x = "SPEED"
color = "PROVIDER"

barchart = px.bar(df_u,
                  x = x, 
                  y = y, 
                  color = color,
                  text = y, 
                  labels = {"TOTAL_COST_WITH_ONE_TIME_WITH_CREDIT": "Gesamtkosten (€)", 
                            "PROVIDER":"Anbieter", 
                            "SPEED":"Geschwindikeit",
                            "UNDER_28_YEARS":"Unter 28 Jahren"}, 
                  color_discrete_map = {
                        "1&1" : "#0F2C75",
                        "O2" : "#003145",
                        "Telekom" : "#e10075",
                        "Vodafone" : "#e60000",
                        "Mnet" : "#0090d4"},
                  custom_data = ["PROVIDER", "ONE_TIME_PAYMENT", "TOTAL_COST", "AVG_PRICE_PER_MONTH"],
                 )

barchart.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction="right",
            x=0.7,
            y=1.2,
            showactive=True,
            buttons=list(
                [
                    dict(
                        label="Unter 28 Jahren",
                        method="update",
                        args=[{"y": [df_u[y]]}],
                    ),
                    dict(
                        label="Über 28 Jahren",
                        method="update",
                        args=[{"y": [df_u["TOTAL_COST_O"]]}],
                    ),
                ]
            ),
        )
    ]
)
    

barchart.update_layout(
    title = dict(
        y = 0.9,
        x = 0.5,
        xanchor = "center",
        yanchor = "top",
        font_family = "Arial"
    ),
    barmode="group",
    uniformtext_mode = "show",
    uniformtext_minsize = 8,
    xaxis_title=None,
    bargroupgap = 0.15,
    bargap=0.25,
    plot_bgcolor="rgba(0,0,0,0)",
    paper_bgcolor="rgba(0,0,0,0)",
    font_family="Arial",
    autosize = True
)

barchart.update_xaxes(
    type = "category",
    tickmode = "array",
    tickvals = sorted(df_DSL.SPEED.unique().tolist()),
    ticktext = ["10 Mbit/s", "16 Mbit/s", "50 Mbit/s", "100 Mbit/s", "250 Mbit/s", "1.000 Mbit/s"],
    categoryorder = "array",
    categoryarray = [10, 16, 50, 100, 250, 1000],
    showgrid=False,
    showline=True, 
    linewidth=1, 
    linecolor='black'
)

barchart.update_yaxes(
    ticks = "outside",
    tickwidth = 1,
    showgrid = False,
    tickprefix = "€",
    showline = True, 
    linewidth = 1, 
    linecolor = 'black',
    fixedrange = True,
    range =[0, 2500]
)


barchart.update_traces(
    texttemplate="%{text:.2f}€", 
    textposition="outside",
    #textfont_size = 10,
    textangle = 270,
)

标签: pythonplotly

解决方案


推荐阅读