github：https://github.com/firehol/netdata
安装：https://github.com/firehol/netdata/wiki/Installation
内存使用说明：https://github.com/firehol/netdata/wiki/Memory-Requirements
配置：https://github.com/firehol/netdata/wiki/Configuration
页面定制：https://github.com/firehol/netdata/wiki/Custom-Dashboards
wiki中提到页面需要一个header：
<!DOCTYPE html> <html lang="en"> <head> <title>Your dashboard</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- here we will add dashboard.js --> </head> <body> <!-- here we will add charts --> </body> </html>
页面定制：
1、页面数据加载和样式的展示都是依赖netdata server服务dashboard.js实现的，如果自定义页面中有多台服务器数据，dashboard从一台中加载一遍即可
2、数据获取依赖两个元素属性，data-netdata=""和data-host="http://netdata:19999/"，data-netdata是监控项名例如“system.cpu”，data-host是数据源服务器
3、如果元素没有自定义样式，netdata会默认选择监控项的样式
4、数据样式data-chart-library默认是dygraph（区域图），还有表盘样式easypiechart和gauge等
5、自定义样式有data-after=""/data-before=""时间区域，长宽高、最大值等，参考wiki即可
下面是两台虚拟机的自定义页面代码
<!DOCTYPE html> <html lang="en"> <head> <title>Your dashboard</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- here we will add dashboard.js --> <script type="text/javascript" src="http://192.168.1.113:19999/dashboard.js"></script> <script type="text/javascript" src="http://192.168.1.114:19999/dashboard.js"></script> </head> <body> <!-- here we will add charts --> <div data-netdata="system.cpu" data-chart-library="gauge" data-host="http://192.168.1.113:19999/" data-title="113CPU" data-units="%" data-gauge-max-value="100" data-width="18%" data-after="-420" data-points="420" data-colors="#22AA99" role="application" class="netdata-container" style="width: 18%; height: 164.5px;"></div> <div data-netdata="system.cpu" data-chart-library="gauge" data-host="http://192.168.1.114:19999/" data-title="114CPU" data-units="%" data-gauge-max-value="100" data-width="18%" data-after="-420" data-points="420" data-colors="#22AA99" role="application" class="netdata-container" style="width: 18%; height: 164.5px;"></div> <div class="netdata-group-container" id="submenu_system_load" style="display: inline-block; width: 100%"> <div data-netdata="system.load" data-chart-library="dygraph" data-host="http://192.168.1.113:19999/" data-title="113 CPU LOAD" data-after="-1800" data-before="1800" data-height="120px"></div> </div> <div class="netdata-group-container" id="submenu_system_load" style="display: inline-block; width: 100%"> <div data-netdata="system.load" data-chart-library="dygraph" data-host="http://192.168.1.114:19999/" data-title="114 CPU LOAD" data-after="-1800" data-before="1800" data-height="120px"></div> </div> </body> </html>
如果出现页面样式或js不兼容，可以调整dashboard.js中的引用。
页面如下
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？