Home Assistant Mini Graph Card 终极使用指南:快速打造精美数据图表
【免费下载链接】mini-graph-cardMinimalistic 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:
- 在 HACS 中搜索 "Mini Graph Card"
- 点击安装并重启 Home Assistant
- 在 Lovelace 编辑器中添加卡片
手动安装步骤
如果您更喜欢手动安装,只需几个简单步骤:
- 从发布页面下载最新的
mini-graph-card-bundle.js文件 - 将文件放入 Home Assistant 的
config/www目录 - 添加资源引用到您的配置中
⚙️ 基础配置教程
添加资源引用
在您的configuration.yaml文件中添加以下内容:
resources: - url: /local/mini-graph-card-bundle.js?v=0.13.0 type: module或者通过图形界面添加:
- 确保用户配置中启用了高级模式
- 导航到 配置 -> Lovelace 仪表板 -> 资源标签页
- 点击橙色 (+) 图标,输入 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-cardMinimalistic graph card for Home Assistant Lovelace UI项目地址: https://gitcode.com/gh_mirrors/mi/mini-graph-card
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考