最近一段时间在通过跳绳来锻炼身体,并将每次跳绳的数据记录下来。为了更好的展示数据,所以想通过图表的方式将跳绳数据呈现出来。如下图是跳绳数据样本。
网上查了有很多实现数据可视化的方式,尝试后选择使用相比较(个人认为)简单的方式,即采用JavaScript的ECharts可视化库来实现数据的图表展示。具体逻辑为通过html+ECharts编写数据可视化界面,通过python的flask库构建web服务,然后通过浏览器查看数据图表。
ECharts库介绍:
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
ECharts 遵循 Apache-2.0 开源协议,免费商用。
ECharts官网地址:https://echarts.apache.org/zh/index.html
ECharts库下载地址:
1,)官网地址:下载 - Apache ECharts
2,)Github地址:https://github.com/apache/echarts/tree/5.4.3/dist
3,)菜鸟教程地址:ECharts 安装 | 菜鸟教程
数据样本采取7月份跳绳数据,制作2个图表,一个折线图用于展示月跳绳数据,一个柱状图用于展示日跳绳数据。
1,)月跳绳数据展示(折线图)
效果展示:
2,)日跳绳数据展示(部分代码)
页面效果展示:
3,)使用flask框架构建web服务
到此,操作基本完成~~~~
具体网页编写可以添加数据总结和网页跳转按钮用于两个页面的切换~~
源码资料获取: