Mini-Graph-Card 图表状态显示优化技巧：隐藏数值但保留时间戳

2025-06-24 08:06:15作者：廉皓灿Ida

在智能家居数据可视化中，Mini-Graph-Card 因其精美的设计风格和灵活的配置选项受到广泛欢迎。本文将深入探讨一个典型场景下的显示优化方案：如何隐藏图表状态值同时保留悬停时间戳功能。

场景需求分析

对于二进制传感器（如门窗开关、人体感应等），其状态通常只有两种明确值（开/关、有/无）。这种情况下：

图表本身已能清晰展示状态变化
显示具体状态值会占用额外空间且信息冗余
但用户仍需要查看具体事件发生时间

技术实现方案

基础配置要点

通过以下配置组合实现基本效果：

show:
  state: true  # 必须启用状态显示才能触发时间戳
  graph: bar   # 建议使用柱状图显示二进制状态
  labels: false # 关闭冗余标签

关键CSS覆盖技巧

使用card-mod组件覆盖默认样式：

card_mod:
  style: |
    span.state__value {
      display: none;  # 隐藏状态值显示区域
    }

完整配置示例

type: custom:mini-graph-card
entities:
  - entity: binary_sensor.example
    color: "#5ef6ff"
line_width: 3
hours_to_show: 1
points_per_hour: 60
lower_bound: 0.3  # 隐藏非活跃状态点
upper_bound: 1.0  # 固定Y轴范围
aggregate_func: max  # 确保只显示明确状态
show:
  graph: bar
  state: true
  icon_adaptive_color: true
  labels: false
state_map:  # 状态映射（可选）
  - value: "off"
    label: "空闲"
  - value: "on"
    label: "触发"
animate: true  # 启用动画效果
height: 40  # 紧凑高度
card_mod:
  style: |
    span.state__value {
      display: none;
    }