如何制作 Plotly Indicator 仪表的网格？

Posted 2023-03-29

【中文标题】如何制作 Plotly Indicator 仪表的网格？

【英文标题】：How to make a grid of Plotly Indicator gauges?

【发布时间】：2021-08-27 23:58:33

【问题描述】：

我正在尝试使用 plotly 在网格布局中排列 gauges（为我们提供一个 Streamlit 仪表板，显示一组团队的 SLO 仪表）。

我不能使用子图，因为它们与指标不兼容：

ValueError: Trace type 'indicator' is not compatible with subplot type 'xy' at grid position (1, 1)
See the docstring for the specs argument to plotly.subplots.make_subplots for more information on subplot types

在网格中排列仪表指示器的最优雅（最少代码）方式是什么？

【问题讨论】：

您可以对非 xy 网格使用子图，需要提供适当的参数。编辑您的问题以包含可重复的示例。如果没有更多上下文，我无法开始回答

@quantoid 提供的建议对您有何帮助？

【参考方案1】：

已合成数据以匹配您所描述的内容 subplots() 可以使用，subplot types 已使用

列表推导

来构建此需求 显然这个例子需要更多的美化，标题是重叠的标尺

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd

# a bit of data to generate guages from...
df = pd.DataFrame("team":["sprint 1", "sprint 2", "qa"],"backlog":[45,55,22],"defects":[23,44,33]).set_index("team")

# need to define types of subplots...
fig = make_subplots(
    rows=len(df),
    cols=len(df.columns),
    specs=[["type": "indicator" for c in df.columns] for t in df.index],
)

for r, team in enumerate(df.index):
    for c, measure in enumerate(df.columns):
        fig.add_trace(
            go.Indicator(mode="gauge+number", value=df.loc[team, measure], title="text":f"team - measure"),
            row=r + 1,
            col=c + 1,
        )

fig.update_layout(margin="l": 0, "r": 20, "t": 50, "b": 0)

【参考方案2】：

go.Indicator 是一个gauge chart 并有一个特殊的属性domain，通过在[0, 1] 之间指定x and y，您可以将指标放置在图形对象中。看看Indicators in Python 这个例子：

情节

完整代码：

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Indicator(
    value = 200,
    delta = 'reference': 160,
    gauge = 
        'axis': 'visible': False,
    domain = 'row': 0, 'column': 0))

fig.add_trace(go.Indicator(
    value = 120,
    gauge = 
        'shape': "bullet",
        'axis' : 'visible': False,
    domain = 'x': [0.05, 0.5], 'y': [0.15, 0.35]))

fig.add_trace(go.Indicator(
    mode = "number+delta",
    value = 300,
    domain = 'row': 0, 'column': 1))

fig.add_trace(go.Indicator(
    mode = "delta",
    value = 40,
    domain = 'row': 1, 'column': 1))

fig.update_layout(
    grid = 'rows': 2, 'columns': 2, 'pattern': "independent",
    template = 'data' : 'indicator': [
        'title': 'text': "Speed",
        'mode' : "number+delta+gauge",
        'delta' : 'reference': 90]
                         )

对于那些喜欢详细研究这些东西的人：

| 'domain' 属性是 Domain |那 可以指定为：| - 一个实例 :class:plotly.graph_objs.indicator.Domain | - 一个字典 将被传递的字符串/值属性 |到域 构造函数 | |支持的字典属性：| |专栏 |如果有布局网格， 使用域 |网格中的这一列 该指标|痕迹 。 |行 | 如果有布局网格，请使用 | 的域。这 此指标跟踪的网格中的行。 | x | 设置该指标的水平域 |痕迹 （在地块分数中）。 |是 |设置 该指标的垂直域 |跟踪（在情节 分数）。