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

栏目: IT技术 · 发布时间: 4年前

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

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

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

update

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

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"></div>
<button id="button">START</button>
<script src="/static/a.js"></script>
</body>
</html>

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

公众号后台回复“ 动态图表 ”获取完整代码哦

近期文章

Python核心技术与实战

Python全栈-60天精通之路

Python网络爬虫与文本数据分析

Python数据分析相关学习资源汇总帖

漂亮~pandas可以无缝衔接Bokeh

综述:文本分析在市场营销研究中的应用

Lazy Prices公司年报内容变动碰上股价偷懒

python 帮你生产指定内容的word文档

2020年B站跨年晚会弹幕内容分析

YelpDaset: 酒店管理类数据集10+G

NRC词语情绪词典和词语色彩词典

Loughran&McDonald金融文本情感分析库

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

公众号后台回复“ 动态图表 ”获取完整代码哦


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Beautiful Code

Beautiful Code

Greg Wilson、Andy Oram / O'Reilly Media / 2007-7-6 / GBP 35.99

In this unique work, leading computer scientists discuss how they found unusual, carefully designed solutions to difficult problems. This book lets the reader look over the shoulder of major coding an......一起来看看 《Beautiful Code》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具