news 2026/6/15 16:15:00

Home Assistant Mini Graph Card 完整安装与使用指南:轻松实现数据可视化

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Home Assistant Mini Graph Card 完整安装与使用指南:轻松实现数据可视化

Home Assistant Mini Graph Card 完整安装与使用指南:轻松实现数据可视化

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

Home Assistant Mini Graph Card 是一款专为 Lovelace 界面设计的简洁且功能强大的图表卡片,能够将传感器数据以直观的图表形式展示,让您的智能家居数据一目了然。

🚀 快速安装方法

方法一:HACS安装(推荐)

HACS(Home Assistant Community Store)是最便捷的安装方式:

  1. 打开Home Assistant,进入HACS面板
  2. 点击"前端"分类,然后点击右下角的"浏览并下载存储库"按钮
  3. 搜索"Mini Graph Card"
  4. 点击"下载此存储库"
  5. 重启Home Assistant

方法二:手动安装

如果您没有使用HACS,可以手动安装:

  1. 从最新版本下载mini-graph-card-bundle.js文件
  2. 将文件复制到您的config/www目录
  3. 添加资源引用(详见下文)

方法三:命令行安装

对于熟悉命令行的用户:

cd config/www wget https://gitcode.com/gh_mirrors/mi/mini-graph-card/releases/download/v0.13.0/mini-graph-card-bundle.js

📋 添加资源引用配置

YAML配置方式

如果您使用YAML配置Lovelace,请在configuration.yaml中添加:

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

图形界面配置

如果您使用图形编辑器:

  1. 确保在用户配置文件中启用了高级模式
  2. 导航到"配置" -> "Lovelace仪表盘" -> "资源"标签
  3. 点击橙色"+"图标
  4. 输入URL/local/mini-graph-card-bundle.js并选择类型"JavaScript模块"

🎯 基础配置教程

单实体图表配置

最简单的配置示例,显示单个传感器的数据:

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

多实体图表配置

同时显示多个传感器的数据:

type: custom:mini-graph-card name: 室内环境 icon: mdi:home entities: - entity: sensor.temperature name: 温度 - entity: sensor.humidity name: 湿度 - entity: sensor.pressure name: 气压

⚙️ 核心配置选项详解

必需配置项

选项名类型说明
typestring必须设置为custom:mini-graph-card
entitieslist一个或多个传感器实体列表

常用可选配置项

选项名类型默认值说明
namestring自定义卡片名称
iconstring设置自定义图标(使用MDI图标)
hours_to_showinteger24显示多少小时的历史数据
heightnumber150设置图表高度
line_widthnumber5设置线条粗细
line_colorstringaccent-color设置线条颜色

显示控制选项

使用show选项来控制显示哪些UI元素:

type: custom:mini-graph-card entities: - sensor.temperature show: name: true icon: true state: true graph: line fill: true points: hover legend: true

🎨 高级配置技巧

动态颜色阈值

根据数值范围动态改变线条颜色:

type: custom:mini-graph-card entities: - sensor.temperature show: labels: true color_thresholds: - value: 0 color: "#3498db" - value: 20 color: "#f39c12" - value: 25 color: "#e74c3c"

柱状图配置

将折线图改为柱状图:

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

双Y轴配置

为不同量级的数据设置双Y轴:

type: custom:mini-graph-card entities: - entity: sensor.temperature name: 温度 - entity: sensor.humidity name: 湿度 y_axis: secondary show: labels: true labels_secondary: true

🔧 实用场景配置

温度监控

type: custom:mini-graph-card entities: - entity: sensor.living_room_temp name: 客厅 - entity: sensor.bedroom_temp name: 卧室 name: 室内温度监控 hours_to_show: 24 line_width: 3

能耗统计

type: custom:mini-graph-card entities: - entity: sensor.daily_energy name: 日能耗 hours_to_show: 168 aggregate_func: max group_by: date show: graph: bar average: true

设备状态监控

