使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)

参考链接：https://www.highcharts.com.cn/docs/ajax

参考链接中的示例代码是使用php写的，这里改用python写。

 

需要注意的地方：

1.接口返回的数据格式，这个需要根据Ajax请求代码而定，是一个数值，还是一个数组。

2.js中Ajax的写法，请求路径，请求返回的数据格式等。

 

前一篇文章是服务端直接给html页面传递数据，这篇文章采用Ajax的方式传递数据，推荐使用这种。

大致思路时打开网页，先出现图表框架，然后使用Ajax的方式往服务端请求数据，然后在图表中渲染出来，进而实现动态渲染图表数据

代码结构如下，采用最简单的Flask框架形式：

1.ajax_demo.py

import random
import time

from flask import Flask, render_template,jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')


@app.route('/get/')
def get():
    x = int(time.time()) * 1000
    y = random.randint(0, 100)
    b= [x,y]
    return jsonify(b)


if __name__ == '__main__':
    app.run(debug=True)

2..index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个 Highcharts 图表</title>
    <!-- 引入 jquery.js -->
    <script src="static/jquery-3.3.1.min.js"></script>
    <!-- 引入 highcharts.js -->
    <script src="static/highcharts-7.0.3.js"></script>


</head>
<body>

<!-- 图表容器 DOM -->
<div id="container" style="min-width:500px;height:500px"></div>

<script src="static/a.js"></script>
</body>
</html>

3.a.js

 1 var chart = null; // 定义全局变量
 2 $(document).ready(function () {
 3     chart = Highcharts.chart('container', {
 4         chart: {
 5             type: 'spline',
 6             events: {
 7                 load: requestData // 图表加载完毕后执行的回调函数
 8             }
 9         },
10         title: {
11             text: 'Live random data'
12         },
13         xAxis: {
14             type: 'datetime',
15             tickPixelInterval: 150,
16             maxZoom: 20 * 1000
17         },
18         yAxis: {
19             minPadding: 0.2,
20             maxPadding: 0.2,
21             title: {
22                 text: 'Value',
23                 margin: 80
24             }
25         },
26         series: [{
27             name: '随机数据',
28             data: [],
29         }]
30     });
31 
32 
33 });
34 
35 /**
36  * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
37  * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
38  */
39 function requestData() {
40     $.get({
41         url: '/get/',
42         'success': function (point) {
　　　　　// console.log(point); // point为请求接口返回的数据 Array [ 1551065494000, 82 ] 
43             var series = chart.series[0],
44                 shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
45 
46             // 新增点操作
47             //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
48             chart.series[0].addPoint(point, true, shift);
49 
50             // 一秒后继续调用本函数
51             setTimeout(requestData, 1000);
52         },
53         cache: false
54     });
55 }

效果如图，每秒刷新一下数据生成图表：

 

代码分析：

1. a.js

chart.series[0].addPoint()

链接：https://api.hcharts.cn/highcharts#Series.addPoint

addPoint(Object options, [Boolean redraw], [Boolean shift], [Mixed animation])

在图表渲染完毕后对数据列进行新增点操作。新增的点可以是最后的点，也可以给定 X 值来放置在对应的位置（最开始，中间位置，取决于 x值）

参数

  • options: Number|Array|Object
    数据点的配置，可以是单个数值，表示数据点的 y值；也可以是一个数组，包含 x 和 y 值；还可以是一个对象，包含详细的数据点配置，详细的配置见 series.data。
  • redraw: Boolean
    默认是 true，是否在操作完毕后对图标进行重绘操作。 当需要增加多个点时，强烈建议将 redraw 设置为 false，并在所有操作结束后手动调用 chart.redraw() 来对图表进行重绘操作。
  • shift: Boolean
    默认是 false，当此属性为 true 时，新增点的同时会删除数据列中的第一个点（即保持数据列中数据点的总数不变）。在检测图表中这个属性非常有用。
  • animation: Mixed
    默认是 true，即新增点时包含默认动画效果的，这个参数也可以传入包含 duration 及 easing 的对象形式，详细参考动画相关配置。

因为需要同时返回x 和 y 值，所有从接口返回的数据需要是一个数组形式，也即是用中括号形式

 

从返回接口获取到的数据会自动往数据点填充数据数据，也就是从/get/获取到的数据会自动往图标框架中的data：[]中填充，图表这些js代码不需要修改。

 

2.ajax_demo.py

数据接口返回的数据是 JSON 对象的形式，所以/get/路径需要返回一个json数组形式，构造的变量b为列表形式，再使用jsontify()函数返回即可。

3.index.html

没啥可说的，无非是一些js引用之类的，注意引用的先后顺序

 

posted @ 2019-02-25 11:27  哈喽哈喽111111  阅读(2171)  评论(0)  编辑  收藏  举报