python - 在 Plotly Indicator python 中显示相对和绝对差异
问题描述
我正在尝试使用 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
有什么方法可以同时获得绝对和相对差异。
解决方案
似乎相对和绝对变化是通过 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 跟踪保持清晰:
推荐阅读
- asp.net-core - 将 DateTime 传递给 ASP.net Core API(DateTime 模型绑定)
- visual-studio-2017 - VSTO 4:如何检测 TAB 可见/选择?
- wordpress - 自定义循环上的 Woocommerce 产品变化图像更改
- javascript - 如何在 DOM 中重新设置元素的样式?
- sql - 分区内每个序列的最大日期
- android - 活动结果后此 NavController 未知的导航目的地
- excel - 使用一个键基于多个条件寻求excel公式
- java - java使用代理api声明匿名类
- jenkins - 蚂蚁脚本执行
- gradle - 如何从源代码重新编译 gradle 依赖项?