type: custom:mini-graph-card entities: - entity: binary_sensor.motion_detector name: 运动检测 hours_to_show: 12 points_per_hour: 60 state_map: - value: "off" label: 无活动 - value: "on" label: 检测到活动

💡 常见问题解决

卡片不显示

  1. 检查资源引用是否正确添加
  2. 确认文件路径是否正确
  3. 重启Home Assistant服务

数据不更新

  1. 检查传感器实体是否正常工作
  2. 确认缓存设置
  3. 清除浏览器缓存

样式异常

  1. 检查配置语法是否正确
  2. 确认缩进格式
  3. 查看浏览器控制台错误信息

📈 最佳实践建议

  1. 合理设置时间范围:根据数据类型选择合适的hours_to_show
  2. 优化显示元素:根据需要显示/隐藏不必要的信息
  3. 使用合适的图表类型:折线图适合连续数据,柱状图适合分类数据

🎊 总结

Home Assistant Mini Graph Card 是一款功能强大且易于使用的数据可视化工具。通过本指南,您应该能够:

  • 顺利完成安装配置
  • 掌握基础使用方法
  • 了解高级配置技巧
  • 解决常见问题

开始使用Mini Graph Card,让您的智能家居数据变得更加直观和易于理解!

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

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 2:05:26

意念操控三维世界!中科院脑机接口突破背后的技术革命

意念操控三维世界!中科院脑机接口突破背后的技术革命 今天刷到一条让我直呼“科幻照进现实”的新闻——12月17日,中科院脑科学与智能技术卓越创新中心在上海宣布,他们的侵入式脑机接口临床试验取得重大突破:一位四肢瘫痪患者仅凭意念,就能操控智能轮椅在小区遛弯,还能指…

作者头像 李华
网站建设 2026/6/15 13:20:08

数字艺术风格化AI创作创意指南:从灵感源泉到个性表达

数字艺术风格化AI创作创意指南:从灵感源泉到个性表达 【免费下载链接】Analog-Diffusion 项目地址: https://ai.gitcode.com/hf_mirrors/ai-gitcode/Analog-Diffusion 你是否渴望突破传统艺术的边界,用AI技术创造出独一无二的视觉语言&#xff1…

作者头像 李华
网站建设 2026/6/15 13:14:32

7、iOS开发中的传感器与音频处理

iOS开发中的传感器与音频处理 1. iOS传感器之磁力计 在iOS开发中,传感器的应用十分广泛,其中磁力计是一个重要的传感器,它用于测量设备周围磁场的强度。在没有强磁场干扰的情况下,磁力计的读数与地球的环境磁场相关,这使得我们可以利用这些读数来确定设备的方向。设备的…

作者头像 李华
网站建设 2026/6/15 9:19:40

数据库连接池容器化部署终极指南:Docker与Podman实战性能对比

夜深人静,线上系统突然告警:"数据库连接池耗尽!"这可能是每个后端工程师的噩梦。在微服务架构中,数据库连接池作为应用与数据库之间的关键桥梁,其容器化部署质量直接影响系统的稳定性和性能表现。今天我们将…

作者头像 李华
网站建设 2026/6/15 13:55:30

24、构建面部识别增强现实应用指南

构建面部识别增强现实应用指南 1. 面部识别应用基础 在开发面部识别增强现实(AR)应用时,有几个关键的技术点和工具需要了解。首先是面部识别的技术选择,常见的有OpenCV、iOS 5 CIDetector Class和Face.com。 OpenCV :这是一个开源的计算机视觉库,用于面部识别时,需要…

作者头像 李华
网站建设 2026/6/15 14:20:25

3步搞定复杂AI流程:可视化编排终极指南

3步搞定复杂AI流程:可视化编排终极指南 【免费下载链接】cube-studio cube studio开源云原生一站式机器学习/深度学习AI平台,支持sso登录,多租户/多项目组,数据资产对接,notebook在线开发,拖拉拽任务流pipe…

作者头像 李华