Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

参考链接：https://www.highcharts.com.cn/docs/process-text-data-file

1.javascript代码

 1 var options = {
 2     chart: {
 3         type: 'column'
 4     },
 5     title: {
 6         text: '水果消费情况'
 7     },
 8     xAxis: {
 9         categories: []
10     },
11     yAxis: {
12         title: {
13             text: '单位'
14         }
15     },
16     series: []
17 };
18 var csvData = document.getElementById('csv').innerHTML;
19 var lines = csvData.split('
');
20 // 遍历每一行
21 Highcharts.each(lines, function(line, lineNo) {
22     var items = line.split(',');
23     // 处理第一行，即分类
24     if (lineNo === 0) {
25         Highcharts.each(items, function(item, itemNo) {
26             if (itemNo > 0) {
27                 options.xAxis.categories.push(item);
28             }
29         });
30     }
31     // 处理其他的每一行
32     else {
33         var series = {
34             data: []
35         };
36         Highcharts.each(items, function(item, itemNo) {
37             if (itemNo === 0) {
38                 series.name = item;   // 数据列的名字
39             } else {
40                 series.data.push(parseFloat(item)); // 数据，记得转换成数值类型
41             }
42         });
43         // 最后将数据 push 到数据列配置里
44         options.series.push(series);
45     }
46 });
47 // 创建图表
48 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代码

 1 from flask import Flask, render_template
 2 
 3 app = Flask(__name__)
 4 
 5 
 6 @app.route('/')
 7 def index():
 8     with open('D:\ajax_demo\1.csv', 'r', encoding='utf-8') as f:
 9         lines = f.read()
10     data = {
11         'data': lines
12     }
13     return render_template('index.html', **data)
14 
15 
16 if __name__ == '__main__':
17     app.run(debug=True)

3.html代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一个 Highcharts 图表</title>
 6     <!-- 引入 jquery.js -->
 7     <script src="static/jquery-3.3.1.min.js"></script>
 8     <!-- 引入 highcharts.js -->
 9     <script src="static/highcharts-7.0.3.js"></script>
10 
11 
12 </head>
13 <body>
14 
15 <!-- 图表容器 DOM -->
16 <div id="container"></div>
17 <pre id="csv">
18 {{ data }}
19 </pre>
20 
21 
22 <script src="static/b.js"></script>
23 </body>
24 </html>

4.js代码 --还是原来的

 1 /**
 2  * Created by sandu .
 3  * @Project:ajax_demo
 4  * @author:sandu
 5  * @Software: PyCharm
 6  * @file: b.js
 7  * @time: 2019-02-25 0025 下午 15:56
 8  */
 9 var options = {
10     chart: {
11         type: 'column'
12     },
13     title: {
14         text: '水果消费情况'
15     },
16     xAxis: {
17         categories: []
18     },
19     yAxis: {
20         title: {
21             text: '单位'
22         }
23     },
24     series: []
25 };
26 var csvData = document.getElementById('csv').innerHTML;
27 var lines = csvData.split('
');
28 // 遍历每一行
29 Highcharts.each(lines, function (line, lineNo) {
30     var items = line.split(',');
31     // 处理第一行，即分类
32     if (lineNo === 0) {
33         Highcharts.each(items, function (item, itemNo) {
34             if (itemNo > 0) {
35                 options.xAxis.categories.push(item);
36             }
37         });
38     }
39     // 处理其他的每一行
40     else {
41         var series = {
42             data: []
43         };
44         Highcharts.each(items, function (item, itemNo) {
45             if (itemNo === 0) {
46                 series.name = item;   // 数据列的名字
47             } else {
48                 series.data.push(parseFloat(item)); // 数据，记得转换成数值类型
49             }
50         });
51         // 最后将数据 push 到数据列配置里
52         options.series.push(series);
53     }
54 });
55 // 创建图表
56 var chart = Highcharts.chart('container', options);

效果图

再引申一下，可以修改成从数据库获取数据，只要获取到的数据符合csv格要求即可。

若在延伸，数据还可以使用经过numpy/pandas处理的数据。