Python使用Flask框架,结合Highchart处理jsonl数据
1.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>
<style>
#data {
display: none;
}
</style> </head>
<body> <!-- 图表容器 DOM -->
<div id="container"></div>
<pre id="data">
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
</pre> <script src="static/b.js"></script>
</body>
</html>
2.js代码
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
var jsonStr = document.getElementById('data').innerHTML,
jsonData = JSON.parse(jsonStr);
options.series[0].data = jsonData;
Highcharts.chart('container', options);
Python使用Flask框架,结合Highchart处理jsonl数据的更多相关文章
- Python的Flask框架应用调用Redis队列数据的方法
转自:http://www.jb51.net/article/86021.htm 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器, ...
- 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- 使用Python的Flask框架,结合Highchart,动态渲染图表
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- 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 后引入对应的文件即可,不用修改原有的 ...
随机推荐
- hive使用
运行hadoop [root@hadoop0 ~]# start-all.sh 进入命令行[root@hadoop0 ~]# hive 查询昨天的表 hive> select * from st ...
- hdoj--1254--推箱子(bfs好题)
推箱子 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- KeepAlived的实现示例
KeepAlived的实现示例 KeepAlived的实现 HA Cluster配置准备: 各节点时间必须同步 ntp(6), chrony(7) 1>在centos6上 ntpdate 172 ...
- P1606 [USACO07FEB]荷叶塘Lilypad Pond(最短路计数)
P1606 [USACO07FEB]荷叶塘Lilypad Pond 题目描述 FJ has installed a beautiful pond for his cows' aesthetic enj ...
- P4576 [CQOI2013]棋盘游戏
传送门 很显然,除非白子和黑子相邻,否则必然是黑子获胜虽然我并没有看出来 那么现在对黑子来说它要尽可能快的赢,对白子它要多苟一会儿 然后就是这个叫做对抗搜索的东西了 //minamoto #inclu ...
- LoadRunner监控Linux配置教程
LoadRunner监控Linux资源时弹出如下错误: Monitor name :UNIX Resources. Cannot initialize the monitoring on 192.16 ...
- ATX 学习 (三)-atxserver2-android-provider
服务端代码 代码clone到本地,搭好相应环境(怎么搭的这里就不介绍了,很好搭的哈)一般库首先查看main.py文件,debug模式开始运行 一开始就是没接触过的tornado.ioloop,有点偏底 ...
- 全面学习ORACLE Scheduler特性(12)使用Windows和Window Groups
七.使用Windows 此Windows非彼Windows,通常说的Windows是指盖首富的操作系统,而此处所说的Windows,是指SCHEDULER特性中的一个子项.在SCHEDULER中,WI ...
- Quartz.Net学习笔记(1)-完整的例子
一.开发环境 系统:Win10 编译器:VS2013 .Net版本:4.5 Quartz版本:2.3.3 二.涉及程序集 Common.Logging.Core.dll Common.Logging. ...
- log4j2异步日志解读(二)AsyncLogger
前文已经讲了log4j2的AsyncAppender的实现[log4j2异步日志解读(一)AsyncAppender],今天我们看看AsyncLogger的实现. 看了这个图,应该很清楚AsyncLo ...