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

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

场景需求分析

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

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

技术实现方案

基础配置要点

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

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;
    }

技术原理详解

1. 状态显示机制：时间戳功能与状态显示绑定，这是组件内置逻辑
2. CSS选择器：通过定位.state__value类精确控制显示区域
3. 空间优化：隐藏状态值后，卡片高度可缩减约30%

进阶优化建议

1. 响应式设计：可添加媒体查询适配不同屏幕尺寸
2. 视觉增强：结合color_thresholds实现状态颜色区分
3. 性能优化：合理设置points_per_hour平衡精度与性能

方案对比

方案	显示状态	显示时间戳	空间占用
默认配置	✔️	✔️	大
完全隐藏	✖️	✖️	小
本方案	✖️	✔️	中

这种方案在美观性、功能性和空间效率之间取得了最佳平衡，特别适合智能家居控制面板等空间受限的场景。通过灵活的CSS定制，用户可以在保持Mini-Graph-Card优雅设计风格的同时，实现个性化的数据显示需求。