0%

一个简单的 vnStat 监控界面

发表于 2019-10-11 更新于 2020-03-07 分类于前端， HTML ， JS 阅读次数： Valine：
本文字数： 747 阅读时长 ≈ 1 分钟

有的时候我们需要做一个简单而漂亮的图表来查看服务器的流量情况，怎么办呢？我们可以使用 VNSTAT-DASHBOARD 来实现。

Demo

项目链接：https://github.com/IITII/VNSTAT-DASHBOARD

使用

以 Ubuntu 为例 (Ctrl C V)

在终端运行以下代码
打开浏览器访问服务器IP，即可查看效果

如果没有数据，可能是因为刚刚才安装 vnstat，vnstat没有收集到足够的数据

sudo apt insall nginx vnstat -y
git clone https://github.com/IITII/VNSTAT-DASHBOARD /var/www/vnstat
cd /var/www/vnstat && git checkout ALLINONE
sed -i "s/root \S\+/root \/var\/www\/vnstat;/g" /etc/nginx/sites-available/default \
&& nginx -t && nginx -s reload \
echo "1 * * * * /usr/bin/vnstat --json > /var/www/vnstat/vnstat.json" \
>> /var/spool/cron/crontabs/`whoami`
crontab -l

一些注意事项

index.html 会自动加载同级目录下的 vnstat.json 来生成图表，若无则否。
你也可以在输入框里面手动输入 vnstat json 数据，数据可以使用 vnstat --json 来生成

FAQ

Q: 图表有的时候回闪烁，BUG？NO。
A: 修改index.html，在 options.tooltips 里面指定 "animation": {"duration": 0} 即可

1. Demo
2. 使用
3. 一些注意事项
4. FAQ