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 ...
随机推荐
- Codeforces Round #311 (Div. 2)C. Arthur and Table
C. Arthur and Table time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 【CSU 1756】Prime
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1756 直接暴力O(n^2logn)过不了 两两算gcd 考虑每个数的范围[1,1000]统计一下即 ...
- [疑问] C# 多线程程序，如果在并行程序块中开空间会远远慢于将空间开在并行块之外
// int[,] label = new int[m, n]; Parallel.For(, thread_num, (n) => { ]; i++) { int[] tmp = new in ...
- POJ3528 HDU3662 三维凸包模板
POJ3528 HDU3662 第一道题 给定若干点 求凸包的表面积,第二题 给定若干点就凸包的面数. 简单说一下三维凸包的求法,首先对于4个点假设不共面,确定了唯一四面体,对于一个新的点,若它不在四 ...
- Patrik 音乐会的等待 单调栈的迷茫回忆
STL 一定要学好 一定要学好,一定要学好!!! 题目链接:https://www.luogu.org/problemnew/show/P1823 我们需要单向查找:用单调栈: 思路:维护一个身高单调 ...
- bzoj1778
高斯消元+矩阵的逆 来自popoqqq大神 求矩阵的逆:把I-T放在左边,P/Q*S放在右边,这样就形成了一个n*2n的矩阵,然后把左边高斯消元,右边就是求完逆的矩阵,其实就是ans,矩阵的逆跟乘法逆 ...
- C# 简单实现直线方程，抛物线方程（转载）
http://www.cnblogs.com/hsiang/archive/2017/01/17/6294864.html 本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程, ...
- vue seo
最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下: 1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样2.对比一下各个页面的seo是如何做的3. ...
- vue项目开发中踩过的坑
一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...
- [Swift]关键字：Self、self与super
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...