Flask 结合 Highcharts 实现动态渲染图表

简介: 最近动态图表可以说火爆全网,我们当然可以通过很多第三方工具来实现该功能,既方便又美观。可是作为折腾不止的我们来说,有没有办法自己手动实现一个简易版的呢,答案当然是肯定的,今天我们就先来看一看如何基于 highcharts 完成上面的需求。

Highcharts 简介


Highcharts 系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件,均为纯 JavaScript 编写的 HTML5 图表库,是一个非常完善的图表库。我们可能对于 ECharts 比较熟悉,而 Highcharts 则是一个可以与之比肩的项目。

文档

https://www.highcharts.com.cn/docs

API 文档

https://api.highcharts.com.cn/highcharts

Highcharts 有着非常完善的文档资料,且其 API 也更为丰富,这就大大降低了我们实现功能的难度。

今天我们要用到的功能主要有两个,分别是 series 的 addPoint 和 数据点(Point)的 update


addPoint

image.png

可以看到,addPoint 函数可以在图表渲染完成之后,再进行新增点的操作,通过该函数,我们可以完成曲线图的动态展示效果。


update

image.png

update 函数可以不断的更新数据点,从而实现条形图的变化效果。


动态曲线图


我们创建一个 js 文件,就命名为 a.js 吧,然后先定义两个全局变量,并通过 ajax 来获取后台数据

var chart = null; // 定义全局变量
var data = {};
$(document).ready(function () {
    $.get({
        url: '/get_data/',
        'success': function (point) {
            data = point;
        },
    });
    chart = chartfunc();
    chart.credits.update({
                text: 'Power by zhouluobo',
                href: 'https://www.luobodazahui.top/',
            });
    return data;
});

而上面函数中的函数 chartfunc 就是具体的图表配置信息,如下

function chartfunc(){
    chart = Highcharts.chart('container', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '新型冠状病毒肺炎走势'
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: '确诊人数',
                margin: 80
            }
        },
        series: [{
            name: '每日新增',
            data: []
        },
            {
                name: '累计确诊',
                data: []
            }]
    });
    return chart;
}

图表的配置信息都是最为基本的,根据官方文档完全可以搞定。

接下来,我们编写新增数据点的函数

$('#button').click(function () {
    var req_data = data;
    //具体的参数详见:https://api.hcharts.cn/highcharts#Series.addPoint
    var index=0;
    var handler = setInterval(function () {
        funt();
    },500);
    function funt() {
        if(index<req_data['today'].length){
        index++;
        if(index>=req_data['today'].length){
            clearInterval(handler); //关闭定时
        }
        chart.series[0].addPoint(req_data['today'][index]);
        chart.series[1].addPoint(req_data['total'][index]);
    }
    }
});

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


动态条形图


动态条形图其实也是类似的,在 b.js 文件中,前两段代码一样,对于动态更新数据部分,我们采用 update 函数来实现

$('#button').click(function () {
    var req_data = data;
    var index=0;
    var handler = setInterval(function () {
        funt();
    },500);
    function funt() {
        if(index<req_data['total'].length){
        if(index>=req_data['total'].length){
            clearInterval(handler); //关闭定时
        }
        chart.series[0].data[0].update({
            y: req_data['today'][index]['y']
        });
        chart.series[1].data[0].update({
            y: req_data['total'][index]['y']
        });
        index++;
    }
    }
});

下面就是 Flask 和 数据获取的代码了


Flask 和 数据获取


我们先定义好路由

from flask import Flask, render_template,jsonify
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/bar/')
def bar_chart():
    return render_template('bar.html')

接下来,还是通过如下接口来获取疫情数据

https://c.m.163.com/ug/api/wuhan/app/data/list-total

这个接口在前面的文章中已经讲解过了,这里直接给出解析代码

import requests
@app.route('/get_data/')
def get_data():
    total_list = []
    today_list = []
    ncov_data = {}
    headers = {
        'user-agent': '',
        'accept': ''
    }
    url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total'
    res = requests.get(url, headers=headers)
    data = res.json()['data']['chinaDayList']
    for i in data:
        date = i['date']
        today = i['today']['confirm']
        total = i['total']['confirm']
        today_list.append({'name': date, 'y': today})
        total_list.append({'name': date, 'y': total})
    ncov_data['today'] = today_list
    ncov_data['total'] = total_list
    return jsonify(ncov_data)

最后我们来看看 HTML 文件的代码,其实就是引入 jquery 和 highcharts,然后再创建一个图表容器即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spline Chart</title>
    <!-- 引入 jquery.js -->
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="min-width:500px;height:500px"></div>
<button id="button" class="autocompare">START</button>
<script src="/static/a.js"></script>
</body>
</html>

至此,我们简易版的动态图表就制作完成了,感兴趣的你要不要来尝试一下呢

相关文章
|
4月前
|
移动开发 JavaScript 前端开发
Flask 结合 Highcharts 实现动态渲染图表
Flask 结合 Highcharts 实现动态渲染图表
|
9月前
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
76 0
|
4月前
|
监控 前端开发 UED
Flask SocketIO 实现动态绘图
Flask-SocketIO 是基于 Flask 的一个扩展,用于简化在 Flask 应用中集成 WebSocket 功能。WebSocket 是一种在客户端和服务器之间实现实时双向通信的协议,常用于实现实时性要求较高的应用,如聊天应用、实时通知等,使得开发者可以更轻松地构建实时性要求较高的应用。通过定义事件处理函数,可以实现双向实时通信,为应用提供更加丰富和实时的用户体验。
35 0
Flask SocketIO 实现动态绘图
|
6月前
|
存储 测试技术 网络架构
软件测试|测试平台开发-Flask入门:Flask动态路由
软件测试|测试平台开发-Flask入门:Flask动态路由
35 0
|
8月前
|
数据可视化 前端开发 JavaScript
利用 Flask 动态展示 Pyecharts 图表数据的几种方法
利用 Flask 动态展示 Pyecharts 图表数据的几种方法
|
9月前
|
数据可视化 Python
Python Flask Echarts数据可视化图表实战晋级笔记(3)Blueprint蓝图解决单文件url分发
Python Flask Echarts数据可视化图表实战晋级笔记(3)Blueprint蓝图解决单文件url分发
70 0
|
9月前
|
数据可视化 关系型数据库 MySQL
Python Flask Echarts数据可视化图表实战晋级笔记(2)@app.route装饰器的用法
Python Flask Echarts数据可视化图表实战晋级笔记(2)@app.route装饰器的用法
92 0
|
9月前
|
开发框架 JSON 数据可视化
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
142 1
uiu
|
存储 安全 前端开发
【Flask】总结静态文件及渲染模板的使用
【Flask】总结静态文件及渲染模板的使用
uiu
149 0
|
XML JSON 监控
Flask框架:运用Ajax轮询动态绘图
Ajax是异步JavaScript和XML可用于前后端交互,在之前`《Flask 框架:运用Ajax实现数据交互》`简单实现了前后端交互,本章将通过`Ajax`轮询获取后端的数据,前台使用`echart`绘图库进行图形的生成与展示,后台通过`render_template`方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态监控内存利用率的这个功能。
269 0
Flask框架:运用Ajax轮询动态绘图