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 ...
随机推荐
- Keil和IAR——使用笔记
1. 几个宏的定义 Keil和IAR均用到以下三种宏定义,分别是:USE_STDPERIPH_DRIVER——表示使用ST提供的标准外设固件库:STM32F40_41xxx——作为芯片的判断:VECT ...
- 698C
Description n个视频,长度为k的缓存,每次询问,每个视频以pi的概率被选,如果不在缓存区则加入,如果缓存区满了,则最先进缓存的出来,问10^100次操作以后每个视频在缓存的概率 Input ...
- 手推FP-growth (频繁模式增长）算法------挖掘频繁项集
一.频繁项集挖掘为什么会出现FP-growth呢? 原因:这得从Apriori算法的原理说起,Apriori会产生大量候选项集(就是连接后产生的),在剪枝时,需要扫描整个数据库(就是给出的数据),通过 ...
- sql2000数据库置疑造成的原因以及如何解决置疑
造成数据库置疑一般有以下几点: 1)电脑非法关机或者意外停电: 2)磁盘有坏道或者损坏: 3)数据库感染病毒,日志文件损坏: 4)非正常情况下移动数据库文件 5)系统,硬盘,经常强制性关机(如断电)类 ...
- SVN请求认证信息
WIN10:C:\Users\Home目录\AppData\Roaming\Subversion Window Server 系统:C:\Users\Home目录\AppData\Roaming\Su ...
- [转载]android常用的API接口调用
原文地址:android常用的API接口调用作者:宋耀 显示网页: Uri uri = Uri.parse("http://www.google.com"); In ...
- bzoj 1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害【最小割】
枚举建图.jpg 一开始建的图挂了,于是枚举了几种建图方式-- 因为要删点,所以拆点,连接(i,i',1),对于原来图上的边(u,v),连接(u',v,inf),(v',u,inf),然后连接(s,i ...
- linux下jdk环境变量配置深度分析----解决环境变量不生效的问题
1.linux下jdk环境变量配置 是否需要配置环境变量,主要看java -version 显示的版本是否为你期望的版本 1.1 不需要配置环境变量的情况 使用java -version查看,版本显示 ...
- SQL常用指令集（Oracle）
1. Select rownum(oracle) top(mysql): 用于规定返回指定数目的值 Where roenum < number 2. Like 用于在where子句搜索指定模式 ...
- 状压DP UVA 10817 Headmaster's Headache
题目传送门 /* 题意:学校有在任的老师和应聘的老师,选择一些应聘老师,使得每门科目至少两个老师教,问最少花费多少 状压DP:一看到数据那么小,肯定是状压了.这个状态不好想,dp[s1][s2]表示s ...