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

【问题标题】：How to make a grid of Plotly Indicator gauges?如何制作 Plotly Indicator 仪表的网格？
【发布时间】：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 提供的建议对您有何帮助？

标签： python plotly gauge streamlit

【解决方案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 |
设置该指标的水平域 |痕迹（在地块分数中）。 |是 |设置该指标的垂直域 |跟踪（在情节分数）。

【讨论】：