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 ...
随机推荐
- 同一个站点下，兼容不同版本的JQuery
https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page Y ...
- 7-80 HTML5新增的JS选择器
7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...
- C# oracle 参数传递的多种方式 留着复习
ORA-01036 非法的变量名/编号,(解决) 博客分类: oracle SQL 下边的代码就会造成 ORA-01036 非法的变量名/编号 cmd.CommandText = "SE ...
- Java 泛型 一
泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇将立足于代码介绍.总结了关于泛型的知识. 先看下面的代码: List list = new ArrayList(); list ...
- codehunter 「Adera 6」杯省选模拟赛 网络升级 【树形dp】
直接抄ppt好了--来自lyd 注意只用对根判断是否哟留下儿子 #include<iostream> #include<cstdio> using namespace std; ...
- bzoj1076: [SCOI2008]奖励关(期望dp+状压dp)
1076: [SCOI2008]奖励关 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2989 Solved: 1557[Submit][Statu ...
- ----堆栈 STL 函数库 ----有待补充
#include<cstdio> #include<string> #include<vector> #include<iostream> using ...
- [POI2015]Wycieczki
题目描述 给定一张n个点m条边的带权有向图,每条边的边权只可能是1,2,3中的一种.将所有可能的路径按路径长度排序,请输出第k小的路径的长度,注意路径不一定是简单路径,即可以重复走同一个点. 输入输出 ...
- linux C编程 Makefile的使用
Makefile的作用就是"自动化编译" 一.Makefile基本规则 下面给出几个简单实例: 第一步:分别用vim创建prog.c code.c code.h三个文件 prog. ...
- ORACLE_AQ 队列
Oracle AQ Demo,Step by Step 我准备用AQ来做一个数据仓库系统,提交分析任务队列.有以下需求: 1.利用通知异步的执行存储过程 2.设定队列大小极限 3.出列即删除 OK,l ...