Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接：https://www.highcharts.com.cn/docs/process-text-data-file
1.javascript代码
var options = {
chart: {
type: 'column'
},
title: {
text: '水果消费情况'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位'
}
},
series: []
};
var csvData = document.getElementById('csv').innerHTML;
var lines = csvData.split('\n');
// 遍历每一行
Highcharts.each(lines, function(line, lineNo) {
var items = line.split(',');
// 处理第一行，即分类
if (lineNo === 0) {
Highcharts.each(items, function(item, itemNo) {
if (itemNo > 0) {
options.xAxis.categories.push(item);
}
});
}
// 处理其他的每一行
else {
var series = {
data: []
};
Highcharts.each(items, function(item, itemNo) {
if (itemNo === 0) {
series.name = item; // 数据列的名字
} else {
series.data.push(parseFloat(item)); // 数据，记得转换成数值类型
}
});
// 最后将数据 push 到数据列配置里
options.series.push(series);
}
});
// 创建图表
var chart = Highcharts.chart('container', options);
2.html代码
<div id="container"></div>
<pre id="csv">分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15</pre>
效果：
1.修改成从scv文件中获取数据
csv文件内容如下：
分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15
小芳1,3,16,13,15
小芳2,3,16,13,15
小芳3,3,16,13,15
2.py代码
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
with open('D:\\ajax_demo\\1.csv', 'r', encoding='utf-8') as f:
lines = f.read()
data = {
'data': lines
}
return render_template('index.html', **data)
if __name__ == '__main__':
app.run(debug=True)
3.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"></div>
<pre id="csv">
{{ data }}
</pre> <script src="static/b.js"></script>
</body>
</html>
4.js代码 --还是原来的
/**
* Created by sandu .
* @Project:ajax_demo
* @author:sandu
* @Software: PyCharm
* @file: b.js
* @time: 2019-02-25 0025 下午 15:56
*/
var options = {
chart: {
type: 'column'
},
title: {
text: '水果消费情况'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位'
}
},
series: []
};
var csvData = document.getElementById('csv').innerHTML;
var lines = csvData.split('\n');
// 遍历每一行
Highcharts.each(lines, function (line, lineNo) {
var items = line.split(',');
// 处理第一行，即分类
if (lineNo === 0) {
Highcharts.each(items, function (item, itemNo) {
if (itemNo > 0) {
options.xAxis.categories.push(item);
}
});
}
// 处理其他的每一行
else {
var series = {
data: []
};
Highcharts.each(items, function (item, itemNo) {
if (itemNo === 0) {
series.name = item; // 数据列的名字
} else {
series.data.push(parseFloat(item)); // 数据，记得转换成数值类型
}
});
// 最后将数据 push 到数据列配置里
options.series.push(series);
}
});
// 创建图表
var chart = Highcharts.chart('container', options);
效果图
再引申一下，可以修改成从数据库获取数据，只要获取到的数据符合csv格要求即可。
若在延伸，数据还可以使用经过numpy/pandas处理的数据。
Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)的更多相关文章
- 使用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 框架安装应用
Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱採用 Werkzeug ,模板引擎则使用 Jinja2 ,使用 BSD 授权. Flask也被称为 " ...
- 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框架与数据库连接的教程
命令行方式运行Python脚本 在这个章节中,我们将写一些简单的数据库管理脚本.在此之前让我们来复习一下如何通过命令行方式执行Python脚本. 如果Linux 或者OS X的操作系统,需要有执行脚 ...
- Flask 框架 重定向，捕获异常，钩子方法及使用jsonify在网页返回json数据
Flask 框架中常用到重定向方法来实现路由的跳转 ,路由跳转又分为站内跳转和站外跳转 常用的站内跳转方法为url_for 而常用的站外跳转为redirect 在这里提示一下: 在使用两种方法是须调 ...
- Python使用Flask框架，结合Highchart，搭配数据功能模块处理csv数据
参考链接:https://www.highcharts.com.cn/docs/data-modules 1.javascript代码 var csv = document.getElementByI ...
随机推荐
- 怎么在当前的view上获取所在的控制器（UIViewController），实现跳转
- (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = next.super ...
- Linux 常用命令大全2
Linux 常用命令大全 [帮助命令] command —help man command man 2 command 查看第2个帮助文件 man -k keyword 查找含有关键字的帮助 info ...
- Navicat for MySQL 激活方法
Navicat for MySQL 激活方法: 首先下载 PatchNavicat.exe ,不知道在哪儿下的可以直接拿走: 链接:https://pan.baidu.com/s/1yy4M8IDx8 ...
- ORACLE获取某个时间段之间的月份列表和日期列表
ORACLE获取某个时间段之间的月份列表获取某个时间段之间的月份列表(示例返回2009-03到2010-03之间的月份列表) SELECT TO_CHAR(ADD_MONTHS(TO_DATE('20 ...
- matlab进入指定目录
cd C:\Users\hui\Desktop\minepy\1\minepy-1.2.0\minepy-1.2.0\matlab
- 递推DP HDOJ 5375 Gray code
题目传送门 /* 题意:给一个串,只能是0,1,?(0/1).计算格雷码方法:当前值与前一个值异或,若为1,可以累加a[i],问最大累加值 DP:dp[i][0/1]表示当前第i位选择0/1时的最大分 ...
- 400 Nth Digit 第N个数字
在无限的整数序列 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...中找到第 n 个数字.注意:n 是正数且在32为整形范围内 ( n < 231).示例 1:输入:3 ...
- 299 Bulls and Cows 猜数字游戏
你正在和你的朋友玩猜数字(Bulls and Cows)游戏:你写下一个数字让你的朋友猜.每次他猜测后,你给他一个提示,告诉他有多少位数字和确切位置都猜对了(称为”Bulls“, 公牛),有多少位数字 ...
- kafka的topic命名技巧
不多说,直接上干货! 比如,我们给kafka的topic命名为user_r2p10 表示user这个topic的副本因子(r)是2,分区数(p)是10. 这样后期在写消费者代码的时候,根据top ...
- md5加密、Des加密对称可逆加密、RSA非对称可逆加密、https单边验证、银行U盾双边认证
1.md5不可逆的加密方式,加密成一个32位的字符串.算法是公开的,任何语言的加密结果都是一样的.总有可能是重复的. 用途: (1)防止明文存储:可以用作密码加密 ...