Mini Graph Card 实现双实体数值显示的自定义方案

背景介绍

Mini Graph Card 是一款流行的 Home Assistant 卡片组件，主要用于展示传感器数据的趋势图表。在实际使用中，用户经常需要同时显示主实体和次实体的当前数值，但默认配置下存在一些显示限制。

问题分析

默认情况下，Mini Graph Card 虽然支持添加多个实体数据，但次实体的当前数值显示存在以下问题：

1. 只能通过 labels_secondary: true 选项显示，且不是最新值
2. 数值显示位置和样式不够理想
3. 无法实现条件式颜色变化等高级效果

解决方案

通过结合 Mini Graph Card 和 Card Mod 插件的功能，可以实现完美的双实体数值显示效果。以下是关键配置要点：

基础配置

首先确保两个实体都正确配置，并为次实体启用状态显示：

entities:
  - entity: climate.thermostat_example
    attribute: current_temperature
    unit: °C
  - entity: climate.thermostat_example
    attribute: temperature
    show_state: true
    unit: °C

布局调整

使用 Card Mod 调整显示布局，将垂直排列改为水平排列，并调整间距：

card_mod:
  style: |
    .states.flex {
      flex-direction: column;
      margin-top: -8px;
    }
    .states--secondary {
      margin-left: 0px !important;
      margin-top: 0px;
    }

条件样式

实现根据温度值变化颜色的效果：

card_mod:
  style: |
    .state.state--small .state__value.ellipsis {
      color: {% set temp = state_attr('climate.thermostat_example', 'temperature') | float %}
              {% if temp <= 20 %}
                green
              {% elif temp > 20 and temp <= 22 %}
                yellow
              {% else %}
                red
              {% endif %} !important;
    }

字体大小调整

分别调整主数值和次数值的字体大小：

card_mod:
  style: |
    .state.state--small .state__value.ellipsis {
      font-size: 12px !important;
    }
    .state.false .state__value.ellipsis {
      font-size: 28px !important;
    }

完整配置示例

type: custom:mini-graph-card
entities:
  - entity: climate.thermostat_example
    attribute: current_temperature
    unit: °C
  - entity: climate.thermostat_example
    attribute: temperature
    show_state: true
    unit: °C
font_size: 75
card_mod:
  style: |
    /* 布局样式 */
    .states.flex {
      flex-direction: column;
      margin-top: -8px;
    }
    .states--secondary {
      margin-left: 0px !important;
      margin-top: 0px;
    }
    /* 条件颜色 */
    .state.state--small .state__value.ellipsis {
      font-size: 12px !important;
      color: {% if state_attr('climate.thermostat_example', 'temperature') | float <= 20 %}green
             {% elif state_attr('climate.thermostat_example', 'temperature') | float <= 22 %}yellow
             {% else %}red{% endif %} !important;
    }
    /* 字体调整 */
    .state.false .state__value.ellipsis {
      font-size: 28px !important;
    }

技术要点

1. 实体配置：确保两个实体使用相同的底层设备，但不同的属性
2. 状态显示：必须为次实体启用 show_state: true
3. 样式覆盖：使用 Card Mod 的样式覆盖能力修改默认布局
4. 条件逻辑：利用 Jinja2 模板实现动态样式

应用场景

这种配置特别适合以下场景：

• 显示当前温度和设定温度
• 同时显示室内和室外温度
• 任何需要对比实时值和目标值的场景

通过这种定制化方案，用户可以获得更加直观和美观的数据展示效果，提升智能家居控制界面的用户体验。