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

能夠看到，addPoint 函數能夠在圖表渲染完成以後，再進行新增點的操做，經過該函數，咱們能夠完成曲線圖的動態展現效果。

update

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>
複製代碼

至此，咱們簡易版的動態圖表就製做完成了，感興趣的你要不要來嘗試一下呢