【问题标题】:Plotly Dash bar chart with dynamically changing bar width (or dynamically changing graphing frequencies)Plotly Dash 条形图具有动态变化的条形宽度(或动态变化的图形频率)
【发布时间】:2021-09-08 16:37:19
【问题描述】:

我有一个使用 Plotly Dash 制作的条形图,如下所示。我有从 2006 年到现在(2021 年)的每日数据,这使得条形宽度非常小。我想知道在较大的时间范围内(Y2006-Y2021)查看时是否有任何方法可以绘制和显示较低的频率图,但在较小的时间范围内(例如,2020 年 3 月至 2020 年 6 月)显示详细的较高频率图。

我现在能想到的解决方案是在绘图之前对 Pandas 中的数据进行预处理,但是当我放大时它不会动态变化。如何绘制具有变化图形频率的动态图形?下面是我的代码。

df_data = df_data.dropna(subset=['date'])
    df_data = df_data.groupby(['date'])[
        ['mean_s', 'positive', 'negative']].mean().reset_index().sort_values('date')

fig = go.Figure()
fig.add_trace(go.Bar(
        x=df_data['date'],
        y=100 * (df_data['positive']) / (df_data['positive'] + df_data['negative']),
        base=0,
        name='Positive',
        marker_color=colors['pos1']
        ))
fig.add_trace(go.Bar(
        x=df_data['date'],
        y=100 * (df_data['negative']) / (df_data['positive'] + df_data['negative']),
        base=-100 * (df_data['negative']) / (df_data['positive'] + df_data['negative']),
        name='Negative',
        marker_color=colors['neg1']
        ))```

【问题讨论】:

    标签: python charts plotly data-visualization plotly-dash


    【解决方案1】:

    鉴于您的要求是放大/与数据交互,明确的答案是rangeslider

    import plotly.graph_objects as go
    import pandas as pd
    import numpy as np
    
    s = 365 * 15
    df = pd.DataFrame({"date": pd.date_range("1-jan-2008", periods=s),
                       "positive": np.random.uniform(0, 20, s),
                       "negative": np.random.uniform(0, -5, s),})
    
    go.Figure([
        go.Bar(x=df["date"], y=df["positive"], name="positive", marker_color="green"),
        go.Bar(x=df["date"], y=df["negative"], name="negative", base=0, marker_color="red"),
        ]).update_layout(
        barmode="stack",
        xaxis={
            "range": [df.iloc[-200]["date"], df["date"].max()],
            "rangeslider": {"visible": True},
        },
        margin={"l": 0, "r": 0, "t": 0, "r": 0},
    )
    

    【讨论】:

    • 谢谢 Rob,但是当我放大或缩小时,rangeslider 似乎并没有改变条形宽度。我希望我的条形宽度保持在一定范围内,以便在放大/缩小时它看起来不会太薄或太厚。有什么想法吗?
    • 他们肯定会... rangeslider 必须进行交互,1) 窗口位置,左右拖动的位置 2) 窗口大小,左侧和拖动手柄的位置对 - 这肯定会改变条形的大小,当你缩小窗口时会变宽,当你变宽时会变窄
    • 也许我不清楚。我会这样说。即使放大或缩小,我也希望条形宽度看起来相同。也许让它自动计算这些条形的平均值以使图形具有均匀的宽度。如果条形宽度太窄并且有一百万条条形,它会变得非常缓慢,并且图表在视觉上不是很吸引人。放大时,如果条形宽度太宽,IMO 在视觉上也没有吸引力。我想知道是否有任何功能可以完成这项工作。
    • 在带有 rangeslider 的折线图上我确实在 dash 中使用回调来更改 y- 上的 *range轴,使其与窗口匹配。通过设置 x 轴范围,可以使用相同的技术来保持条形宽度