Plotly.py 在堆疊條形圖上使用離散顏色數據的錯誤，自定義數據在 hover 文本中

Question

我有一個 Pandas DataFrame, df ，我用它來填充 Plotly 條形圖。 為了舉例，讓我們定義df如下：

import pandas, numpy
import plotly.express as px

df = pandas.DataFrame.from_dict(
    {
        "x": ["John Cleese", "Eric Idle", "Michael Palin", "Eric Idle"],
        "y": [7, 10, 3, 8],
        "colour": ["0", "0", "0", "1"],
        "a": [1, 2, 3, 4],
        "b": [1, 4, 9, 16],
        "c": [1, 8, 27, 64]
    }
)

並創建從這些數據派生的條形圖

fig = px.bar(df, x="x", y="y", color="colour", barmode="stack")

my_customdata = numpy.transpose(numpy.array([df["a"], df["b"], df["c"]]))

fig = fig.update_traces(
    patch={
        "customdata": my_customdata,
        "hovertemplate": "x: %{x}, y: %{y}, a: %{customdata[0]}, b: %{customdata[1]}, c: %{customdata[2]}<extra></extra>"
    },
    overwrite=True
)
fig.update_layout(
    xaxis={"categoryorder": "total ascending"}
)
fig.show()

該錯誤出現在紅色堆疊條的 hover 文本中。 您會注意到customdata文本中的x和y數據是正確的，但自定義數據產生的數據不是！

有趣的是，只有當傳遞給px.bar()的color參數的Pandas.Series object 由字符串數據（即離散顏色數據）組成時，才會出現此錯誤。 如果在上面的代碼中我改為設置df.colour = [0, 0, 0, 1] （使用整數表示連續的顏色數據，請注意顏色條），則會創建以下圖表：

我的項目需要使用離散顏色數據，是否有解決此錯誤的方法？

最初在https://community.plotly.com/t/bug-using-bar-chart-categoryorder-and-customdata/43925?fbclid=IwAR2yKnSgedDjDmIGe3vhd8GPiQ_DFFAGehrq6G4Wl80iJST3Psn6kkzIs8 詢問

隨后在https://github.com/plotly/plotly.py/issues/2716詢問

Answer 1

事實證明解決方案相對簡單，是我的錯而不是源代碼本身的問題（哦，認為這不是我的錯的狂妄自大！）

我的代碼崩潰的原因

在運行px.bar()時， plotly.express創建一個plotly.graph_objs.Figure 。圖 object 包含兩個Bar對象，而不是一個。 然后，當調用customdata fig.update_traces()時，自定義數據將應用於作為fig子對象的所有Bar對象。 Red Eric Idle 是原始 DataFrame 的第 4 個值，但是fig.update_traces()不關心 Red Eric Idle曾經在哪里 - 它只知道現在它是第二個Bar object 的一部分。事實上，Red Eric Idle 是此Bar的第一個數據點 object，因此愉快地使用customdata[0][n] 、 customdata[1][n] 、 customdata[2][n]創建懸停文本數據，其中n=0 （第一個值），而不是像我預期的那樣使用n=3 （第四個值）。

這就是為什么 Red Eric Idle 的 hover 文本包含"a: 1, b: 1, c: 1" ，而不是"a: 4, b: 16:, c: 64" 。

解決方案

解決方案非常簡單。 由於 Plotly 圖在完成運行px.bar()后“忘記”了原始 DataFrame 中每個點的數據應該為 go 的位置，我們只需在每個數據點忘記之前（即在px.bar()電話. 只需更換

fig = px.bar(df, x="x", y="y", color="colour", barmode="stack")
my_customdata = numpy.transpose(numpy.array([df["a"], df["b"], df["c"]]))
fig = fig.update_traces(
    patch={
        "customdata": my_customdata,
        "hovertemplate": "x: %{x}, y: %{y}, a: %{customdata[0]}, b: %{customdata[1]}, c: %{customdata[2]}<extra></extra>"
    },
    overwrite=True
)

和

fig = px.bar(
    df, x="x", y="y", color="colour", barmode="stack", custom_data=["a", "b", "c"]
)
fig = fig.update_traces(
    patch={
        "hovertemplate": "x: %{x}, y: %{y}, a: %{customdata[0]}, b: %{customdata[1]}, c: %{customdata[2]}"
    },
    overwrite=True
)

嘿 presto，Red Eric Idle 突然有了 hover 文本，其中包含4, 16, 64而不是1, 1, 1 ：

首先，這也是更簡潔的代碼。 在原始的 Plotly 示例文檔中，我並不明顯可以在custom_data模塊中像這樣分配plotly.express 。

為什么連續顏色數據沒有發生這種情況

但是，當我們設置df.colour = [0, 0, 0, 1]時，為什么這種奇怪的行為 go 消失了？

原因是當px.bar()傳入連續的顏色數據時，它只為每個圖形創建一個Bar object。 在這種情況下， Bar中的每個數據點都會記住其在 DataFrame 中的行customdata ，因此自定義數據的分配就像一個魅力。