使用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
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 请求数据接口)的更多相关文章
- 使用Python的Flask框架，结合Highchart，动态渲染图表
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- [Python自学] Flask框架 (1) (Flask介绍、配置、Session、路由、请求和响应、Jinjia2模板语言、视图装饰器)
oldboy:s9day114 参考博客:https://www.cnblogs.com/wupeiqi/articles/7552008.html 一.Flask简介 1.安装Flask pip i ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- 爬虫进阶之Selenium和chromedriver,动态网页（Ajax）数据抓取
什么是Ajax: Ajax(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意 ...
- Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
- Python使用Flask框架，结合Highchart，自定义图表样式主题
参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...
随机推荐
- MICRO SIM卡(SIM小卡)尺寸图及剪卡图解
如今使用MICRO SIM卡的手机越来越多.近期刚刚买了一个手机到手才发现尼马使用的是MICRO SIM卡.再去买剪卡器吧,十几二十块用一次就废了,去营业厅吧.又比較远,懒的出门.怎么办呢,自己剪!这 ...
- LeetCode 788. Rotated Digits (旋转数字)
X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...
- Redis缓存数据库安全加固指导（一）
背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...
- Linux安装MATLAB
Linux下的MATLAB在2013a及以后的版本中,就不再支持32位机了.所以32位Linux系统无法安装2013a及以后版本.[1] Linux下安装MATLAB时,需要先配置好JRE,可以参考: ...
- tomcat连接mysql的3个问题解决
转载请标明出处: 本文出自:[ouyida3的博客] 1.BasicDataSourceFactory Caused by: java.lang.ClassNotFoundException: org ...
- java文件和目录的增删复制
在使用java进行开发时常常会用到文件和目录的增删复制等方法.我写了一个小工具类.和大家分享,希望大家指正: package com.wangpeng.utill; import java.io.Fi ...
- 8.30 "我什么都不会"
/* 抢名额第一场 GG "我什么都不会阿" 这场磕死在E题了 按说应该能想到费马小定理 毕竟p is a prime 别的队都过了 大家都比较熟悉的就只有这一个 然后还有I题一开 ...
- extern_c
(1) 使用extern和包含头文件来引用函数有什么区别呢?extern的引用方式比包含头文件要简洁得多!extern的使用方法是直截了当的,想引用哪个函数就用extern声明哪个函数.这大概是 ...
- JavaScript检查是否包含某个字符
转自:http://my.oschina.net/u/1450300/blog/389325 indexOf用法: indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如 ...
- Python中操作myslq的方法
实例1.取得MYSQL的版本 在windows环境下安装mysql模块用于python开发,请见我的另一篇文章: MySQL-python Windows下EXE安装文件下载 # -*- coding ...