打造自己的树莓派监控系统3--canvas.js绘制数据

最新推荐文章于 2022-08-19 21:46:53 发布

原创

最新推荐文章于 2022-08-19 21:46:53 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文是树莓派监控系统的第三部分，作者不满意matplotlib的显示和交互性，转而采用canvas.js进行数据绘制。canvas.js是一款高性能、简单API的JavaScript图表库，支持多种图表类型和交互特性，适合大数据量场景。文中展示了如何在Flask应用中使用canvas.js绘制监控数据。

系列文章：

文章1：打造自己的树莓派监控系统1–CPU监控-matplotlib显示数据
文章2：打造自己的树莓派监控系统2–内存监控-matplotlib显示数据
文章3：打造自己的树莓派监控系统3–canvas.js绘制数据
GitHub仓库:树莓派系统监控–CPU温度监控和内存使用监控

介绍

前面2篇文章都是使用matplotlib画图的,但当数据量较多时matplotlib的显示和交互性不让我满意,所以我使用canvas.js绘图。
canvasjs介绍：JavaScript Charts & Graphs with 10x better performance and a simple API. Integrates easily with popular JS Frameworks like AngularJS, etc. Library comes with 30 different types of charts including line, column, bar, area, spline, pie, doughnut, stacked charts, etc. It supports various interactive features like tooltips, zooming, panning, animation, events, drilldown, exporting and can easily be integrated with various server side technologies like PHP, Ruby, Python, ASP.Net, Node.JS, Java, etc. To top it all off, it can easily render thousands of data-points without any performance lag.

使用canvas.js

flask代码：

@app.route('/', methods=['GET'])
def main():
    temperature = get_temperature()
    mem, MemTotal = get_mem()
    return render_template('index.html', temperature=temperature, mem=mem, MemTotal=MemTotal)