参考链接：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. FormatString格式大众人全

    FormatString格式大众人全 Posted on 2010-08-12 16:14 moss_tan_jun 阅读(457) 评论(0) 编辑 收藏 格式化日期和数字的字符串经常要用到这个, ...

  2. AD、DNS、DHCP、IIS、WINS的形象定义及关系

    AD-实际是就是一个包括所有信息的数据库,和现实生活中就将其比作派出所,所有的信息都要进入他那的数据库当中(包括人员姓名(计算机名.账号.密码等) DNS就是建立起关联起好记忆的名称,比如你家的位置用 ...

  3. Spark SQL读parquet文件及保存

    import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.sql.{Row, SparkSession} im ...

  4. 【转】Java - printf

    [转自]http://heidian.iteye.com/blog/404632 目前printf支持以下格式:            %c        单个字符            %d     ...

  5. nodejs操作mysql

    var mysql = require('mysql');var pool = mysql.createPool({ host: 'localhost', user: 'root', password ...

  6. python 学习笔记一 （数据结构和算法）

    2018年刚刚过完年,从今天起,做一个认真的技术人.开始进入记笔记阶段. python内置了很多数据结构,list , set,dictionary 1.将序列分解为单独的变量 1.1 通过赋值的方式 ...

  7. Codeforces Round #419

    A Karen and Morning 找最近的回文时间 模拟  往后推 判判就行 //By SiriusRen #include <bits/stdc++.h> using namesp ...

  8. IOS开发 键盘添加工具条 退出 上一项 下一项 简单实现

    首先设置每个 UITextField 的 inputAccessoryView 为UIToolBar : 将所有的 textField 放入一个数组: 设置 UITextField UITextFie ...

  9. Java内存泄漏及对象引用的4种类型

    转自: http://www.cnblogs.com/qq78292959/archive/2011/07/25/2116123.html 总结: 引用分类: 强引用,弱引用,软引用,虚引用.虚引用必 ...

  10. vue-clickoutside d

    js文件 export default { bind(el, binding, vnode) { function documentHandler(e) { if (el.contains(e.tar ...