参考链接: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,即新增点时包含默认动画效果的,这个参数也可以传入包含 durationeasing 的对象形式,详细参考动画相关配置。

因为需要同时返回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. Qt 开发程序后的公布问题

    Qt 开发程序后的公布问题 Qt 是一套跨平台 C++ 图形用户界面应用程序开发框架,利用它能够很方便的开发各种类型的应用程序.可是随着 Qt 的发展.功能越来越强大,公布时须要文件也越来越多.公布时 ...

  2. LLDB 常用命令

    dump: memory read --force --outfile [文件名] --binary [start_address] [end_address] 查找函数地址: 对于有调试符号的这样使 ...

  3. jquery 推断checkbox 是否选中

    这是一个蛋疼的节奏.曾经写的代码如今失效了. jquery 推断checkbox 是否被选中,刚開始我是这样写的,并且没问题 $("#ziduana").attr("ch ...

  4. Codeforces Round #271 (Div. 2) D.Flowers DP

    D. Flowers   We saw the little game Marmot made for Mole's lunch. Now it's Marmot's dinner time and, ...

  5. eclipse.ini启动参数配置的解析及方法

    原文地址 - http://www.uzzf.com/news/18444.html 1.先了解下JVM内存管理机制,JVM内存分为堆内存和非堆内存 2.JVM内存限制 首先JVM内存限制于实际的最大 ...

  6. Ballot evaluation

    http://acm.hdu.edu.cn/showproblem.php?pid=2986 题意很简单,主要是要处理精度,最手残的是把单词拼写错了... #include <stdio.h&g ...

  7. js:正则表达

    一:正则表达对象方法 1:compile()方法   //编译正则表达式 实例:在字符串中全局搜索“man”,并用“person”替换,然后通过compile()方法,改变正则表达式,用person替 ...

  8. [Apple开发者帐户帮助]八、管理档案(2)创建临时配置文件(iOS,tvOS,watchOS)

    创建临时配置文件以在设备上运行您的应用程序而无需Xcode.在开始之前,您需要一个App ID,一个分发证书和多个注册设备. 有关完整的临时配置文件工作流程,请转到Xcode帮助中的分发到已注册设备( ...

  9. Java一维数组二维数组详解API

    所谓数组,是有序的元素序列. 若将有限个类型相同的变量的集合命名,那么这个名称为数组名.组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量.用于区分数组的各个元素的数字编号称为下标 ...

  10. centos源更新

    .备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup .下载新的CentOS-Base.r ...