绘制图表未显示在 dbc.Container 中。 1 应用程序出现错误，其中没有任何内容

Question

我在应用程序中有一个

dbc.Container

，显示带有基本数据的各种卡片。但我想用

Gauge Charts

替换它们，因为这些卡片看起来很笨重，而且我觉得仪表图会做得更好。

当我最初开始时，我想在

dbc.Card

项目中添加仪表图表。 我从这个SO链接得到了一个初步的想法，并添加了一张示例卡来看看它会是什么样子。但它出现了，如下面的屏幕截图所示。

删除所有格式，我尝试了仪表图表并得到了相同的情况。我还尝试了一个简单的

plotly.express

折线图并具有相同的输出。同时，一张

DCC

甚至一张

DBC

桌子在同一个地方显示得很好。 以下是概述页面的容器：

import pandas as pd
from sqlalchemy import create_engine
from dash import html, dcc
import dash_bootstrap_components as dbc
from datetime import datetime
from conversions import *
import plotly.express as px
import plotly.graph_objects as go

def overview():
    engine = create_engine("sqlite:///greenhouse.db", echo=False)
    with engine.connect() as conn:
        ghdata=pd.read_sql("""select *
                                from
                                    SENSOR_DATA
                                where
                                    MEASURE_DATE = (select
                                                        max(MEASURE_DATE)
                                                    from
                                                        SENSOR_DATA);""", conn)
        wadata=pd.read_sql("""select *
                                from
                                    WEATHER_API_DATA
                                where
                                    MEASURE_DATE = (select
                                                        max(MEASURE_DATE)
                                                    from
                                                        WEATHER_API_DATA);""", conn)
        unit = pd.read_sql("""select UNIT
                                from
                                    SETTING_DATA
                                where
                                    MEASURE_DATE = (select max(MEASURE_DATE) from SETTING_DATA);""", conn).values[0][0]
        units = pd.read_sql(f"""select * from UNITS where UNIT = '{unit}';""", conn).values[0]
    temp_unit = units[2]
    speed_unit = units[1]
    precip_unit = units[3]
    
    if unit == "SI":
        current_gh_temp = convert_to_fahrenheit(ghdata[['TEMPERATURE']].values[0][0])
        min_temp = convert_to_fahrenheit(ghdata[['MIN_TEMP']].values[0][0])
        max_temp = convert_to_fahrenheit(ghdata[['MAX_TEMP']].values[0][0])
        current_wa_temp = convert_to_fahrenheit(wadata[['CURRENT_TEMPERATURE']].values[0][0])
    else:
        current_gh_temp = ghdata[['TEMPERATURE']].values[0][0]
        min_temp = ghdata[['MIN_TEMP']].values[0][0]
        max_temp = ghdata[['MAX_TEMP']].values[0][0]
        current_wa_temp = wadata[['CURRENT_TEMPERATURE']].values[0][0]
    print(current_gh_temp)
    currenttime_card = dbc.Card([
                    dbc.CardHeader("Current Time"),
                    dbc.CardBody([html.H5(f"{datetime.now().replace(microsecond=0)}")])
                    ],
                    outline=True,
        )
    lastmeasuredtime_card = dbc.Card([
                    dbc.CardHeader("Last Measured"),
                    dbc.CardBody([html.H5(f"{ghdata[['MEASURE_DATE']].values[0][0]}")])
                    ],
                    outline=True,
        )
    temp_card = dbc.Card([
                    dbc.CardHeader("Current Temperature"),
                    dbc.CardBody([
                        html.H5(f"{current_gh_temp} {temp_unit}"),
                        dbc.Button("History", color="primary")
                        ]
                     )
                ],
                    outline=True,
        )
    mintemp_card = dbc.Card([
                    dbc.CardHeader("Minimum"),
                    dbc.CardBody([
                        html.H5(f"{min_temp} {temp_unit}"),
                        ]
                     )
                ],
                    outline=True,
        )
    maxtemp_card = dbc.Card([
                    dbc.CardHeader("Maximum"),
                    dbc.CardBody([
                        html.H5(f"{max_temp} {temp_unit}"),
                        ]
                     )
                ],
                    outline=True,
        )
    
    card_grp1 = dbc.CardGroup([currenttime_card, lastmeasuredtime_card])
    card_grp2 = dbc.CardGroup([mintemp_card, temp_card, maxtemp_card])
        
