Home Assistant Mini Graph Card 终极使用指南：快速打造精美数据图表

【免费下载链接】mini-graph-card Minimalistic graph card for Home Assistant Lovelace UI 项目地址: https://gitcode.com/gh_mirrors/mi/mini-graph-card

Mini Graph Card 是专为 Home Assistant Lovelace 界面设计的极简风格图表卡片，能够将传感器数据以优雅的折线图或柱状图形式直观展示。无论是温度、湿度还是其他传感器数据，这款卡片都能帮助您快速创建专业的数据可视化界面。

🚀 快速安装方法

通过 HACS 安装（推荐）

HACS 是 Home Assistant 的社区商店，安装 Mini Graph Card 最简单的方法就是通过 HACS：

1. 在 HACS 中搜索 "Mini Graph Card"
2. 点击安装并重启 Home Assistant
3. 在 Lovelace 编辑器中添加卡片

手动安装步骤

如果您更喜欢手动安装，只需几个简单步骤：

1. 从发布页面下载最新的 mini-graph-card-bundle.js 文件
2. 将文件放入 Home Assistant 的 config/www 目录
3. 添加资源引用到您的配置中

⚙️ 基础配置教程

添加资源引用

在您的 configuration.yaml 文件中添加以下内容：

resources:
  - url: /local/mini-graph-card-bundle.js?v=0.13.0
    type: module

或者通过图形界面添加：

1. 确保用户配置中启用了高级模式
2. 导航到 配置 -> Lovelace 仪表板 -> 资源标签页
3. 点击橙色 (+) 图标，输入 URL 并选择 "JavaScript Module"

📊 卡片配置详解

必需配置项

每个 Mini Graph Card 都必须包含以下两个基本配置：

type: custom:mini-graph-card
entities:
  - sensor.temperature_living_room

个性化定制选项

外观定制：

• name: 设置卡片标题
• icon: 使用 MDI 图标库中的图标
• height: 调整图表高度（默认 150）

数据显示：

• hours_to_show: 显示历史数据的小时数（默认 24）
• points_per_hour: 每小时显示的数据点数量

🎨 实用配置示例

单实体图表

显示单个传感器的简单图表：

type: custom:mini-graph-card
entities:
  - sensor.illumination

多实体对比图表

同时展示多个传感器的数据对比：

type: custom:mini-graph-card
name: 服务器监控
icon: mdi:server
entities:
  - entity: sensor.server_total
    name: 总量
  - sensor.server_sent
  - sensor.server_received

柱状图展示

将折线图切换为柱状图：

type: custom:mini-graph-card
entities:
  - entity: sensor.energy_consumption
name: 能耗统计
show:
  graph: bar

🔧 高级功能配置

动态颜色变化

根据数值变化自动改变线条颜色：

type: custom:mini-graph-card
entities:
  - sensor.sensor_temperature
show:
  labels: true
color_thresholds:
  - value: 20
    color: "#f39c12"
  - value: 21
    color: "#d35400"

双 Y 轴显示

为不同类型的数据设置独立的 Y 轴：

type: custom:mini-graph-card
entities:
  - entity: sensor.verandah
    name: 阳台
  - entity: sensor.lounge
    name: 客厅
  - entity: sensor.kitchen
    name: 厨房
  - color: gray
    entity: input_number.nighttime
    name: 夜间
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary

💡 实用技巧与最佳实践

数据聚合配置

使用不同的聚合函数展示数据特征：

type: custom:mini-graph-card
entities:
  - entity: sensor.outside_temp
    aggregate_func: max
    name: 最高温度
  - entity: sensor.outside_temp
    aggregate_func: min
    name: 最低温度
  - entity: sensor.outside_temp
    aggregate_func: avg
    name: 平均温度

隐藏非必要元素

创建更简洁的图表界面：

type: custom:mini-graph-card
entities:
  - sensor.humidity
show:
  icon: false
  name: false
  state: false

🛠️ 常见问题解决

卡片不显示

• 检查资源引用是否正确添加
• 确认浏览器缓存已清除
• 验证传感器实体 ID 是否正确

数据更新问题

• 调整 update_interval 参数
• 检查传感器数据记录设置

样式兼容性

• 确保 Home Assistant 使用最新版本
• 检查主题变量是否冲突

📈 进阶应用场景

环境监测仪表板

创建包含温度、湿度、光照等环境数据的综合监控界面。

能耗分析图表

通过柱状图展示家庭能耗趋势，帮助优化用电习惯。

设备状态历史

使用 Mini Graph Card 记录和展示智能设备的运行状态变化。

通过以上配置，您可以快速打造出既美观又实用的数据监控界面，让 Home Assistant 的 Lovelace 界面更加专业和直观。

【免费下载链接】mini-graph-card Minimalistic graph card for Home Assistant Lovelace UI 项目地址: https://gitcode.com/gh_mirrors/mi/mini-graph-card