参考链接：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

 var chart = null; // 定义全局变量

 $(document).ready(function () {

     chart = Highcharts.chart('container', {

         chart: {

             type: 'spline',

             events: {

                 load: requestData // 图表加载完毕后执行的回调函数

             }

         },

         title: {

             text: 'Live random data'

         },

         xAxis: {

             type: 'datetime',

             tickPixelInterval: 150,

             maxZoom: 20 * 1000

         },

         yAxis: {

             minPadding: 0.2,

             maxPadding: 0.2,

             title: {

                 text: 'Value',

                 margin: 80

             }

         },

         series: [{

             name: '随机数据',

             data: [],

         }]

     });

 });

 /**

  * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新

  * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果

  */

 function requestData() {

     $.get({

         url: '/get/',

         'success': function (point) {
　　　　　// console.log(point); // point为请求接口返回的数据 Array [ 1551065494000, 82 ]

             var series = chart.series[0],

                 shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

             // 新增点操作

             //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint

             chart.series[0].addPoint(point, true, shift);

             // 一秒后继续调用本函数

             setTimeout(requestData, 1000);

         },

         cache: false

     });

 }

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

代码分析：

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引用之类的，注意引用的先后顺序

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

  1. 使用Python的Flask框架，结合Highchart，动态渲染图表

    服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...

  2. Python的Flask框架入门-Ubuntu

    全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...

  3. [Python自学] Flask框架 (1) (Flask介绍、配置、Session、路由、请求和响应、Jinjia2模板语言、视图装饰器)

    oldboy:s9day114 参考博客:https://www.cnblogs.com/wupeiqi/articles/7552008.html 一.Flask简介 1.安装Flask pip i ...

  4. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  5. python之Flask框架

    一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...

  6. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  7. 爬虫进阶之Selenium和chromedriver,动态网页（Ajax）数据抓取

    什么是Ajax: Ajax(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意 ...

  8. Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

    参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...

  9. Python使用Flask框架，结合Highchart，自定义图表样式主题

    参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...

随机推荐

  1. 并行运维工具pssh的安装及实战应用

    并行运维工具pssh的安装及实战应用 - CSDN博客 https://blog.csdn.net/field_yang/article/details/68066468

  2. java Map 转 List

    public static void testMapVoid () { Map map = new HashMap(); map.put("a", "a1"); ...

  3. bzoj1018

    线段树分治+并查集 线段树本身就是分治结构,碰见这种带删除修改的题目是再合适不过的,我们对于每段修改区间在线段树上打标记,每次路过就进行修改,叶子结点表及答案,先把所有修改在线段树上标记,然后dfs就 ...

  4. java普通代码块、静态代码块、默认构造方法的执行顺序

    package test; class Parent{ { System.out.println("父类普通代码块"); } static{ System.out.println( ...

  5. CSS伪类对象before和after的实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. [App Store Connect帮助]三、管理 App 和版本（6.1）转让 App：App 转让概述

    当您将某个 App 出售给其他开发者,或想要将其移至其他 App Store Connect 帐户或组织时,您需要转让该 App. 您无需将 App 从 App Store 下架,即可将其所有权转让给 ...

  7. centos7离线安装rabbitmq

    准备工作 一台centos7的机器 erlang-21.3.8.2 RabbitMQ 3.7.15 socat-1.7.3.2-2.el7.x86_64.rpm 开始安装 登录centos ,把上面的 ...

  8. 聪明的kk --- 搜索超时

    二话没说上去搜索 , 果不其然 华丽超时 . #include<stdio.h> #include<string.h> #include<math.h> #incl ...

  9. javascript DOM编程艺术 第10章问题记录

    为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...

  10. 02--SQLite操作一步到位

    SQLite数据库(一):基本操作 SQLite 是一个开源的嵌入式关系数据库,实现自包容.零配置.支持事务的SQL数据库引擎. 其特点是高度便携.使用方便.结构紧凑.高效.可靠. 与其他数据库管理系 ...