flask+Highcharts：实现新冠肺炎动态渲染图DEMO

最近在思考如何实现web端的动态监控，查了网上资料，发现Highcharts这个工具相对来说可以满足。其中一篇博客文章引起了我的眼球，讲的是使用Highcharts实现动态渲染。博客文章如下：
http://www.imooc.com/article/301554
看了这个博文和对应的API文档，初步学习了flask+Highcharts的使用，大部分引用该博文内容，实现新冠肺炎趋势图表！先上图（动态图不会录制，直接拿最后结果）：

 

 

 1、flask

在app.py定义路由：

 

 

 

2、获取疫情的数据接口：

https://c.m.163.com/ug/api/wuhan/app/data/list-total（转载自上述博客文章）

下图为核心业务代码：

 

 

 3、创建一个js文件，定义两个全局变量，并通过 ajax 来获取后台数据.

 

 图表配置信息代码：

 

 创建一个button按钮进行触发新增数据点

 

在按钮 button 上绑定了 click 事件，在事件中，我们根据后台数据的长度来决定新增数据点的数量。这样，每隔500毫秒，就会新增一个数据点，从而得到动态曲线图的效果 

4、index.html配置

引入 jquery和 highcharts，增加一个图表容器

jquery和highcharts可以用线上资源，我这里jQuery是直接自己网上下载文档放入static文档引入的

 

 

 大概整体流程如上所说，最后直接上代码，帮助大家理解下Highcharts的魅力！

git地址：https://github.com/testPython2018/flaskFeiYan