在 Plotly Indicator python 中显示相对和绝对差异答案

【问题标题】：Show both relative and absolute difference in Plotly Indicator python在 Plotly Indicator python 中显示相对和绝对差异
【发布时间】：2021-04-27 15:17:58
【问题描述】：

我正在尝试使用 plotly.graph_objs.Indicator 来显示输出。

go.Indicator(mode = "number+delta", value = 200,
             number = {'font': {'size': 30}},
             title = {'text': 'HEAD', 'font':{'size':20, 'color':'green'}},
             domain = {'x': [0, 1], 'y': [0, 1]},
             delta = {'reference':300, 'relative':False})

这里如果我通过 relative=True，将显示相对差异，例如。 30%。

如果我通过 relative=False，将显示绝对差异，例如。 -20

有什么方法可以同时获得绝对和相对差异。

【问题讨论】：

您希望增量符号同时显示绝对差异和相对差异吗？或者您是否可以将相对差异作为绝对差异旁边的注释？
嗨@DerekO，理想的情况是可以选择是否所有三个都出现或部分出现。但是现在，如果我们有任何技巧可以仅显示没有符号的相对和绝对差异，即使这样也可以，因为符号可以通过红色/绿色来通知。

标签： python plotly plotly-dash

【解决方案1】：

看来相对和绝对的变化是通过go.Indicator方法在内部计算出来的（也就是说你不能自定义要在delta符号旁边显示的文本），而且你必须在相对或绝对之间进行选择更改以显示。

最简单的解决方案是添加文本注释。但是，独立文本不是 graph_object，而是在图形上呈现。这意味着文本可以与图中的其他图形对象重叠。

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Indicator(
    mode = "number+delta", 
    value = 200,
    number = {'font': {'size': 30}},
    title = {'text': 'HEAD', 'font':{'size':20, 'color':'green'}},
    domain = {'x': [0, 1], 'y': [0, 1]},
    delta = {'reference':300, 'relative':False})
)

fig.add_annotation(x=0.5, y=0.4, text="-30%", font=dict(color="red"), showarrow=False)

fig.show()

该图在相当大的浏览器窗口中看起来不错：

但是当你调整浏览器窗口的大小时，文本注释会与丑陋的 go.Indicator 对象重叠：

一个更好但更老套的解决方案是添加三个不同的 go.Indicator 对象作为跟踪：前两个 go.Indicator 对象将显示相对和绝对变化，但我们会将数字的字体颜色设置为背景颜色，以便它们不可见。然后第三个 go.Indicator 对象添加数字 200 和标题 HEAD 而不显示增量。最后一件事是相应地设置每个 go.Indicator 对象的域，以便它们在您调整浏览器窗口大小时不会重叠。

您可以调整每个跟踪的域，以使您更接近您正在寻找的结果。

fig = go.Figure()

# the first two traces are just the delta with the value set to the background color
fig.add_trace(go.Indicator(
    mode = "number+delta", 
    value = 200,
    number = {'font': {'size': 30, 'color':'rgb(255,255,255,0)'}},
    domain = {'x': [0, 0.8], 'y': [0, 0.8]},
    delta = {'reference':300, 'relative':False})
)

fig.add_trace(go.Indicator(
    mode = "number+delta", 
    value = 200,
    number = {'font': {'size': 30, 'color':'rgb(255,255,255,0)'}},
    domain = {'x': [0.2, 1], 'y': [0, 0.8]},
    delta = {'reference':300, 'relative':True})
)

## this adds the title and value
fig.add_trace(go.Indicator(
    mode = "number", 
    value = 200,
    number = {'font': {'size': 30}},
    title = {'text': 'HEAD', 'font':{'size':20, 'color':'green'}},
    domain = {'x': [0, 1], 'y': [0, 1]})
)

fig.show()

这是带有大浏览器窗口的图形：

当您调整浏览器窗口的大小时，go.Indicator 轨迹保持清晰：

【讨论】：

我真的很喜欢你的 hack。同时，如果 dash 开发人员可以在这方面工作，它将为 Indicator 对象添加更多功能。