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 ...
随机推荐
- HDU2138 素数判定
HDU2138 给定N个32位大于等于2的正整数 输出其中素数的个数 用Miller Rabin 素数判定法 效率很高 数学证明比较复杂,略过, 会使用这个接口即可. #include<iost ...
- vue 简介
Vue.js是一套构建用户界面的渐进式框架.采用自底向上增量开发的设计.Vue的核心值关注视图层非常容易与其他库和已有的项目整合.另外,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复 ...
- 数据仓库 VS 数据库
数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented).集成的(Integrate).相对稳定的(Non-Volatile).反映历史变化(Time Varian ...
- LVS的持久连接、会话保持和高可用介绍
持续连接 1)持久连接(lvs persistence)模板: 实现无论使用任何调度算法,在一段时间内(默认360s),能够实现将来自同一个地址的请求始终发往同一个RS ipvsadm -A|E -t ...
- 统一微信公众号、小程序、APP的用户信息
上次接手一个项目需要整合公众号.小程序以及APP的用户,查阅了微信文档以及一些作者的文章,中间踩了不少坑,在此记录一下解决的流程. 要点 实现统一信息的有以下几点: 1. 在微信开放平台绑定需要 ...
- 数学/思维 UVA 11300 Spreading the Wealth
题目传送门 /* 假设x1为1号给n号的金币数(逆时针),下面类似 a[1] - x1 + x2 = m(平均数) 得x2 = x1 + m - a[1] = x1 - c1; //规定c1 = a[ ...
- ACM_01背包（恰好装满）
背包2 Time Limit: 2000/1000ms (Java/Others) Problem Description: 有n个重量和价值分别为Wi,Vi的物品,现从这些物品中挑选出总量刚好为 W ...
- AOP面向方面编程---postsharp
PostSharp是一个用于在.NET平台上实现AOP(Aspect-Oriented Programming,面向方面编程)的框架,现通过简单的示例代码来演示如何使用postsharp. 1.新建一 ...
- 303 Range Sum Query - Immutable 区域和检索 - 不可变
给定一个数组,求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和,包含 i, j 两点.例如:给定nums = [-2, 0, 3, -5, 2, -1],求和函数为sumRange() ...
- Sql2008调试问题
t-sql调试的时候,报以下错误 处理 1.要在服务器本机,不要远程 2.服务器名称用电脑名称(cmd->hostname),不要用IP,(local)或. 调试快捷键跟VS一样 F11逐语句 ...