#     temp_guage = html.Div(
#         dcc.Graph(figure=
#                 px.line(
#                     ghdata,
#                     x="MEASURE_DATE",
#                     y=["TEMPERATURE", "MIN_TEMP"]
#                     )
#                 )
#             )
    temp_guage = html.Div(
        dcc.Graph(figure=go.Figure
                  (
                    go.Indicator(
                        mode="gauge+number",
                        value=current_gh_temp,
                        domain={"x": [0,1], 'y':[0,1],},
                        title={"text": f"Temperature ({temp_unit})"}
                        )
                    )
                )
            )
#     temp_guage=dbc.Table.from_dataframe(ghdata[[]])
    return dbc.Container(
        dbc.Col(
            [
                html.Br(),
                dbc.Row(
                    [
                        dbc.Col(
                            [
                                card_grp1,
                            ]
                        )
                    ],
                    justify="center"
                ),
                html.Br(),
                dbc.Row(
                    [
                        dbc.Col(
                            [
                                dbc.Row(card_grp2),
#                                 dbc.Row(card_grp3), # Code removed to get minimal reproducable output
                            ]
                        ),
#                         dbc.Col(card_grp4) # Code removed to get minimal reproducable output
                    ],
                    justify="center"
                ),
                html.Br(),
                dbc.Row(
                    [
                        dbc.Col(
                            [
                                temp_guage
                            ]
                        )
                        ]
                    ),
                ]
            )
        )

返回的项目只是被调用到容器中

app.py

如果有人能够阐明我所缺少的内容，我将不胜感激。 如果需要任何其他数据或信息来帮助回答我的问题，也请告诉我。 预先感谢。

编辑： Derek 要求的样本数据

unit:str = 'METRIC'
units:list = ['METRIC' 'KMPH' '°C' 'CM']
ghdata:pd.DataFrame = [
            {
                "MEASURE_DATE":"2024-07-25 13:40:00",
                "TEMPERATURE":25,"HUMIDITY":33,
                "PHOTORESISTOR_VOLTAGE":0.035,
                "MIN_TEMP":24,
                "MAX_TEMP":25,
                "MIN_HUM":33,
                "MAX_HUM":36,
                "DEVICE_NAME":"PICOW-2"
            }
        ]
wadata:pd.DataFrame = [
            {
                "LATITUDE":39.53,
                "LONGITUDE":-119.76,
                "TIMEZONE":"America\/Los_Angeles",
                "TIMEZONE_ABBR":"PDT",
                "MEASURE_DATE":"2024-08-02 14:00:00",
                "CURRENT_TEMPERATURE":37,
                "CURRENT_HUMIDITY":12,
                "CURRENT_PRECIPITATION":0,
                "CURRENT_WEATHER_CODE":"Overcast",
                "CURRENT_WIND_SPEED":1,
                "CURRENT_WIND_DIRECTION":34,
                "DAILY_WEATHER_CODE":"Overcast",
                "DAILY_TEMPERATURE_MAX":38,
                "DAILY_TEMPERATURE_MIN":18,
                "DAILY_WIND_SPEED_MAX":20,
                "SUNRISE_TIME":"2024-08-02 06:00:00",
                "SUNSET_TIME":"2024-08-02 20:10:00",
                "TEMPERATURE_UNIT":"\u00b0C",
                "HUMIDITY_UNIT":"%",
                "PRECIPITATION_UNIT":"mm",
                "WIND_SPEED_UNIT":"km\/h",
                "WIND_DIRECTION_UNIT":"\u00b0"
            }
        ]

Answer 1

当我把头撞到墙上时，我想，我可以将它克隆到我的工作电脑上，它运行得非常好！经过额外检查，发现我家用电脑的

plotly

文件夹中丢失了一些文件和文件夹！使用

plotly

重新安装了

pip

，我又开始工作了。结束这个问题作为自我回答。